Carousel

The Carousel (or Slider) component is a simple slider that allows users to navigate through a series of slides.

Demo

Slide 1

Slide 2

Slide 3

Scripts

Add these before the </body> tag in your site/page settings

GSAP

 <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

Carousel component

<script src="https://cdn.jsdelivr.net/npm/socks-ui@{v}/dist/carousel.js"></script>

Features

Full keyboard navigation
Autoplay with pause button
Customizable threshold for dragging
Customizable active slide class
Customizable dragging class
Customizable disabled button class
Dots navigation
No surprise CSS changes. Style it how you want and it will look exactly the same live.

Anatomy

Wrapper
- Root
  - Slide
  - Slide
  - Slide
- Navigation
  - Next Arrow
  - Previous Arrow
  - Pause Button (Optional - only for autoplay)
- Dots
  - Dot (Rest will be generated)

Usage

Main Attributes:

s-carousel = wrapper - The wrapper element that holds the slides and the navigation elements. Each carousel wrapper will initialize a new carousel. All other elements need to be inside this wrapper.

s-carousel = root - The element that holds all the slides. The carousel works by moving this element left and right; not the individual slides. You can use flex or grid to create the gap between the slides.

s-carousel = slide - The individual slides.

s-carousel = next - The "Next slide" button

s-carousel = prev - The "Previous slide" button

s-carousel = pause - The "Pause autoplay" button.

s-carousel = dot - The dot that will be used for navigation. Will be used as a template to generate the other dots. You can add the active class to it to avoid losing the styles.

‍

Options (add to wrapper element):

s-threshold - Optional attribute for how much the user needs to drag to change slide (Accepted values: 0.01 - 1). Default: 0.3

s-active-class - The active class added to the active slide. Default: s-active

s-dragging-class - The class that will be added while the user is dragging. Default: s-dragging

s-disabled-class - The class that will be added to buttons when the user reaches the first/last slide. Default: s-disabled

s-paused-class - The class that will be added to the pause button when autoplay is paused. Default: s-paused

s-autoplay - Activates autoplay. Set the value to a number to control the timing. Default: 5 (seconds).
Note: You need to include a pause button to make this feature accessible.

s-duration - The duration of the slide animation. Default: 0.5 (seconds)

s-ease - The easing of the slide animation. Default: power2.out (see GSAP Easing)

s-loop - Whether to go back to the first slide after the user reaches the end. Default: false

s-slides-to-scroll - How many slides will be visible and will scroll when a navigation button is clicked.

Advanced

Events

init - Carousel initialized

destroy - Carousel destroyed

change - Slide changed

dragstart - User started dragging

dragend - User stopped dragging

‍

// Get carousel instance
const carousel = socks.carousel['carousel-0']

// Subscribe to events
// carousel initialized
carousel.on('init', (detail) => {
  console.log('Carousel initialized:', detail)
})

// slide changed
carousel.on('change', ({ currentIndex, previousIndex }) => {
  console.log(`Slide changed from ${previousIndex} to ${currentIndex}`)
})

// drag started
carousel.on('dragstart', ({ startX, currentX }) => {
  console.log('Started dragging at:', startX)
})

// drag ended
carousel.on('dragend', ({ dragDistance, currentIndex }) => {
  console.log('Ended dragging, moved:', dragDistance)
})

// carousel destroyed
carousel.on('destroy', (detail) => {
  console.log('Carousel destroyed:', detail)
})

// Unsubscribe from events
const onChangeHandler = ({ currentIndex }) => console.log('Current slide:', currentIndex)
carousel.on('change', onChangeHandler)
// Later...
carousel.off('change', onChangeHandler)

No custom events are exported for this component.

Methods

Navigation Methods

goToSlide(index, animate)
- index: The slide number to navigate to (zero-based)
- animate: Whether to animate the transition (defaults to true)
goToNext()
- No parameters, moves to next slide
goToPrev()
- No parameters, moves to previous slide

Playback Control

startAutoplay()
- No parameters, begins auto-advancing slides
stopAutoplay()
- No parameters, stops auto-advancing slides
resetSlider()
- No parameters, resets carousel to initial state

State Management

enable()
- No parameters, enables all carousel functionality
disable()
- No parameters, disables all carousel functionality
destroy()
- No parameters, removes all event listeners and cleanup

Example usage

const carousel = window.socks.carousel['carousel-0']

carousel.goToNext() // next slide

No custom methods are exported for this component.

Use Cases

Sync a carousel with another one

If you want a second carousel to be synced with your first carousel, you can listen for changes on the first one and change based on the new slide index:

socks.carousel['carousel-0'].on('change', (e)=> {
    socks.carousel['carousel-1'].goToSlide(e.currentSlide)
})

‍

2-way sync

If you want the sync to happen both ways, we have to write a little bit more code to avoid infinite loops:

let isChanging = false

socks.carousel['carousel-0'].on('change', (e) => {
  if (!isChanging) {
    isChanging = true
    socks.carousel['carousel-1'].goToSlide(e.currentIndex)
    isChanging = false
  }
})

socks.carousel['carousel-1'].on('change', (e) => {
  if (!isChanging) {
    isChanging = true
    socks.carousel['carousel-0'].goToSlide(e.currentIndex)
    isChanging = false
  }
})

No special use cases added yet

Installation

Accordion