我有一个简单的旋转木马,这是使用旧版本的Owl Carousel v2.2.0
的一些原因,它只适用于大屏幕和采取=默认值的大屏幕只。
Carousel应在桌面上显示3个项目,在检查床上显示2个项目,在移动的上显示1个项目。
转盘工作,但所有屏幕尺寸https://codepen.io/KGuide/pen/abjZLbQ显示3个项目
JS代码
$(document).ready(function () {
$("#slider-carousel").owlCarousel({
rtl: true,
//autoPlay: 5000, Set AutoPlay to 5 seconds
items: 3,
itemsDesktop: [1199, 3],
itemsDesktopSmall: [980, 3],
itemsTablet: [768, 2],
itemsTabletSmall: false,
//itemsMobile: [479, 1],
itemsMobile: false, // itemsMobile disabled - inherit from itemsTablet option
pagination: false,
dots: false,
//video:true,
// autoplayHoverPause: false,
lazyLoad: true,
nav: true,
navText: [
"<i class='fa pe-7s-angle-right'></i>",
"<i class='fa pe-7s-angle-left'></i>"
// "<i class='fa pe-7s-angle-left'></i>",
// "<i class='fa pe-7s-angle-right'></i>"
],
afterInit: function (elem) {
var that = this;
that.owlControls.prependTo(elem);
}
});
});
超文本标记语言
<div id="slider-carousel" class="owl-carousel owl-theme ">
<div class="item">
<img src="https://dummyimage.com/600x400/000/fff&text=1" alt="" />
</div>
<div class="item">
<img src="https://dummyimage.com/600x400/000/fff&text=2" alt="" />
</div>
<div class="item">
<img src="https://dummyimage.com/600x400/000/fff&text=3" alt="" />
</div>
<div class="item">
<img src="https://dummyimage.com/600x400/000/fff&text=4" alt="" />
</div>
<div class="item">
<img src="https://dummyimage.com/600x400/000/fff&text=5" alt="" />
</div>
</div>
我不知道是什么原因造成这种行为。因为这是旧网站,我不能改变这一点,以最新的旋转木马版本。由于某种原因,它似乎打破了。
钢笔示例https://codepen.io/KGuide/pen/abjZLbQ
1条答案
按热度按时间6g8kf2rb1#
经过一番努力,我找到了解决方案,正确的方式添加响应功能,这是与下面的代码
添加后,它的工作很好,在问题中提到的方式是为旧版本猫头鹰旋转木马v1. xx