deaktivieren bestimmte Owl Karussell gleitet

Question

Ich habe ein eigenes Karussell und erstellt aus der JSON-Datei Ich habe eine bestimmte Menge an Folien aufgebaut:

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

    var slides = data["data"]; 

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

} 

Obwohl ich will schaffen alle Folien an der beggining, Ich muss einige davon deaktivieren (filtern), während ich mit der Seite interagiere. Gibt es einen Weg, es zu tun? Ich nehme an, ich muss etwas tun, um <div class="owl-item">...</div> Ich möchte deaktivieren, aber ich bin mir nicht sicher was genau.

PS: Ich habe versucht, die .owl-item Klassenname von den Elementen, die ich deaktivieren möchte, einfach zu entfernen, aber dies scheint das Layout zu brechen.

Answer 1

Möchten Sie sie vollständig entfernen? Legen Sie einfach Ihre Folien in ein Array und manipulieren Sie sie dort und dann das Karussell rendern?

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