Carousels

Different examples of carousel options

Check out the full documentation for details

Autoplay (& loop)

The option s-loop will be set to true for autoplaying carousels. You can use a few lines of CSS to get a progress bar in your navigation dots.
Carousels that autoplay must have a pause button.

Custom CSS

<style>
.slider_dot.cc-active:before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--colors--accent);
  width:100%;
  animation: fill-dot 4s linear;
}

.slider-wrapper:has(.cc-paused) .slider_dot.cc-active:before,
.s-dragging .slider_dot.cc-active:before {
	animation-play-state: paused;
}

@keyframes fill-dot {
  from {
    width: 0%;
  }
}

.carousel_play-icon { display: none }
.cc-paused .carousel_pause-icon { display: none }
.cc-paused .carousel_play-icon { display: block }
</style>

Slide 1

Slide 2

Slide 3

Breakpoints

You can easily enable or disable the slider on different breakpoints using gsap's match media. We didn't include this as an attribute as this gives you the flexibility to do everything in a much clearer way.

Javascript

<script>
window.addEventListener('load', ()=> {
	let mm = gsap.matchMedia()

	// enable on desktop
  mm.add("(min-width: 992px)", () => {
    window.socks.carousel['carousel-1'].enable()
  })
  // disable on tablet and below
  mm.add("(max-width: 991px)", () => {
    window.socks.carousel['carousel-1'].disable()
  })
})
</script>

Slide 1

Slide 2

Slide 3

Scroll 2 slides

You can allow more than one slide to be scrolled at a time, and this can be changed on different breakpoints too

Javascript

<script>
window.addEventListener('load', ()=> {
	let mm = gsap.matchMedia()

	// scroll 2 on tablet and desktop
  mm.add("(min-width: 480px)", () => {
    window.socks.carousel['carousel-2'].slidesToScroll = 2
  })
  // scroll 1 on mobile
  mm.add("(max-width: 479px)", () => {
    window.socks.carousel['carousel-2'].slidesToScroll = 1
  })
})
</script>

Slide 1

Slide 2

Slide 3