Crossfading slides between one another on transition?

Hey there 👋

I was wondering if it is currently possible with this package to perform a crossfade between one carousel slide and another during a transition

By this I mean the image fades in on top of one another like this example

Currently I have been able to perform a fadeIn and fadeOut effect using the classNameVisible and classNameHidden classes however due to the transform applied the previous slide is always offscreen and a seamless transition cannot be performed.

Is this possible currently using this package?

Many thanks, Paul

[dschi]

This seems to be working for me:

• diable transition translateX
• move each child to position 0
• add fade in and fade out animation (the code works for 10 slides)

.carousel__slider-tray {
   transform: none !important;
  .carousel__slide {
    opacity: 1;
    &.carousel__slide--visible {
      animation: fade-in-carousel 0.7s forwards;
    }
    &.carousel__slide--hidden {
      animation: fade-out-carousel 0.7s forwards;
    }
    @for $i from 1 through 10 {
      &:nth-child(#{$i + 1}) {
        $width: $i * -100 + '%';
        transform: translateX(#{$width}) translateX(0px);
      }
    }
  }
}
@keyframes fade-in-carousel {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out-carousel {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

[lukethacoder]

attempted this one with the below but couldn’t get it working properly.

.slider__initial {
  background-color: green;
  opacity: 1;
  transition-property: background-color, opacity;
  transition-timing-function: ease;
  transition-duration: 2s, 1s;
}
.slider__active {
  background-color: blue;
  opacity: 0;
}

<CarouselProvider
  naturalSlideWidth={100}
  naturalSlideHeight={125}
  totalSlides={3}
  currentSlide={slide}
  visibleSlides={1}
>
  <Slider className="slider__initial" classNameAnimation="slider__active">
    <Slide index={0}>first</Slide>
    <Slide index={1}>second</Slide>
    <Slide index={2}>third</Slide>
  </Slider>
</CarouselProvider>

I did manage to get classNameHidden and classNameVisible working, but the sliding animations still happen. Passing a random class to classNameAnimation stops the sliding animation, but doesn’t stop the sliding ability. Ideally it would be able to fadeIn/Out.

---

Would be awesome if we had an example of using classNameAnimation to achieve different slide transition animations.