Actually you need the last active class to give additional class opacity, but something goes wrong

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>

  • Everything is somewhat simpler than $('.owl-carousel .owl-item.active:last').addClass('opacity'); - Pyramidhead
  • @Pyramidhead, not really - jsfiddle.net/bjnz4y8e/68 - YourDeveloper
  • нужно последнему классу active давать дополнительные класс opacity - The fragment I нужно последнему классу active давать дополнительные класс opacity does just that. Perhaps explain what exactly you want? - Pyramidhead
  • @Pyramidhead, so you try to roll the carousel right and left, your class remains at the penultimate element - YourDeveloper
  • Because the element with the active class in owl-carousel is always one. I showed how the последнему классу active давать дополнительные класс opacity . It turns out that this is not what you need. What then? - Pyramidhead

1 answer 1

The last item in the set can be selected by index (-1), the wrong slider event is also selected.

 $('.owl-carousel').owlCarousel({ loop: false, margin: 10, nav: true, responsive: { 0: { items: 1 }, 600: { items: 3 }, 1000: { items: 5 } }, onInitialized:slideOpacity, onTranslated:slideOpacity }) function slideOpacity(){ $('.owl-carousel .owl-item.opacity').removeClass('opacity'); $('.owl-carousel .owl-item.active').eq(-1).addClass('opacity'); } 
 h4 { color: green; background: red; } .owl-item{ transition:all .3s ease; } .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>