Проблема с slick carousel

392

14 февраля 2017, 20:52

На сайте есть слайдеры сделанные с помощью slick carousel. На одной странице установлена 2 слайдера все работает нормально.При переходе на страницу товара высота item'a карусели больше чем его контент из за этого появляется пустое пространство. Я скопировал html код с первой страницы на вторую и таже проблема, так же вставил слайдер на другие страницы и там все нормально. Я удалял всю верстку с этой страницы, но и это не помогло. Только на одной странице происходит такой бред. Вот пример слайдера, здесь высота item'a равна контенту

$('.multiple-items').slick({ 
  infinite: true, 
    lazyLoad: 'ondemand', 
    autoplay: false, 
    autoplaySpeed: 2000, 
    slidesToShow: 5, 
    slidesToScroll: 1, 
     adaptiveHeight: true, 
    responsive: [ 
    { 
      breakpoint: 1280, 
      settings: { 
        slidesToShow: 5, 
        slidesToScroll: 1 
      } 
    }, 
    { 
      breakpoint: 850, 
      settings: { 
        slidesToShow: 4, 
        slidesToScroll: 1 
      } 
    }, 
    { 
      breakpoint: 700, 
      settings: { 
        slidesToShow: 3, 
        slidesToScroll: 1 
      } 
    }, 
    { 
      breakpoint: 460, 
      settings: { 
        slidesToShow: 3, 
        slidesToScroll: 1 
      } 
    }, 
    { 
      breakpoint: 420, 
      settings: { 
        slidesToShow: 2, 
        slidesToScroll: 1 
      } 
    }, 
    { 
      breakpoint: 320, 
      settings: { 
        slidesToShow: 2, 
        slidesToScroll: 1 
      } 
    } 
    ] 
});

body { 
  background-color: gainsboro; 
} 
 
.container { 
  width: 600px; 
  border: 1px solid gray; 
  margin: 0 auto; 
  padding: 20px 0; 
  background-color: lightgrey; 
} 
 
.block__inner { 
  height: auto; 
  border: 1px solid blue; 
  box-sizing: border-box; 
  background-color: white; 
} 
 
.block { 
  padding: 5px; 
}

<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" rel="stylesheet"/> 
<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 
<div class="container multiple-items"> 
  <div class="block"> 
    <div class="block__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos dolores reprehenderit excepturi praesentium delectus ipsum id accusantium harum minus architecto quibusdam, blanditiis sapiente voluptate expedita voluptates consequuntur, dicta! Tempora, culpa.</div> 
  </div> 
    <div class="block"> 
    <div class="block__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos dolores reprehenderit excepturi praesentium delectus ipsum id accusantium harum minus architecto quibusdam, blanditiis sapiente voluptate expedita voluptates consequuntur, dicta! Tempora, culpa.</div> 
  </div> 
    <div class="block"> 
    <div class="block__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos dolores reprehenderit excepturi praesentium delectus ipsum id accusantium harum minus architecto quibusdam, blanditiis sapiente voluptate expedita voluptates consequuntur, dicta! Tempora, culpa.</div> 
  </div> 
    <div class="block"> 
    <div class="block__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos dolores reprehenderit excepturi praesentium delectus ipsum id accusantium harum minus architecto quibusdam, blanditiis sapiente voluptate expedita voluptates consequuntur, dicta! Tempora, culpa.</div> 
  </div> 
   <div class="block"> 
    <div class="block__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos dolores reprehenderit excepturi praesentium delectus ipsum id accusantium harum minus architecto quibusdam, blanditiis sapiente voluptate expedita voluptates consequuntur, dicta! Tempora, culpa.</div> 
  </div> 
    <div class="block"> 
    <div class="block__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos dolores reprehenderit excepturi praesentium delectus ipsum id accusantium harum minus architecto quibusdam, blanditiis sapiente voluptate expedita voluptates consequuntur, dicta! Tempora, culpa.</div> 
  </div> 
    <div class="block"> 
    <div class="block__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos dolores reprehenderit excepturi praesentium delectus ipsum id accusantium harum minus architecto quibusdam, blanditiis sapiente voluptate expedita voluptates consequuntur, dicta! Tempora, culpa.</div> 
  </div> 
    <div class="block"> 
    <div class="block__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos dolores reprehenderit excepturi praesentium delectus ipsum id accusantium harum minus architecto quibusdam, blanditiis sapiente voluptate expedita voluptates consequuntur, dicta! Tempora, culpa.</div> 
  </div> 
</div>