Estoy tratando de agregar clase en clase en el primer y último elemento secundario con SOLAMENTE clase activa. Encontré el código aquí :
jQuery(document).ready(function($) { var carousel = $(".latest-work-carousel"); carousel.owlCarousel({ loop : true, items : 3, margin:0, nav : true, dots : false, }); checkClasses(); carousel.on('translated.owl.carousel', function(event) { checkClasses(); }); function checkClasses(){ var total = $('.latest-work-carousel .owl-stage .owl-item.active').length; $('.latest-work-carousel .owl-stage .owl-item').removeClass('firstActiveItem lastActiveItem'); $('.latest-work-carousel .owl-stage .owl-item.active').each(function(index){ if (index === 0) { // this is the first one $(this).addClass('firstActiveItem'); } if (index === total - 1 && total>1) { // this is the last one $(this).addClass('lastActiveItem'); } }); } });Funciona, sin embargo, mi problema es que la clase firstActiveItem solo se aplica dentro del primer carrusel y la clase lastActiveItem dentro del segundo carrusel.
¿Cómo hago para que se aplique en todos los carruseles, independientemente de cuántos carruseles tenga con la misma clase?
Aquí está mi violín de código completo: https://jsfiddle.net/tarantadakadin101/xf54zsau/39/
la condición debe ser:
if (index === 0 || index === total / 2) { // this is the first one $(this).addClass('firstActiveItem'); // add class in first item } if ((index === total - 1 && total) > 1 || index === total / 2 - 1) { // this is the last one $(this).addClass('lastActiveItem'); // add class in last item }aquí está el enlace
Puede iterar sobre los elementos .owl-carousel y encontrar el elemento de destino de los elementos .owl-carousel actual en cada iteración. Con este enfoque, no importa cuántos carruseles existan en la página. como esto:
$('.owl-carousel').each(function(){ $(this).find('.owl-stage .owl-item.active:first').addClass('firstActiveItem'); $(this).find('.owl-stage .owl-item.active:last').addClass('lastActiveItem'); })