Как правильно сделать такие слайдера с помощю slick-slider?

Question

[ololoshka1]

1 вопрос:
Вот пример https://codepen.io/vintalis/pen/JjGWWyV
Как сделать что б при нажатии например на go to slide 5 он был активный и подсвечивался например черным цветом.

2 вопрос:
Как выйти за рамки контейнера и что б слайдер нормально работал, мне нужен нормальный вариант, что б при адаптиве нормально все было, я думал с помощю position:absolute но мне кажется идея вообще плохая.

Скрин

Кто что знает, ответьте плз.

Answer 1

[Антон Литвиненко]

1. У текущего слайда есть классы типа slick-active, slick-current, используйте их для оформления

2. Слайдер кладем не в контейнер, а делаем слева отступ.
А для обрезки слайдера добавляем паддинг

.slider-wrapper {
	margin-left: calc(50% - 1140px/2);
	padding-left: 15px;
	padding-right: 15px;
}

.slider-wrapper {
	.slick-slide {
		margin: 0 15px;
	}
	.slick-list {
		margin: 0 -15px;
		padding: 0 10% 0 0;
	}
}

Comments

[ololoshka1]

Я знаю что у текущего слайда есть активный класс, но я не про него говорил,а про data-slide (который подцепляет нужный слайд), как его привязать к активному слайдеру после нажатия.
Что б например data-slide=5 , активный слайдер открывается под номер 5 и после чего go to slide 5 перекрашивать в другой цвет, я этого в коде не вижу, как подцепить или что

[Антон Литвиненко]

как вариант както так:

$('a[data-slide]').click(function(e) {
   e.preventDefault();
   $('a[data-slide]').attr('style', "");//removeClass
   $(this).css('color', 'black'); //addClass
   var slideno = $(this).data('slide');
   $('.slider-nav').slick('slickGoTo', slideno - 1);
 });

[ololoshka1]

Антон Литвиненко, а как правильно добавить класс, а не сss свойство
Я вот так делал $("a[data-slide]").addClass("intro"); но оно добавляет ко всем тегам a[data-slide] ,а нужно только на ту кнопку что нажал

[Антон Литвиненко]

ololoshka1, ну правильно. через this нужно. а перед этим очистить класс у всех

[ololoshka1]

Антон Литвиненко,

$('a[data-slide]').attr('class', "");//removeClass
   $(this).addClass("active"); //addClass

Спасибо больше)