在桌面/移动设备上自定义 owl-carousel 2答案

【问题标题】：Customise owl-carousel 2 on desktop/mobile在桌面/移动设备上自定义 owl-carousel 2
【发布时间】：2019-02-27 07:50:36
【问题描述】：

当前功能：轮播滑块将在移动设备和桌面设备中使用导航点、自动播放和拖动选项滑动。

新规范： 滑块将移动到我的第五张幻灯片并停止滑动（可拖动，自动播放）仅在移动设备中，桌面保持不变。

当前代码：

var sliderHome = $("#mgs-slider");
sliderHome.owlCarousel({
    items: 1,
    rtl: RTL,
    loop: true,
    nav: true,
    dots: true,
    autoplayTimeout: 3000,
    autoplay: true,
    autoplayHoverPause: <?php echo $this->getStopAuto() ? 'true' : 'false'; ?>,
    animateOut: '<?php echo $animated['out'] ?>',
    animateIn: '<?php echo $animated['in'] ?>',
    <?php if($tpControls != 2): ?>
    navText: ["<i class='fa fa-caret-left'></i>","<i class='fa fa-caret-right'></i>"],
    <?php else:?>
        navText: ["<i class='fa fa-long-arrow-left'></i>","<i class='fa fa-long-arrow-right'></i>"],
    <?php endif;?>
    responsive:{
        0:{
            nav: false,
            dots: true
        },
        992:{
            nav: false,
            dots: false
        }
    }
});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您只需将其添加到您的代码中

sliderHome.trigger('to.owl.carousel', [4, 500, true]);
// 4 is the slide index
// 500 is the speed in ms - maybe you want 0 here

也许把它放在一个调整大小的函数中，所以如果用户调整窗口大小它会做出反应

【讨论】：