Собственно нужно последнему классу active давать дополнительные класс opacity, но что-то идёт не так
var owl = $('.owl-carousel').owlCarousel({
loop:false,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
},
})
var sbAllItms = $('.owl-item.active').length;
$('.owl-carousel .owl-item.active').eq(sbAllItms - 1).addClass('opacity');
owl.on('changed.owl.carousel',function(event) {
sbAllItms = $('.owl-item.active').length;
$('.owl-carousel .owl-item.active').removeClass('opacity');
$('.owl-carousel .owl-item.active').eq(sbAllItms - 1).addClass('opacity');
})
h4 {color: green; background:red;}
.opacity {
opacity: .6;
color:#000;
}
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/assets/owl.carousel.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/owl.carousel.min.js"></script>
$('.owl-carousel .owl-item.active:last').addClass('opacity');
– Pyramidhead 23 мар '18 в 19:06нужно последнему классу active давать дополнительные класс opacity
- Приведённый мной фрагмент делает именно это. Быть может поясните, что именно вы хотите? – Pyramidhead 23 мар '18 в 19:13active
в owl-carousel всегда один. Я показал, какпоследнему классу active давать дополнительные класс opacity
. Получается, что вам нужно совсем не это. Тогда что? – Pyramidhead 23 мар '18 в 19:17