VOTE: Opinion wanted before release of v.3!

Question: Should Embla Carousel be responsible for toggling classnames out of the box or should this be up to the user to implement?

WIth Embla v.3 this is easily achieved like so:

const embla = EmblaCarousel(emblaNode, { loop:false })

const selectedClass = 'is-selected'
const draggableClass = 'is-draggable'
const draggingClass = 'is-dragging'

function applyDraggableClasses() {
  emblaNode.classList.add(draggableClass)
  embla.on('pointerDown', () => emblaNode.classList.add(draggingClass))
  embla.on('pointerUp', () => emblaNode.classList.remove(draggingClass))
}

function applySelectedClasses() {
  const slidesInView = embla.slidesInView(true)
  const slidesNotInView = embla.slidesNotInView(true)
  slidesNotInView.forEach(i => slides[i].classList.remove(selectedClass))
  slidesInView.forEach(i => slides[i].classList.add(selectedClass))
}

applyDraggableClasses()
embla.on('select', applySelectedClasses)
embla.on('pointerUp', applySelectedClasses)
embla.on('init', applySelectedClasses)

Basically, this suggestion is about deprecating the following options:

• draggableClass
• draggingClass
• selectedClass

Voting closed! Embla v.3 will still support all these options.

👍 = Keep these options

👎 = Remove these options

I’m going to throw out random pings to get this started. I hope you don’t mind.

@gunnarx2, @xiel, @olushchik, @nikrowell, @yocmen, @LaksCastro, @bitttttten, @mrksmts, @jakubreron, @iamkevingreen, @niubsta, @michaelrambeau, @omarkhatibco, @readeral, @allen-garvey, @ontrigger.

[davidjerleke]

Thank you all for voting! Embla will still support the class name toggling in v.3 with one addition: The possibility to opt-out by passing empty strings as classnames for all these options.

Stay tuned for Embla Carousel version 3!

Hit the watch button to get notified about the release 📣.

[omarkhatibco]

@davidcetinkaya I would like to keep the classNames since I using it every time to style my slider.

I know I can easily implement it but it’s overhead to do the same code every time you need to use the slider.