Question

我有一个关于Owl Carousel（v2.3.4）的问题，我看不到如何解决。在设备上，似乎随机调整了轮播的大小，并且图像消失了。有时，我可以看到轮播已正确加载，但是突然发生了变化，当我与已加载的另一只猫头鹰轮播互动时，它似乎也发生了变化。我尝试添加一个单独的包装器来控制宽度，使用一个/两个调用来加载两个轮播，延迟初始化等。

这是Green区块中出现上述问题的第二个Owl Carousel。您可以在此处查看开发页面：http://37.128.128.31/~thecropbrighton/

由于我只希望此滑块位于设备上，因此我目前正在使用以下Javascript：

$(function() {

if ($(window).width() < 768) {

    startCarousel();

  } else {

    $('.mob-carousel').addClass('off');

  }

  $(window).on('resize', function() {

    if ($(window).width() < 768) {

      startCarousel();

    } else {

      stopCarousel();

  }

});

function startCarousel() {
  $('.mob-carousel').owlCarousel({
    loop: true,
    margin: 0,
    nav: false,
    dots: false,
    items: 1,
    mouseDrag: true,
    touchDrag: true,
    navText: ["<img src='" + get_template_directory_uri + "/assets/images/right.svg'>", "<img src='" + get_template_directory_uri + "/assets/images/swipe-left.svg'>"],
  });
}

function stopCarousel() {
    var owl = $('.mob-carousel');
    owl.trigger('destroy.owl.carousel');
    owl.addClass('off');
}

设备上的猫头鹰轮播宽度问题

0 个答案: