document.on("click","#myId", function(){} 无法更新 owl 轮播

Question

我正在尝试使用 Carousel 示例并重写函数以支持点击加载，如下所示...

$(document).on("click","#myId",function(){
    $("#owl-demo").owlCarousel({
        autoPlay : 3000, //Set AutoPlay to 3 seconds
        items : 2,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3]
    });
});

... 这样我就可以在我的网页中使用它来切换 div，如下所示：

<div class="tabs clearfix">
  <ul>
    <li class="active"><a href="#01" id="myId" data-toggle="tab">2015</a></li>
    <li><a href="#02" id="myId" data-toggle="tab">2014</a></li>
  </ul>
</div>
<div class="tab-content">
  <div class="tab-pane active" id="01">
    <div id="owl-demo">
      <div class="item"><img src="img/sample_1.jpg" alt="The Last of us"></div>
      <div class="item"><img src="img/sample_2.jpg" alt="GTA V"></div>
    </div>
  </div>
</div>
<div class="tab-content">
  <div class="tab-pane active" id="02">
    <div id="owl-demo">
      <div class="item"><img src="img/sample_1.jpg" alt="The Last of us"></div>
      <div class="item"><img src="img/sample_2.jpg" alt="GTA V"></div>
    </div>
  </div>
</div>

我正在尝试通过单击左侧的选项卡 window

在右侧使用不同的图像轮播实现如下所示的效果 window

感谢任何帮助。谢谢！

Answer 1

我认为自定义 these tabs 比尝试从头开始编写内容更容易。只需将每个旋转木马放入其各自的选项卡容器中即可。然后在页面加载时同时初始化所有轮播。我认为每次切换到新选项卡时都不需要重新初始化整个插件。您的标记将如下所示：

<div id="tabs-container">
    <ul class="tabs-menu">
        <li class="current"><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
        <li><a href="#tab-3">Tab 3</a></li>
        <li><a href="#tab-4">Tab 4</a></li>
    </ul>
    <div class="tab">
        <div id="tab-1" class="tab-content">
             <div id="owl-slider-1">
              <div class="item"><img src="img/sample_1.jpg" alt="The Last of us"></div>
              <div class="item"><img src="img/sample_2.jpg" alt="GTA V"></div>
            </div>
        </div>
        <div id="tab-2" class="tab-content">
             <div id="owl-slider-2">
              <div class="item"><img src="img/sample_1.jpg" alt="The Last of us"></div>
              <div class="item"><img src="img/sample_2.jpg" alt="GTA V"></div>
            </div>
        </div>
        <div id="tab-3" class="tab-content">
             <div id="owl-slider-3">
              <div class="item"><img src="img/sample_1.jpg" alt="The Last of us"></div>
              <div class="item"><img src="img/sample_2.jpg" alt="GTA V"></div>
            </div>
        </div>
    </div>
</div>

你的 JS 看起来像这样：

(function () {

    $("#owl-slider-1").owlCarousel({
        autoPlay : 3000, //Set AutoPlay to 3 seconds
        items : 2,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3]
    });

    $("#owl-slider-2").owlCarousel({
        autoPlay : 3000, //Set AutoPlay to 3 seconds
        items : 2,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3]
    });

    $("#owl-slider-3").owlCarousel({
        autoPlay : 3000, //Set AutoPlay to 3 seconds
        items : 2,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3]
    });

    $(".tabs-menu a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
    });

})();

显然这段代码完全未经测试，但它应该为您指明了正确的方向。

document.on("click","#myId", function(){} 无法更新 owl 轮播

document.on("click","#myId", function(){} not working for updating owl carousel

html

javascript

jquery

document

carousel