1

Всем доброго времени суток!

Делаю очередной слайдер на slick slider. Столкнулся с проблемой, нужно сделать анимацию появления слайдов при прокрутке. Подскажите, пожалуйста, как задать события для прокрутки слайдов вперед и назад?

if (нажали кнопку Next или прокрутили слийдер вперед) {
  alert('Слайдер прокрутился вперед');
  //Также тут должны работать события beforeChange и afterChange
}
if (нажали кнопку Previous или прокрутили слийдер назад) {
  alert('Слайдер прокрутился назад');
  //Также тут должны работать события beforeChange и afterChange
}

https://jsfiddle.net/h7p251qp/

2
  • и чем же это отличается от afterChange и т.п.?
    – teran
    Commented 4 янв. 2018 в 12:37
  • afterChange и beforeChange срабатывает при прокрутке слийдера и назад и вперед
    – g4343
    Commented 4 янв. 2018 в 12:47

2 ответа 2

2

Как вариант использовать jquery-mousewheel

Пример

var mySlider = $('.sliders');

mySlider.slick({
  dots: false,
  infinite: true,
  slidesToShow: 3,
});

mySlider.mousewheel(function(e) {
  e.preventDefault();

  if (e.deltaY < 0) {
    $(this).slick('slickNext');
  } else {
    $(this).slick('slickPrev');
  }
});
.sliders {
  text-align: center;
}

.sliders>div {
  background-color: #ddd;
}

.sliders>div h3 {
  background-color: #ccc;
  border: 1px solid #000;
  margin: 10px;
  font-size: 42px;
  line-height: 60px;
}
<link href="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

<div class='sliders'>
  <div>
    <h3>1</h3>
  </div>
  <div>
    <h3>2</h3>
  </div>
  <div>
    <h3>3</h3>
  </div>
  <div>
    <h3>4</h3>
  </div>
  <div>
    <h3>5</h3>
  </div>
  <div>
    <h3>6</h3>
  </div>
</div>

1
  • Немного не то, нужно что-бы событие срабатывало не при прокрутке колесика мышки, а при нажатии кнопок (вперед, назад) и при перетаскивании слайдов мышей или таче.
    – g4343
    Commented 4 янв. 2018 в 12:02
0

var mySlider = $('.sliders');

mySlider.slick({
  dots: false,
  infinite: true,
  slidesToShow: 3,
});

mySlider.mousewheel(function(e) {
  e.preventDefault();

  if (e.deltaY < 0) {
    $(this).slick('slickNext');
  } else {
    $(this).slick('slickPrev');
  }
});
mySlider.on('beforeChange', function(event, slick, currentSlide, nextSlide){
  if(nextSlide > currentSlide){
    alert('Вперёд')
  }else{
    alert('Назад')
  }
})
.sliders {
  text-align: center;
}

.sliders>div {
  background-color: #ddd;
}

.sliders>div h3 {
  background-color: #ccc;
  border: 1px solid #000;
  margin: 10px;
  font-size: 42px;
  line-height: 60px;
}
<link href="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

<div class='sliders'>
  <div>
    <h3>1</h3>
  </div>
  <div>
    <h3>2</h3>
  </div>
  <div>
    <h3>3</h3>
  </div>
  <div>
    <h3>4</h3>
  </div>
  <div>
    <h3>5</h3>
  </div>
  <div>
    <h3>6</h3>
  </div>
</div>

2
  • То что нужно! А еще подскажите, пожалуйста, как сделать тоже самое только для afterChange?
    – g4343
    Commented 4 янв. 2018 в 14:04
  • @g4343 запоминайте нужное в before и используйте в after. зы: при круговом переключении с последнего на первый код будет работать не корректно
    – teran
    Commented 4 янв. 2018 в 18:03

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.