Identify slides shown in edgePadding with a class to allow styling

[sian-alcock]

Issue description: I would like to show the slide that appears off the edge of the slider (as revealed by the edgePadding setting) in greyscale but I can't see a way to style that slide differently from the other visible ones. (Great slider btw).

Demo link/slider setting: edgePadding

Tiny-slider version: 2.92 Browser name && version: Chrome Version 81.0.4044.122 (Official Build) (64-bit) OS name && version: macOs Mojave 10.14.6

[sunixzs]

Hi @sian-alcock ,

maybe you can work with the events and place a css class for the outside items?

Something like this:

var setOutsideClasses = () => {
    let info = slider.getInfo();
    let firstVisible = info.index;
    let lastVisible = firstVisible + info.items;

    for (var i = 0; i < info.slideItems.length; i++) {
        if (i >= firstVisible && i < lastVisible) {
            info.slideItems[i].classList.remove("outside");
        } else {
            info.slideItems[i].classList.add("outside");
        }
    }
};

var slider = tns({
    onInit: setOutsideClasses
   ...other params...
});

slider.events.on("transitionEnd", setOutsideClasses);
slider.events.on("dragEnd", setOutsideClasses);

Just an idea. The calculation of firstVisible and lastVisible fails when info.index + info.items is larger than info.slideItems.length. This should start again with 0 on overflow. But maybe this is a starting point.

I had a similar problem with shadows on each item. The shadow of the outside items were shown in the overflow-hidden area. But I stopped at this point b/c of another solution (shadow also on the overflow-hidden area but no edgePadding (and no event listener)).

[lindseysnyder]

Hi @sian-alcock, I am doing something like what I think you are trying to achieve. I found clues in the sections about custom events and get info.

I am listening for the indexChanged event

slider.events.on('indexChanged', addClassOnFocalSlide);

and in my function I am adding a class to the active slide based on the index. The focal slide as well as the slides on either side get a class from Tiny Slider of .tns-slide-active, which you could style as you want for a grayscale effect; and where the class .active is also present on the focal slide, style how you need to.

[cmegown]

I'm running into this issue as well today, where the design calls for using edgePadding to show a portion of the prev/next slides that will have an opaque overlay on them. This issue, as mentioned before, is that the partially-visible slides also have the tns-slide-active class so there's no immediate way for me to distinguish which one is actually active.

Here's an attempt that I can only get to work on the indexChanged event that @lindseysnyder suggested, but I'm unable to get it working with the onInit property:

export default class {
  constructor(el) {
    const slider = tns({
        container: el,
        edgePadding: 130,
        //onInit: unable to get this to work
    });

    slider.events.on('indexChanged', () => {
        const { index, slideItems } = slider.getInfo();

        Array.from(slideItems).forEach((item, i) => {
          if (index === i) {
            item.classList.add('active');
          } else {
            item.classList.remove('active');
          }
        });
    }
  }
}

What I would prefer to do here is move the callback function tied to the indexChanged event out into its own function, which could then be called there and onInit. Anyone have ideas?

[anakadote]

This can be accomplished using CSS alone:

.tns-item,
.tns-slide-active {
  filter: grayscale(1); /* Sets all slides to grayscale. */
}
.tns-slide-active + .tns-slide-active {
  filter: none; /* Sets the middle (active) slide, and the slide after the middle slide, to color. */
}
.tns-slide-active + .tns-slide-active + .tns-slide-active {
  filter: grayscale(1); /* Sets the slide after the middle slide back to grayscale. */
}