Почему не работает event при смене слайда в slick.js?

Question

[Сергей Бурдужа]

Добрый день.
Задача состоит в том, чтобы при клике на кнопку, как только сменится слайд, нужно анимировать контент слайда.

Покажу только один слайд

<ul class="slides" id="js-flexslider-slick">
            <li style="background-image: url(<?php echo get_template_directory_uri(); ?>/assets/images/slider/1.jpg);">
                <div class="overlay-gradient"></div>
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 text-center js-fullheight slider-text">
                            <div class="slider-text-inner">
                                <h1>Expert Legal Solutions</h1>
                                <h2>Free html5 templates Made by <a href="http://freehtml5.co/" target="_blank">freehtml5.co</a></h2>
                                <p><a class="btn btn-primary btn-lg" href="#">Make An Appointment</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </li>

И js код

var jsSlickSLider = function(){
		$('#js-flexslider-slick').slick({
			nextArrow: '.flexslider__next',
			prevArrow: '.flexslider__prev',
			fade: true,
			speed: 2000
		});
	}

	$('#js-flexslider-slick .slick-slide').on('swipe', function(event, slick, currentSlide, nextSlide){
      console.log(slick);
    });

Почему, когда пролистывается слайд, в консоли ничего не выводится.

В документации же написано

// On swipe event
$('.your-element').on('swipe', function(event, slick, direction){
  console.log(direction);
  // left
});

// On edge hit
$('.your-element').on('edge', function(event, slick, direction){
  console.log('edge was hit')
});

// On before slide change
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log(nextSlide);
});

Что я опять не то делаю?

Заранее благодарен.

Answer 1

[Антон Усачев]

event, slick – вспомогательные атрибуты. Предлагаю вешать на beforeChange.

$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  слайд.eq(nextSlide).меняем_контент_в_слайде
});

Comments

[Сергей Бурдужа]

я так и сделал и работает.
Только, почему не работает на swipe?
То есть, когда нажал на кнопку пролистывания слайдов?

[Антон Усачев]

Сергей Бурдужа, ивент swipe не возвращает nextSlide, как видно из документации, поэтому и не получается.

// как видно, возвращает только direction
.on('swipe', function(event, slick, direction)

[Сергей Бурдужа]

Антон Усачев, спасибо.