Question

我已经设置了一个自己的轮播，并从我拥有的JSON文件中创建了一定数量的幻灯片：

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

  var slides = data["data"];

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

}

虽然我想在开始时创建所有幻灯片，但我需要在与页面交互时禁用（过滤）其中一些幻灯片。有什么办法吗？我想我需要做一些事情<div class="owl-item">...</div>我想禁用，但我不确定到底是什么。

PS：我试图从我想要禁用的项目中删除.owl-item类名，但这似乎打破了布局。

Answer 1

你想完全删除它们吗？只需将幻灯片放入数组并在那里操作它们然后重新渲染轮播？

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>

禁用某些猫头鹰轮播幻灯片

1 个答案: