Disable certain Owl carousel slides

Question

I've set up an Own carousel and created a certain amount of slides from the JSON file I have:

$.getJSON("url", function(data) {

  var slides = data["data"];

  for (var i = 0; i < slides.length; i++) {
    var slide = "...";
    $(".owl-carousel").append(slide);
  }

}

Although I want to create all of the slides at the beggining, I need to disable (filter) some of them as I interact with the page. Is there any way to do it? I suppose I need to do something to <div class="owl-item">...</div> I want to disable, however I am not sure what exactly.

PS: I tried to simply remove that .owl-item classname from the items I want to disable, however this seem to break the layout.

score 0 · Answer 1 · answered Apr 17 '16 at 10:00

Do you wan't to remove them completely? Just put your slides in an array and manipulate them there and then re render the carousel?

var slides = [
  "http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg",
  "http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg",
  "http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg",
  "http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg",
];

$(document).ready(function() {
  renderSlides();

  $("button").click(function() {
    slides.pop();
    renderSlides();
  });
});

function renderSlides() {
  var $outer = $('.owl-carousel');
  $outer.html('');

  for (var i = 0; i < slides.length; i++) {
    var slide = slides[i]
    var img = document.createElement('img');
    img.src = slide;
    $outer.append(img);
  }
  $outer.owlCarousel();
}

<html>

<head>
  <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>

<body>
  <div class="owl-carousel owl-theme">
  </div>
  <button">Remove last slide</button>
</body>

</html>

Disable certain Owl carousel slides

1 Answers1