不同宽度的一页上有 2 个不同的 Owl Carousel 滑块

Question

我最近遇到了猫头鹰旋转木马。我尝试在一个页面中使用 2 个不同宽度的滑块。

我正在使用引导网格系统。我在使用 Owl Carousel 时遇到了两个主要问题：

1. 使用Container-fluid 代替猫头鹰轮播的container 时，另一幅图像的一小部分显示在左侧和右侧。我该如何处理？

猫头鹰轮播 jQuery：

$('#main-slider').owlCarousel({
            loop:true,
            nav: true,
            autoplay:true,
            lazyLoad:true,
            singleItem: true,
            slideSpeed : 300,
            paginationSpeed : 400,
            items : 1, 
            itemsDesktop : false,
            itemsDesktopSmall : false,
            itemsTablet: false,
            itemsMobile : false,
            dots: false,
            responsiveClass:true,
            navText: ["←","→"]
        });

猫头鹰轮播的 HTML：

<div class="container-fluid">
<div id="main-slider" class="owl-carousel owl-theme">
<img  class=" " src="./images/slider-banner01.jpg" alt="" />
<img  class=" " src="./images/slider-banner02.jpg" alt="" />
<img  class=" " src="./images/slider-banner03.jpg" alt="" />
<img  class=" " src="./images/slider-banner04.jpg" alt="" />
<img  class=" " src="./images/slider-banner05.jpg" alt="" />
<img  class=" " src="./images/slider-banner06.jpg" alt="" />
</div>
</div>

1. 我想要一个横幅滑块和另一个滑块来显示我想放置在col-md-4 引导类中的品牌徽标。 但是，即使我将它放在col-md-4 下，滑块仍会占据整个设备宽度。

猫头鹰轮播 jQuery：

$('#main-brand-slider').owlCarousel({
            loop:true,
            margin:10,
            nav:false,
            autoplay:true,
            lazyLoad:true,
            items : 1, 
            itemsDesktop : false,
            itemsDesktopSmall : false,
            itemsTablet: false,
            itemsMobile : false,
            dots: false,
        });

品牌滑块的 HTML：

<div class="col-md-4">
<div class="section-text text-center">
<h3>Brands</h3>
<div class="container">
<div id="main-brand-slider" class="owl-carousel owl-theme">
<img class="img-responsive" src="./images/brandsSlider1.jpg" alt="" />
<img class="img-responsive" src="./images/brandsSlider2.jpg" alt="" />
<img class="img-responsive" src="./images/brandsSlider3.jpg" alt="" />
<img class="img-responsive" src="./images/brandsSlider4.jpg" alt="" />
<img class="img-responsive" src="./images/brandsSlider5.jpg" alt="" />
</div>
</div>
</div>
</div>

Answer 1

您需要在container-fluid 中添加padding-left:0px; 和padding-right:0px;，因为container-fluid 具有默认的padding-left:15px; 和padding-right:15px;

品牌滑块问题
您需要删除 col-md-4 内的 container 类，因为 container 具有默认 width:1170px;

Answer 2

这里有一个解决方案https://jsfiddle.net/dpnta0z9/

$('#main-slider').owlCarousel({ 
	loop:true, 
  nav: true, 
  autoplay:true, 
  lazyLoad:true, 
  singleItem: true, 
  slideSpeed : 300, 
  paginationSpeed : 400, 
  items : 2, 
  itemsDesktop : false, 
  itemsDesktopSmall : false, 
  itemsTablet: false, 
  itemsMobile : false, 
  dots: false, 
  responsiveClass:true, 
  navText: ["←","→"] 
});

$('#main-brand-slider').owlCarousel({ loop:true, margin:10, nav:false, autoplay:true, lazyLoad:true, items : 1, itemsDesktop : false, itemsDesktopSmall : false, itemsTablet: false, itemsMobile : false, dots: false, });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
<div class="container-fluid">
  <div class="row">
    
    <div class="col-md-12">
      <div id="main-slider" class="owl-carousel owl-theme">
        <img  class="item" src="http://via.placeholder.com/350x150" alt="" />
        <img  class="item" src="http://via.placeholder.com/350x150" alt="" />
        <img  class="item" src="http://via.placeholder.com/350x150" alt="" />
        <img  class="item" src="http://via.placeholder.com/350x150" alt="" />
        <img  class="item" src="http://via.placeholder.com/350x150" alt="" />
        <img  class="item" src="http://via.placeholder.com/350x150" alt="" />
      </div>
      
    </div>
    
    <div class="col-md-4">
      <div class="section-text text-center">
        <h3>Brands</h3>
        <div id="main-brand-slider" class="owl-carousel owl-theme">
          <img class="img-responsive" src="http://via.placeholder.com/350x150" alt="" />
          <img class="img-responsive" src="http://via.placeholder.com/350x150g" alt="" />
          <img class="img-responsive" src="http://via.placeholder.com/350x150" alt="" />
          <img class="img-responsive" src="http://via.placeholder.com/350x150" alt="" />
          <img class="img-responsive" src="http://via.placeholder.com/350x150" alt="" />
        </div>
      </div>
    </div>
    
  </div>

</div>

希望这会对你有所帮助。