0

我已经建立了一个自己的轮播，并从我拥有的 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从我想要禁用的项目中简单地删除该类名，但这似乎破坏了布局。

4

1 回答 1

0

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

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>
于 2016-04-17T10:00:44.483 回答