Question

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

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

使用Container-fluid代替猫头鹰旋转木马container时，左侧和右侧会显示另一幅图像的一小部分。我该如何处理？

Owl Carousel 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: ["&#8592;","&#8594;"]
        });

猫头鹰旋转木马的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>

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

Owl Carousel 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

您需要使用padding-left:0px;添加padding-right:0px;和container-fluid，因为container-fluid有默认padding-left:15px;和padding-right:15px;

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

2个不同的猫头鹰旋转木马滑块在一页上具有不同的宽度

1 个答案: