How to make multiple slide effects?

Question

css

Hello! It's impossible to make 2 slide transition effects in 1 slider.
I want to make a fade effect when auto scrolling, a scroll effect when scrolling or wipe. The trouble is that I do not know how to fasten these two animations. It's either a scroll or a fade.

There is an idea to write an effect on pure css for each slide, but I don’t know how to make these slides appear with a fade when autoscrolling.

Maybe someone ran into these?

Here is the slider code

$(document).on('ready', function() {
 $(".slider").slick({
  autoplay: true,
  dots: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  infinite: true,
  speed: 500,
  cssEase: 'linear',
  customPaging : function(slider, i) {
    var thumb = $(slider.$slides[i]).data();
    return '<a>'+(i+1)+'</a>';          }
});
    });

Can you recommend other sliders that can implement this and will be adaptive

Answer 1

Месье знает толк в извращениях :)

Answer 2

Here is a working version
BUT IT IS NOT 100% IMPLEMENTED!!! I'm too lazy to finish it.
1. At the beginning, the effect works fade
2. When you click on the button, .btnthe effect changes .slick('slickSetOption', 'fade', false, true)
3. But since it was initialized slickthrough the fade effect, you need to correct the styles of the slider. 4. Add the PS
class . .important{left:0!important; opacity:1!important;}
When you're done with your task, leave a delegated event

$(document).on('touchstart', 'слик-слайдер', function(e) { ..});

to FIRE the event.
Should be something like this

$(document)
.on('touchstart', 'слик-слайдер', function(e) {
   меняем эффект  и добавляем класс
})
.on('touchend', 'слик-слайдер', function(e) {
 возвращаем эффект и удаляем класс
});