Как сделать несколько эффектов для слайдов?

Question

[eellazy]

Всем привет! Никак не получается сделать 2 ефекта перехода слайдов в 1 слайдере.
Хочу сделать при автопрокрутке ефект fade, при скролле или вайпе ефект scroll. Вся беда в том что не знаю как прикрутить две эти анимации. Тут либо скролл, либо фейд.

Есть идея написать на чистом css эфект для каждого слайда, но не знаю как заставить эти слайды при автопрокрутке появляться с фейдом

Может кто стыкался с эти?

Вот код слайдера

$(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>';          }
});
    });

Может быть посоветуете другие слайдеры которые могу это реализовать и будут адаптивными

Answer 1

[Сергей Горячев]

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

Comments

[eellazy]

Та ну... какое извращение) Видел такие слайдеры

Answer 2

[Сергей Тутуков]

Вот рабочий вариант
НО ОН РЕАЛИЗОВАН НЕ НА 100%!!! Мне лень делать до конца.
1. В начале работает эффект fade
2. При клике на кнопку .btn меняется эффект .slick('slickSetOption', 'fade', false, true)
3. Но так как инициализирован был slick через эффект fade нужно поправить стили у слайдера.
4. Добавляем класс .important{left:0!important; opacity:1!important;}

PS. Когда будешь свою задачу, оставляй делегированное событие

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

, чтобы СРАБАТЫВАЛО событие.
Должно быть что-то вроде этого

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

Comments

[eellazy]

можете помочь со слайдером?

[Сергей Тутуков]

eellazy: так я вроде расписал все что нужно сделать

[Сергей Тутуков]

eellazy: короче я все сломал и домой пора:(
Проблема в том что при инициализации слайдера на свайп добавляются инлайновые стили. Их нужно убить все. Если убьешь их то должно все заработать).
Или проще взять готовый слайдер

[eellazy]

Сергей Тутуков: а какие есть готовые слайдеры? Не подскажите?