单独的OWL轮播脚本

如何解决单独的OWL轮播脚本

无法使它正常工作。我需要将猫头鹰轮播脚本分成2个松散的项目。 （当我两次使用“ function owlInitialize（）”时，它将无法正常工作）

原因是我制作了PageBuilder，并且需要为每个添加的轮播项目添加整个脚本。

这是可以工作的脚本，但需要将其分开： 我也宁愿每个人都有一个不同的$（window）.width（）。

function owlInitialize() {
    if ($(window).width() < 860) {
  
        $('.over-slider').addClass("owl-carousel");
        $('.owl-carousel').owlCarousel({
            loop:false,margin: 30,dots: true,responsive:{
                0:{
                    items:1,},680:{
                    items:2,}
            }
        });
  
        $('.diensten-slider').addClass("owl-carousel");
        $('.owl-carousel').owlCarousel({
            loop:false,}
            }
        });
    }
    else{
  
        $('.over-slider.owl-carousel').owlCarousel('destroy');
        $('.over-slider').removeClass("owl-carousel");
  
        $('.diensten-slider.owl-carousel').owlCarousel('destroy');
        $('.diensten-slider').removeClass("owl-carousel");
  
    }
}
$(document).ready(function(e) {
    owlInitialize();
});
$(window).resize(function() {
    owlInitialize();
});

https://jsfiddle.net/fourroses666/wb7pmfqo/9/

解决方法

解决方案： https://jsfiddle.net/fourroses666/wb7pmfqo/11/

function owlInitialize() {
    if ($(window).width() < 860) {  
        $('.over-slider').addClass("owl-carousel");
        $('.owl-carousel').owlCarousel({
            loop:false,margin: 30,dots: true,responsive:{
                0:{
                    items:1,},680:{
                    items:2,}
            }
        });
    }
    else{  
        $('.over-slider.owl-carousel').owlCarousel('destroy');
        $('.over-slider').removeClass("owl-carousel");
    }
}
$(document).ready(function(e) {
    owlInitialize();
});
$(window).resize(function() {
    owlInitialize();
});

  
// over + diensten slider
function owlInitialize2() {
    if ($(window).width() < 860) {
        $('.diensten-slider').addClass("owl-carousel");
        $('.owl-carousel').owlCarousel({
            loop:false,}
            }
        });
    }
    else{
        $('.diensten-slider.owl-carousel').owlCarousel('destroy');
        $('.diensten-slider').removeClass("owl-carousel");
    }
}
$(document).ready(function(e) {
    owlInitialize2();
});
$(window).resize(function() {
    owlInitialize2();
});