JQuery скрипт не работает, пока не будет выполнено действие

Question

Пока я не нажму на div, карусель jquery не работает.

Я добавил две совы-карусели на мою html-страницу. Он работал нормально, когда у меня одна карусель, но когда добавлена ​​другая карусель с другим идентификатором, она не работает, пока я не выполню щелчок внутри элемента div с каруселью.
Я добавил две совы карусели на мою html-страницу. Это работало нормально, когда у меня одна карусель, но когда добавлена ​​другая карусель с другим идентификатором, она не работает, пока я не выполню щелчок внутри элемента 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

Попробуйте этот код: 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();
          });

        });

Answer 2

попробуйте использовать с разными идентификаторами, тогда оба будут работать нормально.