Deleting Active (centered) Item in OwlCarousel

user_701049 0
Viewed 173

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?

owl-carousel html jquery javascript
2 Answers

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;
      }
    });
  });
user_139856620

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>"]
  });
}
user_7010490
Related