Slick slider вылезает за страницу

Проблема заключается в том, что в index.html и style.css я написал данный код

.item1{
  background-image: url(../images/content/content-1.jpg);
  max-width: 442px;
  width: 100%;
 height: 250px;

}

<section class="slider">
<div class="product-slider">
  <div class="item1"></div>
</div>
</section>

но когда что когда я начинаю писать в jquery слайдеру код, например:

 $('.product-slider').slick({
    dots:true,
    arrows:false,
    slidesToShow:1,
    slidesToScroll:1
        });

с ним ничего не происходит. Если я добавлю хоть один item,то все item'ы пропадут и появятся ползунки(скроллы), плюс некоторым свойствам slick задаются огромные величины width и height. Хотел бы разобраться как с этим справиться.