Javascript 猫头鹰转盘2宽度不正确,显示所有项目
我有以下OWL转盘2初始化代码:Javascript 猫头鹰转盘2宽度不正确,显示所有项目,javascript,css,owl-carousel,Javascript,Css,Owl Carousel,我有以下OWL转盘2初始化代码: $(document).ready(function(){ moment.locale('nl-NL'); $("#owl-slider").owlCarousel({ items: 1, responsive: false, nav : false, loop: false,
$(document).ready(function(){
moment.locale('nl-NL');
$("#owl-slider").owlCarousel({
items: 1,
responsive: false,
nav : false,
loop: false,
dots: true,
dotsEach: 1,
autoplaySpeed : 300,
dotsSpeed : 400,
autoPlay: true,
navRewind: true,
animateOut: 'fadeOut'
});
});
这将生成转盘的以下html:
<div class="item-list" id="newsblock">
<div id="owl-slider" class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer">
<div class="owl-stage" style="transform: translate3d(-934px, 0px, 0px); transition: 0s; width: 1401px;">
<div class="owl-item" style="width: 467px; margin-right: 0px;">
<div class="item">
<img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/INKTPOT.PNG?RenditionID=5" data-themekey="#">
<div class="header">
<h2 class="title">
<a title="Nieuwsbericht" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/Nieuwsbericht.aspx" rel="bookmark">Nieuwsbericht</a>
</h2>
<div class="time">17 November</div>
</div>
</div>
</div><div class="owl-item" style="width: 467px; margin-right: 0px;">
<div class="item">
<img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/8628PEPERNOTEN-550X485.JPG?RenditionID=5" data-themekey="#">
<div class="header">
<h2 class="title">
<a title="Nog meer nieuws" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/Nog-meer-nieuws.aspx" rel="bookmark">Nog meer nieuws</a>
</h2>
<div class="time">17 November</div>
</div>
</div>
</div>
<div class="owl-item active" style="width: 467px; margin-right: 0px;">
<div class="item">
<img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/INKTPOT.PNG?RenditionID=5" data-themekey="#">
<div class="header">
<h2 class="title">
<a title="Test" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/test.aspx" rel="bookmark">Test</a>
</h2>
<div class="time">17 November</div>
</div>
</div>
</div>
</div>
</div><div class="owl-controls">
<div class="owl-nav">
<div class="owl-prev" style="display: none;">prev</div>
<div class="owl-next" style="display: none;">next</div>
</div>
<div class="owl-dots" style="">
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot active"><span></span></div>
</div>
</div>
</div>
</div>
11月17日
11月17日
11月17日
上
下一个
问题是owl stage div的宽度设置为所有三个项目的宽度,而不是1。将显示所有项目,而不是1
请提供一些关于解决方案的指导
问候。在javascript中添加singleItem:true
这将使其一次仅显示一个图像。如果旋转木马中有多个项目,则owl阶段div的宽度将始终超过父旋转木马容器(div id=“owl slider”class=“owl carousel owl theme”)。通过在CSS中将overflow设置为hidden,可以很容易地解决这个问题
.owl-carousel {
overflow: hidden;
}
我通过将以下代码添加到css解决了我的问题:
.owl-item {
float: left;
}
.owl-carousel {
overflow: hidden;
}
我已经试过了,但它不起作用,在Owl Carousel 2中,singleItem甚至不再是一个选项。有一个“items”选项可以让您确定一次要显示多少张幻灯片。溢出:默认情况下应在OWLSCSS中设置hidden。他将项设置为1,并且可能没有使用OWLSS。我正在使用OWLSS和项1。我不认为溢出隐藏会起作用,因为旋转木马现在正在溢出,但是点也在可见区域之外,在三个图像的中间。还有其他建议吗?我会试着一个接一个地删除一些选项,看看这是否会有所不同。我会从点开始,因为这是我看到的你我之间唯一的区别。我假设传送带按预期运行?没有控制台错误或其他什么?你也可以发布你的CSS吗?