Quiero que el usuario pueda eliminar el elemento activo/centrado en un OwlCarousel. El único fragmento de código que encontré con la eliminación de elementos fue este, por lo que parece ser una pregunta bastante rara:
$(".owl-carousel").trigger('remove.owl.carousel', [itm]).trigger('refresh.owl.carousel');
Funciona, pero se refiere al ID del elemento actual dentro del carrusel, es decir, ya no funciona si doy números de mi HTML estático sin reindexar. Aquí hay un violín: https://jsfiddle.net/87x312wv/6
¿Hay alguna forma mejor en lugar de contar la identificación del artículo? Prefiero buscar algo como, sería mucho más natural:
$(".owl-carousel").trigger('remove.owl.carousel', $('owl-carousel .active')).trigger('refresh.owl.carousel');
¿Algunas ideas?
Encuentro una solución. Por ejemplo, imagine que desea eliminar cada elemento haciendo clic en él:
código HTML:
<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>codigo js:
$(".owl-item").on("click", function (event) { var items = $(".owl-item"); items.each((index, item) => { if (item.isEqualNode(event.currentTarget)) { $(".owl-carousel") .trigger("remove.owl.carousel", index) .trigger("refresh.owl.carousel"); return; } }); });También encontré una respuesta, que incluso podría ser un poco mejor en cuanto a rendimiento: reindexar los elementos solo una vez cada vez: básicamente configurando la opción onRefreshed: reindexItems, con la función acompañada, ver a continuación
https://jsfiddle.net/q23Lr90m/1/
$(document).ready(function() { startCarousel(); $('span').on('click', function() { var dat = $(this).parent().parent().parent().data(); console.log(dat); var itm = dat.item; $(".owl-carousel").trigger('remove.owl.carousel', [itm]).trigger('refresh.owl.carousel'); }) }); function reindexItems() { $(".owl-item:not(.cloned)").each(function(idx) { //console.log('called'); $(this).attr('data-item', idx); }); } function startCarousel(){ $("#owl_about_main_slider").owlCarousel({ navigation : true, // Show next and prev buttons slideSpeed : 500, margin:10, onRefreshed: reindexItems, paginationSpeed : 400, autoplay:true, items : 1, itemsDesktop : false, itemsDesktopSmall : false, itemsTablet: false, itemsMobile : false, loop:true, nav:true, navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"] }); }