Как изменить стрелки slick?

Question

[saplas]

Привет, каким образом изменить стрелки в слайдере slick, чтобы по достижению конечного слайдера, .slick-next превратилась в .slick-prev на том же месте?

Comments

[ma4t]

хм, ну, активный слайд получает класс active, вам надо задать проверку типа
if $(".slide:last").hasClass('slide-active') {
$('.slick-next').removeClass('slick-next').addClass('slick-prev');
}

типа такого

[saplas]

ma4t, Не работает так, игнорируется код абсолютно(

[saplas]

Может может кто-то помочь, нужно чтобы стрелка назад была видима от последнего слайда до первого, а стрелка вперед: от первого - до последнего.

$(document).ready(function(){


 $(function carouselSetup() {
   
   var $componentCarousel = $('.menu-content1'),
     $items = $componentCarousel.find('.carousel-item');
        

   
   var $slick = $componentCarousel.slick({
       infinite: false,
       speed: 500,
       draggable: true,
       slidesToShow: 3,
       slidesToScroll: 3,
       prevArrow: '<button type="button" class="slick-prev">prev</button>',
       nextArrow: '<button type="button" class="slick-next">next</button>'
     });


   var $prevButton = $slick.find('.slick-prev');
   var $nextButton = $slick.find('.slick-next');



   $slick.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
   	console.clear();
   	console.log('it works');

     //console.log(nextSlide);
   	/*

     if (nextSlide === 0) {
       $prevButton.hide();
     }
     if (nextSlide === slick.slideCount - 1) {
       $nextButton.hide();
     }
     if (currentSlide === 0) {
       $prevButton.show();
     }
     if (currentSlide === slick.slideCount - 1) {
       $nextButton.show();
     }
   });*/
$slick.on('afterChange', function(event, slick, currentSlide, nextSlide) {
	console.log(currentSlide);
	if (currentSlide < 9){
		$nextButton.hide();
		$prevButton.show();
	}
	if ((currentSlide > 0) && (currentSlide < 9)){
		$nextButton.show();
		$prevButton.hide();
	}
});

	
});
});
});

[ma4t]

я Вам примерный код написал, вы посмотрите какие там классы, я же не вижу верстку. И допишитe

Answer 1

[Виталий Першин]

Подписываемся на события слайдера и выполняем необходимые действия в нужный момент:

$('.slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
        if(slick.slideCount == nextSlide + 1) {
            // code...
        }
    });

Comments

[saplas]

Не могли бы вы, если не трудно объяснить данное условие
if(slick.slideCount == nextSlide + 1)
Спасибо!

[Andrey Suha]

saplas, slick.slideCount хранит количество слайдов, а nextSlide порядковый номер следующего слайда, так как нумерация в массивах начинается с нуля то в каруселе из 10 слайдов последний будет с номером 9, по этому к его номеру нужно добавлять 1

[saplas]

andreysuha, Я понял. Но все же есть моменты непонятные или я уже запутался совсем.
Это условие проверит является ли слайд последним, верно?
Что мне тогда нужно сделать, чтобы была проверка с первого по последний и с последнего по первый.
Например не отображать стрелку назад с первого по последний и наоборот, отображать стрелку назад с последнего по первый.
Спасибо!

[Andrey Suha]

saplas,

Это условие проверит является ли слайд последним, верно?

да это так, я не понял что вы дальше спрашиваете

[saplas]

andreysuha, Ну смотрите, мне нужно чтобы .slick-next отображался с первого слайда по 10(последний в моем случае), а с последнего по первый отображался только .slick-prev

[Andrey Suha]

Типа в зависимости в какую сторону нажал пользователь?

[Виталий Першин]

saplas, то же не совсем понял о чем речь, но можно сделать еще одно условие, которое будет проверять является ли слайд первым:

if (nextSlide == 0) {
            // code...
        }

Ну и по условию например добавляете класс hide нужной стрелке и прячете её...

[saplas]

andreysuha,
типа,
пользователь клацает слайды с первого по 10, у него видна только стрелка вперед.
Когда он долистывает до последнего слайда, кнопка вперед превращается в кнопку назад и он листает назад.
Соответственно на экране только 1 стрелка(назад или вперед).

[Andrey Suha]

Собственно комментаторы выше привели вам два условия которые вам нужно проверять, я бы свёл их в один код, но к сожалению сейчас с телефона. Т.е. Вам проверять если слайд первый, то вещание класс hide на slick-prev и снимает hide со slick-next. И на оборот. И не относящееся к теме вопроса, мне кажется то что вы хотите это плохо с точки зрения ui/ux, но это мое имхо))

[saplas]

andreysuha, Да к сожалению не мне это решать))
такой вопрос, эти два условия кидать в .on('beforeChange') или afterChange?
Вроде как очевидно что before, но на всякий случай уже лучше спрошу)))

[Andrey Suha]

saplas,

Да к сожалению не мне это решать))

Понимаю))

on('beforeChange') или afterChange

Думаю нету разницы, только если будет использовать after, то скорее всего в условии изменится nextSlide на current Slide

[saplas]

andreysuha, Я понял, спасибо большое, буду пробовать) ночь длинная впереди) надеюсь что-то, да выйдет)

[Виталий Першин]

saplas, лучше beforeChange потому что к моменту когда слайд сменится ваши стрелки уже изменятся, а если after, то сначала отработает анимация, а уже потом будет заметное изменение, что не всегда красиво..

[saplas]

Спасибо большое, все получилось)
Все оказалось очень просто

if (nextSlide == 0) {
           $nextButton.show();
           $prevButton.hide();
        }
if(slick.slideCount == nextSlide + 1) {
	$nextButton.hide();
	$prevButton.show();
}

[saplas]

Хм, столкнулся теперь с такой проблемой:
в моб игнорируется это стрелки назад нету и не появляется. А стрелка вперед и не исчезает.

[Виталий Першин]

saplas, Не видя примера, что-то конкретное не скажешь