На сайте установлена owl-carousel 2. Карусель на всю ширину экрана с бесконечной прокруткой. Нужно сделать, чтобы первые и последние два элемента засветлялись как на картинке. Когда эти элементы попадают в сам контейнер(1170px), то засветелние убирается. Подскажите, как такое реализовать
Если известно сколько елементов будет отображено, то с помощью 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>
Виртуальный выделенный сервер (VDS) становится отличным выбором
close() - не помогает
При html {width: 100%; height: 100%} блок html не разворачивается на всю высоту страницыИ от width: 760px появляется боковой отступ и горизонтальный scroll