在单个页面上使用多个 (owl) 轮播

Question

我一直在 google 上寻找在单个页面上使用多个轮播的方法，但没有找到任何适合我的解决方案。有谁能帮忙吗

代码如下：

HTML

<!-- Carousel 1 -->
<div id="demo">
    <div class="container">
        <div class="row">
            <div class="span12">
                <div id="owl-demo" class="owl-carousel">
                    <div class="item">
                        <h1>1</h1>
                    </div>
                    <div class="item">
                        <h1>2</h1>
                    </div>
                    <div class="item">
                        <h1>3</h1>
                    </div>
                    <div class="item">
                        <h1>4</h1>
                    </div>
                    <div class="item">
                        <h1>5</h1>
                    </div>
                    <div class="item">
                        <h1>6</h1>
                    </div>
                    <div class="item">
                        <h1>7</h1>
                    </div>
                    <div class="item">
                        <h1>8</h1>
                    </div>
                    <div class="item">
                        <h1>9</h1>
                    </div>
                    <div class="item">
                        <h1>10</h1>
                    </div>
                </div>
                <div class="customNavigation"> <a class="btn prev">Previous</a> <a class="btn next">Next</a> </div>
            </div>
        </div>
    </div>
</div>
<!-- Carousel 2 -->
<div id="demo1">
    <div class="container">
        <div class="row">
            <div class="span12">
                <div id="owl-demo-1" class="owl-carousel">
                    <div class="item">
                        <h1>1</h1>
                    </div>
                    <div class="item">
                        <h1>2</h1>
                    </div>
                    <div class="item">
                        <h1>3</h1>
                    </div>
                    <div class="item">
                        <h1>4</h1>
                    </div>
                    <div class="item">
                        <h1>5</h1>
                    </div>
                    <div class="item">
                        <h1>6</h1>
                    </div>
                    <div class="item">
                        <h1>7</h1>
                    </div>
                    <div class="item">
                        <h1>8</h1>
                    </div>
                    <div class="item">
                        <h1>9</h1>
                    </div>
                    <div class="item">
                        <h1>10</h1>
                    </div>
                </div>
                <div class="customNavigation"> <a class="btn prev">Previous</a> <a class="btn next">Next</a> </div>
            </div>
        </div>
    </div>
</div>

我将轮播命名为 owl-demo 和 owl-demo-1

Javascript

$(document).ready(function() {

  var owl = $("#owl-demo");
  owl.owlCarousel({

  items : 6, //10 items above 1000px browser width
  itemsDesktop : [1000,6], //5 items between 1000px and 901px
  itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
  itemsTablet: [600,2], //2 items between 600 and 0;
  itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option

  });

  // Custom Navigation Events
  $(".next").click(function(){owl.trigger('owl.next');})
  $(".prev").click(function(){owl.trigger('owl.prev');})


});

在 JsFiddle

Answer 1

更新后的代码应如下所示：https://jsfiddle.net/wtg76spd/1/

JavaScript:

$(document).ready(function() {

  $("#owl-demo, #owl-demo-1").each(function() {
    $(this).owlCarousel({
      items : 6, //10 items above 1000px browser width
      itemsDesktop : [1000,6], //5 items between 1000px and 901px
      itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
      itemsTablet: [600,2], //2 items between 600 and 0;
      itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
    });
  });
  // Custom Navigation Events
  $(".next").click(function(){$(this).closest('.span12').find('.owl-carousel').trigger('owl.next');})
  $(".prev").click(function(){$(this).closest('.span12').find('.owl-carousel').trigger('owl.prev');})
});

CSS（只是更改了第一行）：

//before
 #owl-demo .item{
//after
 #owl-demo .item, #owl-demo-1 .item{
//class "owl-demo" would do better in this case

1) 使用 .each() 而不是复制代码。

2) 最好使用 class 而不是 #owl-demo 和 #owl-demo-1 - 假设你有 100 个而不是 2 个滑块.你还会给他们身份证吗？但是我没有在示例中更改它。

3) 我对 next/prev 按钮使用了 closest() 和 find() 方法。这样我就有了 2 个回调函数而不是 4 个。

在单个页面上使用多个 (owl) 轮播

Using multiple (owl) carousel on a single page

javascript

jquery

carousel

owl-carousel