猫头鹰轮播无法在响应模式下工作 [英] owl-carousel not working in responsive mode

问题描述

我在站点上安装了owl-在桌面模式下可以完美运行，但是在移动模式下，幻灯片似乎完全消失了.

I have an installation of owl on a site - works perfectly in desktop mode, but in mobile mode, the slides seems to disappear completely.

我的网站位于:ypt.co.il(大主滑块下方的4个块-在停止模式下首先显示).

My site is at: ypt.co.il (the 4 blocks below the large main slider - looks first in dekstop mode).

这是插件代码:

    $('.owl-carousel').owlCarousel({
        loop:true,
        margin:27,
        nav:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:3
            },
            992:{
                items:4
            }
        }
    });

任何输入表示赞赏！

推荐答案

由于以下情况，您的轮播未在移动设备中配置. 检查呼叫res()

Your carousel is not configured in mobile because of below condition. check your condition where you are calling res()

if(!$('.toggleMenu').is(':visible')){
  res();
}

如果条件将在移动设备上给出 false ，在台式机上给出true.这就是为什么您的轮播无法初始化的原因.

If condition will give false in mobile and true in desktop. That's why your carousel is not initialising.

您必须在移动设备和台式机上都初始化轮播，因此您可以在页面加载后直接调用res().

You have to initialise your carousel in both mobile and desktop, so you can directly call res() after pageload.

$(function () {
  res();
});

它可以工作，我已经通过修改您的js文件在您的网站上进行了测试.

It will work, I have tested on your website by modifying your js file.

这篇关于猫头鹰轮播无法在响应模式下工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！