Snatch08
@Snatch08

Слайдер вложенный в слайдер. Как сделать чтобы css не распространялся на вложенный?

Доброго дня, Самураи! Использую slick.js https://github.com/kenwheeler/slick Один слайдер вложен в другой. Конструкция такая:
<div class="SliderPanel">
   <div class="Slide">
         <div class="Onlink">
            <div class="Rand"></div>
            <div class="Rand"></div>
         </div>
   </div>
   <div class="Slide">
   </div>
   <div class="Slide">
   </div>
<div>


К внешнему слайдеру применен такой стиль:
.SliderPanel .slick-slide {
	display: block;
	opacity: .1;
	transition-delay: 0s;
	transition-duration: 0.2s;
	transition-property: opacity;
	transition-timing-function: ease-out;
}

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


Проблема в том, что при свайпе действие css распространяется и на вложенный слайдер тоже. Подскажите пожалуйста, как исправить?
  • Вопрос задан
  • 328 просмотров
Решения вопроса 1
wqertAnna
@wqertAnna
Вот так должно работать

.SliderPanel > .slick-list >.slick-track > .slick-slide {
  display: block;
  opacity: .1;
  transition-delay: 0s;
  transition-duration: 0.2s;
  transition-property: opacity;
  transition-timing-function: ease-out;
}

.SliderPanel > .slick-list > .slick-track > .slick-current {  
  display: block;
  opacity: 1;
  transition-delay: 0.3s;
  transition-duration: 0.2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@html-css
используйте непосредственное подчинение

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

.SliderPanel > .slick-current {  
  display: block;
  opacity: 1;
  transition-delay: 0.3s;
  transition-duration: 0.2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}
Ответ написан
Snatch08
@Snatch08 Автор вопроса
Создал песочницу https://jsfiddle.net/Snatch08/9aohe6fz/70/
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы