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

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!

Hi,
If you haven't received an answer yet, you can post on some FB groups
+ Squarespace Customization Resource Groups
+ Squarespace Community
+ Squarespace Entrepreneur
+ Squarespace Rockstars

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

Thank you, I'll look into plug-ins if adding code to Squarespace to make this adjustment is not possible.

Thanks!

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?

@pixies1 I'm trying to do something similar, did you ever figure it out? or did you have to go to  plug in?

Hi there, I didn't end up using a plug-in.

Instead I'm having the company logos auto-scroll on my website: https://typeaprofessionals.com

Good luck!

On 8/9/2021 at 2:13 PM, pixies1 said:

Hi there, I didn't end up using a plug-in.

Instead I'm having the company logos auto-scroll on my website: https://typeaprofessionals.com

Good luck!

@pixies1 that auto scroll is awesome. Can you point me in the right direction to figure out that code? I'd love to do this on a client site! 

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;}
}

Thanks for this code! I'm just getting ready to try it and wondered is this a static image on the page or are you using a gallery/summary ? Thanks! 

Found this video for anyone else needing a bit more direction. Thanks @pixies1 for getting me on the right track!! 

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