конфигурация количества элементов карусели совы игнорируется - PullRequest
Новая
       8

конфигурация количества элементов карусели совы игнорируется

0 голосов
/ 14 ноября 2018

См. Мой пример ниже: 

$(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. Почему?Что я делаю не так?

1 Ответ

0 голосов
/ 15 ноября 2018

Я обслуживал старую версию CSS для карусели сов (1.3.3)

Использование правильной версии (2.2.1) решило эту проблему.

...