Slick slider. Не могу сделать такой слайдер с помощью слик?

Question

[Максим Иванов]

Как сделать активным слайд по центру и задать ему определённые стили???
И можно ли сделать так, чтобы было видно какой номер слайда сейчас? (на картинке есть)

Для активного слада (центрального) нужно прописывать данные стили:

.slider-img-active {
	width: 401px;
	height: 237px;
}

.mask-img-active {
	display: none;
}

Сам код:

<div class="slider">
	<div class="slider-item">
		<div class="button-play">
			<img src="img/arrow.svg" alt="" class="arrow">
		</div>
		<div class="mask-img"></div>
		<img src="img/preview.png" alt="" class="slider-img">
	</div>

	<div class="slider-item">
		<div class="button-play">
			<img src="img/arrow.svg" alt="" class="arrow">
		</div>
		<div class="mask-img"></div>
		<img src="img/preview.png" alt="" class="slider-img">
	</div>

	<div class="slider-item">
		<div class="button-play">
			<img src="img/arrow.svg" alt="" class="arrow">
		</div>
		<div class="mask-img"></div>
		<img src="img/preview.png" alt="" class="slider-img">
	</div>
</div>

.slider {
	display: flex;
	justify-content: center;
	margin-top: 143px;
}

.slider-item {
	position: relative;
}

.slider-img {
	width: 307px;
	height: 181px;
}

.mask-img {
	position: absolute;
    top: 15px;
    left: 16px;

	background: linear-gradient(0deg, rgba(80, 105, 70, 0.65), rgba(80, 105, 70, 0.65));
	box-shadow: 0px -4px 22px rgba(0, 0, 0, 0.2);
    width: 275px;
    height: 152px;
}

.button-play {
	display: none;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	width: 118px;
	height: 118px;
	background: rgba(0, 0, 0, 0.57);
	border-radius: 50%;
	z-index: 1;
	cursor: pointer;
}

.arrow {
	position: absolute;
	top: 50%;
	left: 53%;
	transform: translate(-50%, -50%);
}

$('.slider').slick({
  centerMode: true,
  slidesToShow: 3
});

Comments

[Froggyweb]

слайдер проставляет свои классы
в данном случае все 3 будут active/ текущий - current го это не точно :)
номер слайда можно взять из методов навскидку искать currentslide и после смены слайдов менять значение :)
можно взять swiper там много есть чего по умолчанию, но это не панацея.
слик очень хороший. к свиперу отношение настороженное.

вот ответ по цифрам https://stackoverflow.com/questions/25847297/slick...

[Максим Иванов]

А можно ли совместить слик и свипер?

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

и снова пишу то же самое, что и 5 мин назад. не нужно задавать стили обертке, которая является слайдером. плагин дает ей свои стили, которые могут конфликтовать с вашими. равно как и дивы, которые идут внутри обертки слайдера оставьте пустыми. слайдер ими тоже манипулирует

[Максим Иванов]

Антон Литвиненко, не знаете как с помощью слика или свайпера сделать центральный блок активным и добавлять ему классы, а остальным убирать и чтобы все блоки были расположены как на картинке?

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

Максим Иванов, знаю. Center Mode true

[Максим Иванов]

Антон Литвиненко, там создаётся получается класс для активного элемента и для этого класса уже можно свои стили писать?

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

Максим Иванов, чем задавать вопросы попробовал бы или хотябы инспектором посмотрел бы на сайте слика, там же все есть, и классы для центра и даже настройка для увеличения centerPadding: '40px',

[Максим Иванов]

Антон Литвиненко, хотя ток что попробовал и всё ещё не могу понять

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

Максим Иванов, что именно непонятно, сформулируйте вопрос
https://kenwheeler.github.io/slick/