Как изменить ширину объект в слайде slick?

Question

У слайдеров по умолчанию стоит своя ширина и когда меняешь размер картинки эта ширина остается и слайды сдигаются в лево.

$(document).ready(function(){
  $('.your-class').slick({
    slidesToShow: 3,
    infinite: true,
    slidesToScroll: 1
  });
});

body {
  background-color: #3498db;
}

.your-class {
  width: 900px;
  margin: 0 auto;
  position: relative;
}

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>

<div class="your-class">
  <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
  <div><img src="http://via.placeholder.com/242x300" alt=""></div>
  <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
  <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
  <div><img src="http://via.placeholder.com/242x300" alt=""></div>
  <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
  <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
  <div><img src="http://via.placeholder.com/242x300" alt=""></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

Answer 1

Добавьте variableWidth: true

$(document).ready(function(){
  $('.your-class').slick({
    slidesToShow: 3,
    infinite: true,
    slidesToScroll: 1,
    variableWidth: true
  });
});

body {
  background-color: #3498db;
}

.your-class {
  width: 900px;
  margin: 0 auto;
  position: relative;
}

.your-class div {
  margin-right: 8px;
}

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>

<div class="your-class">
  <div><img src="http://via.placeholder.com/142x300/ffffff/000000" alt=""></div>
  <div><img src="http://via.placeholder.com/342x300" alt=""></div>
  <div><img src="http://via.placeholder.com/302x300/000000/ffffff" alt=""></div>
  <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
  <div><img src="http://via.placeholder.com/262x300" alt=""></div>
  <div><img src="http://via.placeholder.com/272x300/000000/ffffff" alt=""></div>
  <div><img src="http://via.placeholder.com/282x300/ffffff/000000" alt=""></div>
  <div><img src="http://via.placeholder.com/292x300" alt=""></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

БЛОГ НА HUSL

Как изменить ширину объект в слайде slick?

Ответы (1 шт):