请参阅下面的示例:
$(function(e) {
$("#blog-slider").owlCarousel({
// mobile
nav: false,
navText: '',
items: 2,
dots: false,
responsiveClass:true,
stagePadding: 30,
// desktop
responsive:{
980:{
// this isn't being listened to why!?
items:6,
slideBy: 6,
stagePadding: 0,
nav: true,
dots: false,
navText: ''
}
}
});
});
.homepage-slider {
overflow: visible;
margin-top: 20px;
margin-bottom: 60px;
padding: 20px 41px 20px 40px;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<div id="blog-slider" class="homepage-slider owl-carousel">
<div class="homepage-slider__item homepage_blog_carousel1">
<a href="#">
<div>
<img class="alignnone" src="https://via.placeholder.com/100/" alt="" width="701" height="394">
</div>
</a>
<a href="#">
<div class="homepage-slider__interior post-tag">
category tag
</div>
</a>
<a href="#">
<div class="homepage-slider__interior post-title">
A post title goes here
</div>
<div class="homepage-slider__interior post-date">
November 14, 2018
</div>
</a>
</div>
<div class="homepage-slider__item homepage_blog_carousel1">
<a href="#">
<div>
<img class="alignnone" src="https://via.placeholder.com/100/" alt="" width="701" height="394">
</div>
</a>
<a href="#">
<div class="homepage-slider__interior post-tag">
category tag
</div>
</a>
<a href="#">
<div class="homepage-slider__interior post-title">
A post title goes here
</div>
<div class="homepage-slider__interior post-date">
November 14, 2018
</div>
</a>
</div>
<div class="homepage-slider__item homepage_blog_carousel1">
<a href="#">
<div>
<img class="alignnone" src="https://via.placeholder.com/100/" alt="" width="701" height="394">
</div>
</a>
<a href="#">
<div class="homepage-slider__interior post-tag">
category tag
</div>
</a>
<a href="#">
<div class="homepage-slider__interior post-title">
A post title goes here
</div>
<div class="homepage-slider__interior post-date">
November 14, 2018
</div>
</a>
</div>
<div class="homepage-slider__item homepage_blog_carousel1">
<a href="#">
<div>
<img class="alignnone" src="https://via.placeholder.com/100/" alt="" width="701" height="394">
</div>
</a>
<a href="#">
<div class="homepage-slider__interior post-tag">
category tag
</div>
</a>
<a href="#">
<div class="homepage-slider__interior post-title">
A post title goes here
</div>
<div class="homepage-slider__interior post-date">
November 14, 2018
</div>
</a>
</div>
<div class="homepage-slider__item homepage_blog_carousel1">
<a href="#">
<div>
<img class="alignnone" src="https://via.placeholder.com/100/" alt="" width="701" height="394">
</div>
</a>
<a href="#">
<div class="homepage-slider__interior post-tag">
category tag
</div>
</a>
<a href="#">
<div class="homepage-slider__interior post-title">
A post title goes here
</div>
<div class="homepage-slider__interior post-date">
November 14, 2018
</div>
</a>
</div>
<div class="homepage-slider__item homepage_blog_carousel1">
<a href="#">
<div>
<img class="alignnone" src="https://via.placeholder.com/100/" alt="" width="701" height="394">
</div>
</a>
<a href="#">
<div class="homepage-slider__interior post-tag">
category tag
</div>
</a>
<a href="#">
<div class="homepage-slider__interior post-title">
A post title goes here
</div>
<div class="homepage-slider__interior post-date">
November 14, 2018
</div>
</a>
</div>
<div class="homepage-slider__item homepage_blog_carousel1">
<a href="#">
<div>
<img class="alignnone" src="https://via.placeholder.com/100/" alt="" width="701" height="394">
</div>
</a>
<a href="#">
<div class="homepage-slider__interior post-tag">
category tag
</div>
</a>
<a href="#">
<div class="homepage-slider__interior post-title">
A post title goes here
</div>
<div class="homepage-slider__interior post-date">
November 14, 2018
</div>
</a>
</div>
<div class="homepage-slider__item homepage_blog_carousel1">
<a href="#">
<div>
<img class="alignnone" src="https://via.placeholder.com/100/" alt="" width="701" height="394">
</div>
</a>
<a href="#">
<div class="homepage-slider__interior post-tag">
category tag
</div>
</a>
<a href="#">
<div class="homepage-slider__interior post-title">
A post title goes here
</div>
<div class="homepage-slider__interior post-date">
November 14, 2018
</div>
</a>
</div>
</div>
我在桌面上指定(980个以上的断点)仅显示6个项目。它被忽略并显示8.为什么?我在做什么错了?
答案 0 :(得分:-1)
我正在使用旧版本的owl carousel CSS(1.3.3)
使用正确的版本(2.2.1)解决了此问题。