Have the next slide slightly appear?

[Skima Harvey]

Hello there,

I love the library bu I was wondering if there were anyway to have the next slide slightly appear?

Thank you for your help/tips

[p4w31 !d21k0w541]

Hello :) If by "slightly appear" you mean how fast next slide appears over the previous one please look at the live demo. There you will find on the right side property called slider-transition-duration. Play with it with different values to see if that is what you want to achieve. If it does, you will have to overwrite that property using raw CSS or create your own copy of slider styles in SCSS and modify it from there. Alternatively you could also create your own instance of component that you've chosen(e.g. autoplay.js) and adjust to your needs(how changing slides behaves).

[Skima Harvey]

Thank you very much by the detailed reponse however I wasnt clear enough. What I meant next slide appears a little bit on the side. Like the example below.

[p4w31 !d21k0w541]

Thanks for the details! As far as I am concerned repo consider only single slide examples. If you would like to achieve that effect you definietly would have to make some changes to the slider behaviour. I'm assuming that within the example you shown above by "next slide appears a little bit on the side" you mean only that next image fragment(not the text titled "A New Era of Glamour"). I've thought about one tricky idea which you could try.. If we look at e.g. autoplay.js you will find function called renderSlides which looks like this:

  const renderSlides = () => {
    return slides.map(slide => {
      return (
        <div
          key={slide.src}
          style={{ backgroundColor: slide.backgroundColor }}
          data-src={slide.src}
        />
      );
    });
  };

If you would like the user to see the incoming slide you would have to change that function first so instead of single slide it returns two(current one and the next one). Map function allows to refer to the next index e.g. stackoverflow(remember about case when referencing last image from slider to point to the first index not index + 1). This way each "slide" would have current one and the next one and you would only have to create appropiate styles for that incoming slide fragment by using for e.g. clip property to crop image and then position it :)

I didn't try it but if it sounds promising feel free to try it :)

Alternatively you can look after ready solutions that instantly allows to have multiple slides like react-multi-carousel from YIZHUANG(click here for preview, I've thought about the example on the bottom of the page)

PS:
If you decide to try with react-awesome-slider, consider using clip-path(link) instead of clip mentioned above since it's deprecated (oops 😄 ). It also would require some polishing to get rid of incoming slide fragment repetition that was cropped on previous slide.

[Skima Harvey]

This is great! Thank you very much for your detailed answer. Might go with the multi-carousel library