Слайдер изменяет прозрачность первого и последнего элементов - PullRequest
Новая
       32

Слайдер изменяет прозрачность первого и последнего элементов

0 голосов
/ 25 мая 2020

Я бы хотел изменить непрозрачность первого и последнего элементов слайдера. Теперь для центрального режима установлено значение true, но я не смог найти селектор CSS, чтобы это произошло. Вот что мне действительно нужно:

enter image description here

Вот мой текущий код.

HTML

   <div id="home_latest">
      <div class="item">
         <img src="default.jpg">
      </div>
      <div class="item">
         <img src="default.jpg">
      </div>
      <div class="item">
         <img src="default.jpg">
      </div>
      <div class="item">
         <img src="default.jpg">
      </div>
      <div class="item">
         <img src="default.jpg">
      </div>
      <div class="item">
         <img src="default.jpg">
      </div>
      <div class="item">
         <img src="default.jpg">
      </div>
      <div class="item">
         <img src="default.jpg">
      </div>
   </div>
</div>

JS

jQuery('#home_latest').slick({
     slidesToShow: 4,
     centerMode: true,
     dots: false,
     centerPadding: '220px',
     prevArrow: "<a href='javascript:void(0)' class='slick_slider_nav slick_slider_nav_left'><img src='assets/img/slider-left-arrow.png'></a>",
     nextArrow: "<a href='javascript:void(0)' class='slick_slider_nav slick_slider_nav_right'><img src='assets/img/slider-right-arrow.png'></a>",
  });

JSFiddle

Спасибо

1 Ответ

0 голосов
/ 25 мая 2020

Вы можете сделать это так 

.slick-slide:not(.slick-active) {
   opacity: 0.5;
}

Slick slider добавляет класс slick-active к элементам, которые в данный момент отображаются / активны на экране

...