我最近遇到了猫头鹰旋转木马 . 我尝试在页面中使用2个不同宽度的滑块 .
我正在使用bootstrap网格系统 . 我使用Owl Carousel遇到了两个主要问题:
- 使用
Container-fluid
而不是Owl Carousel的container
时,左侧和右侧显示另一个图像的一小部分 . 我该如何处理?
猫头鹰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: ["←","→"]
});
猫头鹰轮播的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>
- 我想要一个 Banner 滑块和另一个滑块来显示我想要放置在
col-md-4
类引导程序中的Brand徽标 . 但是,即使我将它放在col-md-4
下,滑块仍然会占用整个设备的宽度 .
猫头鹰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>
2 回答
您需要使用
container-fluid
添加padding-left:0px;
和padding-right:0px;
,因为container-fluid
具有默认padding-left:15px;
和padding-right:15px;
Brand Slider Issue
您需要删除
col-md-4
中的container
类,因为container
具有默认width:1170px;
在这里你找到一个解决方案https://jsfiddle.net/dpnta0z9/
希望这会帮助你 .