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

Question

[Snatch08]

Доброго дня, Самураи! Использую 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 распространяется и на вложенный слайдер тоже. Подскажите пожалуйста, как исправить?

Comments

[wqertAnna]

А какой класс у вложенного слайдера?
.Onlink ?

[Snatch08]

wqertAnna верно

Answer 1

[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;
}

Comments

[Snatch08]

Не сработало, создал песочницу https://jsfiddle.net/Snatch08/9aohe6fz/70/

[wqertAnna]

Snatch08, а чего именно вы хотите добиться?
Используя мои селекторы эти стили не применяются к склайдеру, который вложенный
https://jsfiddle.net/m2eztbsq/

Только сейчас обратила внимание на те стили, что вы написали выше.
Вы хотите, чтобы у родительского блока было opacity: 0.1, а вложенный слайдер сохранял свою цветность?

Возможно, я вас неправильно поняла, поясните пожалуйста?

Вы же понимаете, что давая родителю opacity < 1, он весь становится прозрачным, включая детей.
Не может быть родитель прозрачным, а ребенок нет

[Snatch08]

wqertAnna, Все работает в скрипке. У меня на сайте не работает, нужно искать причину, но направление понял. Благодарю! Стили слайдера по умолчанию у меня не подключены, может ли это быть причиной?

[wqertAnna]

Snatch08, Извините, не поняла вопрос

Стили слайдера по умолчанию у меня не подключены, может ли это быть причиной?

[Snatch08]

wqertAnna, когда сам плагин скачиваешь, у него в комплекте есть стили, два css файла slick.min.css и slick-theme.min.css для стандартного шаблона. Их я не подключаю, т.к. у меня свое оформление слайдера. Не думаю что это как-то может влиять, но вдруг из-за этого у меня не работает.

[wqertAnna]

Snatch08, slick-theme.min.css, действительно, можно и не подключать, но без slick.min.css ничего не должно работать
Поэтому, да, slick.min.css нужно подключить, эти стили и скрипт для слайдера это необходимый минимум.

slick-theme.min.css нужен чтобы все было симпатично, но т.к. Вы делаете свои стили, то его можно и не подключать

slick.min.css для того, чтобы слайдер вообще работал

[Snatch08]

wqertAnna, вот https://jsfiddle.net/Snatch08/f7st0mbL/2/ на моем сайте такая же проблема, при свайпе, внутренний слайдер становится полупрозрачным, а я хочу чтобы большой слайдер при свайпе был полупрозрачным, но чтобы при этом, слайдер внутри него оставался непрозрачным, а был полупрозрачным только при клике .Up или .Down. Я не могу понять, почему эффект не работает независимо друг от друга

[wqertAnna]

Snatch08, это то, что нужно? https://jsfiddle.net/jt84dbro/1/

[wqertAnna]

Если я правильно понимаю, то у вас есть пробел в понимании свойства opacity.
Старайтесь понимать, как работает каждое свойство, css достаточно логичен и если что-то не понятно, значит надо копать глубже.

opacity - определяет уровень прозрачности элемента веб-страницы.

Если элемент, для которого применено свойство opacity, содержит внутри себя другие элементы, то они также изменят свою прозрачность.

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

[Snatch08]

[Snatch08]

wqertAnna, при свайпе большого слайдера, почему-то реагирует слайдер внутри и становится полупрозрачным, вот с этим у меня проблема. Возможно конечно, это не устранить из-за "opacity применяется к элементу в целом, включая его содержимое"

[wqertAnna]

1 скрин:


2 скрин:

[Snatch08]

решено https://jsfiddle.net/Snatch08/96Lncov4/17/

Answer 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;
}

Comments

[Snatch08]

не сработало, эффект применяется внутреннему слайдеру и не работает с внешним(

[Rustam Bainazarov]

Snatch08, организуйте песочницу с вашим кодом.

[Snatch08]

Рустам Байназаров, https://jsfiddle.net/Snatch08/9aohe6fz/70/

Answer 3

[Snatch08]

Создал песочницу https://jsfiddle.net/Snatch08/9aohe6fz/70/