Jump to content

Can summary block carousel do continuous loop forward (instead of fast-rewind backward)?

Recommended Posts

Hi there, I’m using a summary carousel block to display testimonials (actually blog posts). I click the right arrow to scroll through the testimonials. When I reach the last one, it stops and does this fast rewind left back to the first one.

Is it possible to add code so you can keep clicking the right arrow and it will keep cycling through in a continuous loop? I don’t want it to scroll automatically, I just want the right arrow (or left arrow) to keep cycling through instead of stopping at the end and then fast-rewinding back to the first one.

Any help is much appreciated. Thanks!

Link to comment
On 3/5/2021 at 8:53 AM, pixies1 said:

Hi there, I’m using a summary carousel block to display testimonials (actually blog posts). I click the right arrow to scroll through the testimonials. When I reach the last one, it stops and does this fast rewind left back to the first one.

Is it possible to add code so you can keep clicking the right arrow and it will keep cycling through in a continuous loop? I don’t want it to scroll automatically, I just want the right arrow (or left arrow) to keep cycling through instead of stopping at the end and then fast-rewinding back to the first one.

Any help is much appreciated. Thanks!

Infinite loop currently not offered by default, you may want to implement a 3rd party carousel plugin such as swiper to support this

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 month later...
On 3/6/2021 at 10:43 PM, bangank36 said:

Infinite loop currently not offered by default, you may want to implement a 3rd party carousel plugin such as swiper to support this

Hi Bangnank36,

I'm looking to do this for my carousel -- do you know where I can find out more on how to implement it?

Link to comment
  • 3 months later...
  • 2 weeks later...

Thanks! To get this effect, I actually created one long image that scrolls continuously

First create a 5900x390px image with your logos spaced out evenly (you can do this for free at Canva.com)

Then add the code below to CSS (replacing my URL image with your own)

Hope it works for you!

 

//auto-scrolling logos//
.slider {
  width: 135%;
  overflow: hidden;
  margin-left: -13vw;
  margin-right: 0vw;
  position: relative;
}

.slider .slider-image {
  background-image: url(https://static1.squarespace.com/static/60606ea81846b4151d82ec0b/t/60be85e8d976482627d1592a/1623098856396/Slider.png);
  width: auto;
  height: 150px;
  background-size: 2950px 200px;
  animation: slide 50s linear infinite;
}

@keyframes slide {
  from {background-position-x: 0px;}
    to {background-position-x: -2950px;}
}

Link to comment
  • 3 weeks later...

Hi there, it's a code block with the following code:

<div class="slider">
  <div class="slider-image">
    
  </div>
</div>

Sorry I didn't think to include that in my previous message.

And thanks for finding/posting that video! I watched a similar one to figure out how to do it

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.