Как установить Css-стиль активного слайда на одной из нескольких slick-каруселей?

Question

[Snatch08]

Доброго дня, Сэнсэи! Я использую несколько slick.js https://github.com/kenwheeler/slick на своем сайте и применяю следующие css-стили для активного и неактивного слайда:

.slick-slide{
	display: block;
	opacity: .1;
	transition-delay: 0s;
	transition-duration: 0.2s;
	transition-property: opacity;
	transition-timing-function: ease-out;
	background-color: green; 
}

/*.slick-slide.slick-active{*/
.slick-slide.slick-current{
	display: block;	
	opacity: 1;
	transition-delay: 0.3s;
	transition-duration: 0.2s;
	transition-property: opacity;
	transition-timing-function: ease-in;
	background-color: yellow; 	
}

Свойство применяется ко всем slick-каруселям, как применить к определенным?

Answer 1

[Денис]

Добавит класс к нужному слику.
. нужный-слик slick-current{
...
}
Так?

Comments

[Snatch08]

Так к сожалению не работает, пробовал.

[Snatch08]

Вот у меня такая конструкция:

<div class="SlidePanel">
   <div class="Slide"></div>
   <div class="Slide"></div>
   <div class="Slide"></div>
</div>

Вот я не могу понять, .slick-slide это то же самое, что и .Slide у меня?

[Денис]

Snatch08, Ну вот у вас SlidePanel название карусели, от неё и наследуйтесь.
Внутри вашей карусели текущий слайд имеет класс slick-current.
.SlidePanel slick-current
slick-slide это обертка вашего слайда и если необходимо стилизовать именно ваш класс, то ещё глубже вложенность просто.
В dev tools это все можно посмотреть

[Snatch08]

Так?

.SlidePanel{
  display: block;
  opacity: .1;
  transition-delay: 0s;
  transition-duration: 0.2s;
  transition-property: opacity;
  transition-timing-function: ease-out;
  background-color: green; 
}

.SlidePanel.slick-current{
  display: block;	
  opacity: 1;
  transition-delay: 0.3s;
  transition-duration: 0.2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
  background-color: yellow; 	
}

[Денис]

Snatch08,

.SlidePanel .slick-slide .Slide{
  display: block;
  opacity: .1;
  transition-delay: 0s;
  transition-duration: 0.2s;
  transition-property: opacity;
  transition-timing-function: ease-out;
  background-color: green; 
}

.SlidePanel .slick-current .Slide {
  display: block;	
  opacity: 1;
  transition-delay: 0.3s;
  transition-duration: 0.2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
  background-color: yellow; 	
}

В вашем случае класс.класс2, значит что элемент имеет оба класса сразу.
Почитайте подробнее о наследовании в css

[Денис]

поправил точки, с телефона пальцы не попадают. В конце Slide можете убрать, смотря что вам стилизовать нужно. В начале вопроса другая иерархия была

[Snatch08]

Изначально я такой же логике следовал, но почему-то не получалось, сейчас попробовал ваш пример, но не сработало. Почему-то даже если поменять .slick-slide.slick-current на .slick-slide .slick-current не работает, то есть один пробел и не работает..

[Snatch08]

Крч я тупанул, перепутал слайдеры и применял не к тем классам стили) Спасибо Денис за помощь!)