mbalaji 2 Share Posted September 21, 2020 Hi, I want to create an image gallery like this site's "What We Do" section. https://astuteeducation.com/ (Dragging and continuous scroll. That is not an auto play of the carousel block.) How can I do that on squarespace ? Thanks.! Link to post
0 tuanphan 9,293 Share Posted September 22, 2020 (edited) Demo: https://codepen.io/kreigd/pen/ybYNoN Add Code Block > Paste below code <div class="container-fluid"> <h1 class="text-center mb-3">Bootstrap Multi-Card Carousel</h1> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner row w-100 mx-auto"> <div class="carousel-item col-md-4 active"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f44242/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 1</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/418cf4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 2</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/3ed846/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 3</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/42ebf4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 4</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f49b41/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 5</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f4f141/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 6</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/8e41f4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 7</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <style> @media (min-width: 768px) { /* show 3 items */ .carousel-inner .active, .carousel-inner .active + .carousel-item, .carousel-inner .active + .carousel-item + .carousel-item { display: block; } .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left), .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item, .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item { -webkit-transition: none; transition: none; } .carousel-inner .carousel-item-next, .carousel-inner .carousel-item-prev { position: relative; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item { position: absolute; top: 0; right: -33.3333%; z-index: -1; display: block; visibility: visible; } /* left or forward direction */ .active.carousel-item-left + .carousel-item-next.carousel-item-left, .carousel-item-next.carousel-item-left + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item { position: relative; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } /* farthest right hidden item must be abso position for animations */ .carousel-inner .carousel-item-prev.carousel-item-right { position: absolute; top: 0; left: 0; z-index: -1; display: block; visibility: visible; } /* right or prev direction */ .active.carousel-item-right + .carousel-item-prev.carousel-item-right, .carousel-item-prev.carousel-item-right + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item { position: relative; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; display: block; visibility: visible; } } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script> <script> $(document).ready(function() { $("#myCarousel").on("slide.bs.carousel", function(e) { var $e = $(e.relatedTarget); var idx = $e.index(); var itemsPerSlide = 3; var totalItems = $(".carousel-item").length; if (idx >= totalItems - (itemsPerSlide - 1)) { var it = itemsPerSlide - (totalItems - idx); for (var i = 0; i < it; i++) { // append slides to end if (e.direction == "left") { $(".carousel-item") .eq(i) .appendTo(".carousel-inner"); } else { $(".carousel-item") .eq(0) .appendTo($(this).find(".carousel-inner")); } } } }); }); </script> Edited September 22, 2020 by tuanphan You can send your question to my email to get faster answer. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum. Link to post
0 deeptivd 0 Share Posted October 21, 2020 I would like to use this functionality to add a section for customer testimonials on my website www.studiooncloud.com. Can you guide on steps to follow? Should I first insert a gallery block & then copy this code? Link to post
0 tuanphan 9,293 Share Posted October 23, 2020 On 10/21/2020 at 4:55 PM, deeptivd said: I would like to use this functionality to add a section for customer testimonials on my website www.studiooncloud.com. Can you guide on steps to follow? Should I first insert a gallery block & then copy this code? Insert Code Block > Paste all above code You can send your question to my email to get faster answer. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum. Link to post
0 ibisette 0 Share Posted November 3, 2020 Hi I really am desperate for help on this issue. On pc the website looks fabulous, exactly the way I wanted it to be. Problem comes up on mobile. www.ibisette.com/portfolio/portraits for example, all portrait-oriended photo's in the carousel show a lot of blank space on both left and right side of the image as you can see on the screenshot below. I would like to have the carousel to be taller so that pictures in both landscape and portrait mode be seen clearly. (I have absolutely no problem with how the landscape mode pictures are displayed now, it's great. It's just for the portrait mode that the blank space is way too big. I would love it to look a little more like the paint job I did below: Is there anyone who could help me write a little bit of code to fix this issue? I have disabled the autoplay. Link to post
Question
mbalaji 2
Hi,
I want to create an image gallery like this site's "What We Do" section. https://astuteeducation.com/ (Dragging and continuous scroll. That is not an auto play of the carousel block.) How can I do that on squarespace ?
Thanks.!
Link to post
Top Posters For This Question
2
1
1
1
Popular Days
Nov 3
1
Sep 21
1
Sep 22
1
Oct 21
1
Top Posters For This Question
tuanphan 2 posts
mbalaji 1 post
deeptivd 1 post
ibisette 1 post
Popular Days
Nov 3 2020
1 post
Sep 21 2020
1 post
Sep 22 2020
1 post
Oct 21 2020
1 post
Posted Images
4 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment