Выделить элементы карусели

199
17 июля 2018, 07:00

На сайте установлена owl-carousel 2. Карусель на всю ширину экрана с бесконечной прокруткой. Нужно сделать, чтобы первые и последние два элемента засветлялись как на картинке. Когда эти элементы попадают в сам контейнер(1170px), то засветелние убирается. Подскажите, как такое реализовать

Answer 1

Если известно сколько елементов будет отображено, то с помощью nth-child добавляете after или before на активных первых и последних слайдах.

$(" .js-slider ").owlCarousel({ 
  items: 6 
});
.x-slider { 
  padding: 5rem 0; 
} 
 
.x-slider__container { 
  max-width: 1600px; 
  margin: 0 auto; 
} 
 
img { 
  width: 100%; 
  max-width: 100%; 
  height: auto; 
  max-height: 100%; 
} 
 
.owl-item { 
  display: inline-block; 
  position: relative; 
} 
 
.owl-item.active:nth-child(-n+2)::after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  background: rgba(0, 0, 0, .5); 
} 
 
.owl-item.active:nth-child(n+5)::after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  background: rgba(0, 0, 0, .5); 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" /> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" /> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.green.min.css" rel="stylesheet" /> 
 
<div class="x-slider"> 
  <div class="x-slider__container"> 
    <div class="b-slider js-slider"> 
      <div class="b-slider__slide"> 
        <img src="https://placeholdit.co//i/555x150?text=1&bg=28d8b2"> 
      </div> 
      <div class="b-slider__slide"> 
        <img src="https://placeholdit.co//i/555x150?text=2&bg=8aaefc"> 
      </div> 
      <div class="b-slider__slide"> 
        <img src="https://placeholdit.co//i/555x150?text=3&bg=00bcd4"> 
      </div> 
      <div class="b-slider__slide"> 
        <img src="https://placeholdit.co//i/555x150?text=1&bg=28d8b2"> 
      </div> 
      <div class="b-slider__slide"> 
        <img src="https://placeholdit.co//i/555x150?text=2&bg=8aaefc"> 
      </div> 
      <div class="b-slider__slide"> 
        <img src="https://placeholdit.co//i/555x150?text=3&bg=00bcd4"> 
      </div> 
    </div> 
  </div> 
</div> 
</div>

READ ALSO
При html {width: 100%; height: 100%} блок html не разворачивается на всю высоту страницы

При html {width: 100%; height: 100%} блок html не разворачивается на всю высоту страницы

При html {width: 100%; height: 100%} блок html не разворачивается на всю высоту страницыИ от width: 760px появляется боковой отступ и горизонтальный scroll

192