Consider Adding "Active" Class Identifier to Current Card

[sjstark]

Had a request that's possible to add classes with existing carousel infrastructure, but may be worth adding an active class identifier to cards. Feels like a common standard among other carousels.

[sjstark]

Thinking about this more, may not be possible since it's SSR'ed?

[weotch]

I was actually thinking about this this morning!

Yeah, we can't know that at SSG time since it's dependent on the viewport width. It could be something that gets added after client side mount though.

I was also thinking that a more powerful way to do this would be via scoped slots. Like:

ssr-carousel
  template(#default='{ active }')
    slide(
      v-for='slide, index in slides'
      :key='slide.id'
      :active='active.contains(index)')

The scoped slot active value would be an array of all the indices that are currently active. I'm assuming here that active means like 100% in the viewport. This does beg the question: what is active? Are all cards currently in the viewport active? Does it update constantly while dragging or only when you release?

We could also do a sugar prop that adds a CSS class like you were proposing, like when you don't need to know know it JS, just need to add some simple styling:

ssr-carousel(add-active-classes)
  slide(v-for='slide, index in slides' :key='slide.id')

[sjstark]

For this case, I believe active is only the case on mobile (and mainly touchscreens) when there's only 1 card showing.

I think I've seen on other carousels that the "arrows" will just increment the slider by 1 index each time rather than paginate them. In this case active could also make sense.

However, in cases where we are paginating and arrows shift by 2 or 3 at a time, I don't think active makes sense and we'd just set it to the first in that set? or maybe there's a mix of paginate and the arrows increment active by one?
So arrows when clicked will shift active selected by one and the page won't change until the active is the first selected on that "page"?

[weotch]

Yeah maybe this, more explicit API is better

ssr-carousel
  template(#default='{ featuredIndex }')
    slide(
      v-for='slide, index in slides'
      :key='slide.id'
      :class='{ active: featuredIndex == index }')

Where featuredIndex is:

• If center is enabled, it's the center-most slide in the viewport
• Else, it's the left-most slide

And then, with the sugar API:

ssr-carousel(add-featured-class)
  slide(v-for='slide, index in slides' :key='slide.id')

This would add a featured class to the slides, following the same rule.

Thoughts?

[jonjahr]

+1 for this last explicit API and for the sugar API.

Other slot prop ideas: visibleIndexes, fullyVisibleIndexes... not that those are the best ones or even the best names for them. And fwiw I prefer "indexes" over "indices".

[weotch]

With #62 I've added an activeSlides computed property that can be used for this. It returns an array of slide index values that are in the viewport.

[fgrasu]

I had a similar request, to add some additional styling to the centered slide and got it working using the tween:start event. Not that pretty though:

<ssr-carousel @tween:start="onSlideChange">
  <slide v-for="(item, index) in slideList" :key="index" :index="index" class="slide" :class="{'active':index === centeredSlideIndex}">
    ...
  </slide>
</ssr-carousel>

onSlideChange(currentSlide) {
  const { index } = currentSlide
  const slideIndex = index % this.slideList.length // need % because index will increment higher than slideList length
  this.centeredSlideIndex = index >= 0 || slideIndex === 0 ? slideIndex : this.slideList.length + slideIndex
}