Question

我已经在网页https://jeffbrownyachts.com/site/test5（“新闻”部分）上添加了“猫头鹰轮播”滑块。请单击导航中的新闻。目前，该消息在猫头鹰轮播滑块中显示为2行3列。问题是猫头鹰轮播在幻灯片的右上角显示了意外的空间。 https://prnt.sc/patw11。谁能告诉我这个问题？

// owl carousel code
$('.owl-carousel').owlCarousel({
      dots: false,
      stagePadding: 0,
      loop:true,
      margin:0,
      nav:true,
      center: true,
      responsive:{
          0:{
            items:1,
            nav:true
          },
          600:{
            items:2,
            nav:false
          },
          1000:{
            items:3,
            nav:true,
          }
      }
  });

Answer 1

.owl-stage元素中存在宽度问题。这个问题是通过猫头鹰轮播的onInitialized事件重新计算.owl级元素的宽度来解决的。我使用此Github issue

解决了该问题

$(document).ready(function(){   
      var fixOwl = function(){
        var $stage = $('.owl-stage'),
            stageW = $stage.width(),
            $el = $('.owl-item'),
            elW = 0;
        $el.each(function() {
            elW += $(this).width()+ +($(this).css("margin-right").slice(0, -2))
        });
        if ( elW > stageW ) {
            $stage.width( elW );
        };
      }
         $('.owl-carousel').owlCarousel({
              dots: false,
              stagePadding: 0,
              margin:0,
              onInitialized: fixOwl,
              onRefreshed: fixOwl,
              responsive:{
              0:{
                items:1,
                nav:true
              },
              600:{
                items:2,
                nav:false
              },
              1000:{
                items:3
              }
          }
      });
    });

猫头鹰轮播右侧空间问题

1 个答案: