1

Доброго времени суток всем, суть проблемы: Имеется на странице slick slider. Есть необходимость разместить его абсолютным позиционированием, но если задать ему position: absolute, то его элементы становятся невероятной ширины. Как это можно побороть? Я уже и в кучу оберток засовывал его и что только не пробовал. Делал абсолютными обертки и все тщетно... Вот ссылка на слайдер

HTML:

<div class="wrapper">
 <div class="wrap">
  <div class="slider">
   <div class="list" ></div>
   <!-- /.slider-item -->
   <div class="list sec" ></div>
   <!-- /.slider-item -->
   <div class="list" ></div>
   <!-- /.slider-item -->
   <div class="list sec" ></div>
   <!-- /.slider-item -->
   <div class="list" ></div>
   <!-- /.slider-item -->
  </div>
 </div>
 <!-- /.wrap -->
</div>
<!-- /.wrapper -->

CSS:

.wrapper{
  position: absolute;
}

.slider {
    width: auto;
    margin: 30px 50px 50px;
    position: relative;
}
.list{
  padding-left: 10px;
  padding-right: 10px;
  width: 50px;
  height: 50px;
  background-color: #aeaeae;
}
.sec{
  background-color: red;
}


.slick-prev:before, 
.slick-next:before {
    color: black;    
}

.slick-dots {
    bottom: -30px;
}

Js:

$(".slider").slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    dots: true,

});

1 ответ 1

0

Надо задать размер вашей обертки.

Посмотрите пример jsfiddle

/**

    This fiddle is using the latest version 
    of Slick (from master) and jQuery.

    If your issue occurs in older version or a 
    specific tag; please use the "External Resources" 
    section in the sidebar to correct it.

**/


$(".slider").slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  dots: true,

});
.wrapper {
  position: absolute;
  width: calc(100vw - 16px);
}

.slider {
  width: auto;
  margin: 30px 50px 50px;
  position: relative;
}

.list {
  padding-left: 10px;
  padding-right: 10px;
  width: 50px;
  height: 50px;
  background-color: #aeaeae;
}

.sec {
  background-color: red;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-dots {
  bottom: -30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css">
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css">
<div class="wrapper">
  <div class="wrap">
    <div class="slider">
      <div class="list"></div>
      <!-- /.slider-item -->
      <div class="list sec"></div>
      <!-- /.slider-item -->
      <div class="list"></div>
      <!-- /.slider-item -->
      <div class="list sec"></div>
      <!-- /.slider-item -->
      <div class="list"></div>
      <!-- /.slider-item -->
    </div>
  </div>
  <!-- /.wrap -->
</div>
<!-- /.wrapper -->

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.