I want the user to be able to delete the active/centered item in an OwlCarousel. The only piece of code I found w.r.t. deletion of items was this, so it seems to be a rather rare question:
$(".owl-carousel").trigger('remove.owl.carousel', [itm]).trigger('refresh.owl.carousel');
It works, but refers to the current item ID within the carousel, i.e. doesnt work anymore if I give numbers from my static HTML without reindexing. Here's a fiddle: https://jsfiddle.net/87x312wv/6
Is there any better way instead of counting the item-ID? I'm rather looking for something like - would be way more natural:
$(".owl-carousel").trigger('remove.owl.carousel', $('owl-carousel .active')).trigger('refresh.owl.carousel');
Any ideas?
I find a solution. For example, imagine that you want to remove each item by clicking on it:
html code:
<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>
js code:
$(".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;
}
});
});
I also found an answer, which might even be a little be better performance-wise: Reindex the items only once everytime: Basically setting the option onRefreshed: reindexItems, with the acompanied function, see below
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>"]
});
}