Question

直到我点击div，jquery轮播无效。

我在我的html页面中添加了两个猫头鹰轮播。当我有单个旋转木马时工作正常但是当另一个旋转木马添加了不同的ID时它才会工作，直到我在带有旋转木马的div内执行点击。
我在我的html页面中添加了两个猫头鹰轮播。当我有单个旋转木马时工作正常但是当另一个旋转木马添加了不同的ID时它才能工作，直到我在带有旋转木马的div内执行点击。

  <script>
    $(document).ready(function() {
        var owl = $('.owl-carousel');
        owl.owlCarousel({
            loop: true,
            nav: true,
            margin: 10,
            responsive: {
            0: {
                items: 1
            },
            600: {
                items: 3
            },
            960: {
                items: 5
            },
            1200: {
                items: 6
            }
            }
        });
        owl.on('mousewheel', '.owl-stage', function(e) {
            if (e.deltaY > 0) {
            owl.trigger('next.owl');
            } else {
            owl.trigger('prev.owl');
            }
            e.preventDefault();
        });

        var owl = $('.owl-carousel');
        owl.owlCarousel({
            loop: true,
            nav: true,
            margin: 10,
            responsive: {
            0: {
                items: 1
            },
            600: {
                items: 3
            },
            960: {
                items: 5
            },
            1200: {
                items: 6
            }
            }
        });
        owl.on('mousewheel', '.owl-stage', function(e) {
            if (e.deltaY > 0) {
            owl.trigger('next.owl');
            } else {
            owl.trigger('prev.owl');
            }
            e.preventDefault();
        });

        $('.owl-carousel-res').owlCarousel({
            loop: true,
            margin: 10,
            responsiveClass: true,
            responsive: {
            0: {
                items: 1,
                nav: true
            },
            600: {
                items: 3,
                nav: false
            },
            1000: {
                items: 6,
                nav: true,
                loop: true,
                margin: 20
            }
            }
        })
    })

Answer 1

尝试使用不同的ID然后两者都可以正常工作。

Answer 2

试试这段代码： 1：将“owl-1”和“owl-2”类添加到您的div中，使用类“owl-carousel” 所以它变成<div class="owl-carousel owl-1">

    $(document).ready(function() {
          var owl = $('.owl-1');
          owl.owlCarousel({
            loop: true,
            nav: true,
            margin: 10,
            responsive: {
              0: {
                items: 1
              },
              600: {
                items: 3
              },
              960: {
                items: 5
              },
              1200: {
                items: 6
              }
            }
          });
          owl.on('mousewheel', '.owl-stage', function(e) {
            if (e.deltaY > 0) {
              owl.trigger('next.owl');
            } else {
              owl.trigger('prev.owl');
            }
            e.preventDefault();
          });


          var owl2 = $('.owl-2');
          owl2.owlCarousel({
            loop: true,
            nav: true,
            margin: 10,
            responsive: {
              0: {
                items: 1
              },
              600: {
                items: 3
              },
              960: {
                items: 5
              },
              1200: {
                items: 6
              }
            }
          });
          owl2.on('mousewheel', '.owl-stage', function(e) {
            if (e.deltaY > 0) {
              owl2.trigger('next.owl');
            } else {
              owl2.trigger('prev.owl');
            }
            e.preventDefault();
          });

        });

jquery脚本不工作，直到执行单击操作

2 个答案: