Как сделать, что бы slick slider менял свою ширину в зависимости от картинки?

Question

[Егор Астрейко]

Всем привет, есть модальное окно:

spoiler

<div class="modal" data-modal-hidden="modal">
        <div class="modal-slider modal__slider">
          <div class="modal-close" data-modal-hidden="modal-slider">
            <svg class="icon icon-close ">
              <use xlink:href="_img/svg/symbol/sprite.svg#close"></use>
            </svg>
          </div>
          <div class="modal-slider__inner">
            <div class="modal-slider__btn modal-slider__btn--prev">
              <svg class="icon icon-modal-slider--prev ">
                <use xlink:href="_img/svg/symbol/sprite.svg#modal-slider--prev"></use>
              </svg>
            </div>
            <div class="modal-slider__btn modal-slider__btn--next">
              <svg class="icon icon-modal-slider--next ">
                <use xlink:href="_img/svg/symbol/sprite.svg#modal-slider--next"></use>
              </svg>
            </div>
            <div class="modal-slider__content">
              <div class="modal-slider__item">
                <div class="modal-slider__wrapper-img"><img class="modal-slider__img" src="_img/modal-slider/hqdefault.jpg" alt=""></div>
                <div class="modal-slider__bottom">
                  <div class="modal-slider__description">Lorem ipsum dolor sit amet</div>
                </div>
              </div>
              <div class="modal-slider__item">
                <div class="modal-slider__wrapper-img"><img class="modal-slider__img" src="_img/modal-slider/img-1.png" alt=""></div>
                <div class="modal-slider__bottom">
                  <div class="modal-slider__description">Lorem ipsum dolor sit amet</div>
                </div>
              </div>
            </div>
            <div class="stat modal-slider__stat">
              <div class="stat__curent"> </div>
              <div class="stat__dec">/</div>
              <div class="stat__all"> </div>
            </div>
          </div>
        </div>
</div>

Стили для модального окна:

spoiler

.modal-slider {
	position: relative;
	margin: auto;
	height: auto;
	width: auto;
	min-width: 320px;
	max-width: 1000px;
	padding-right: 60px;
	-webkit-transition: all 0.5s ease;
	     -o-transition: all 0.5s ease;
	        transition: all 0.5s ease;
	-webkit-animation: lightSpeedOut 0.5s ease;
	        animation: lightSpeedOut 0.5s ease;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	        justify-content: center;
	display: none;
}

.modal-slider--is-visible {
	-webkit-animation: lightSpeedIn 0.5s ease;
	        animation: lightSpeedIn 0.5s ease;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	        justify-content: center;
}

.modal-slider__item {
	min-width: 320px;
}

.modal-slider__inner {
	position: relative;
	max-width: 940px;
	width: auto;
	min-width: 320px;
}

.modal-slider__content {
	width: 100%;
}

.modal-slider__btn {
	position: absolute;
	top: 0;
	width: 70px;
	height: -webkit-calc(100% - 70px);
	height:         calc(100% - 70px);
	cursor: pointer;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	        justify-content: center;
	-webkit-transition: all 0.5s ease;
	     -o-transition: all 0.5s ease;
	        transition: all 0.5s ease;
	z-index: 2;
}

.modal-slider__btn:hover {
	background-color: rgba(0, 0, 0, 0.2);
}

.modal-slider__btn:hover svg {
	fill: #ffffff;
}

.modal-slider__btn svg {
	fill: #000000;
	width: 16px;
	height: 28px;
	-webkit-transition: all 0.5s ease;
	     -o-transition: all 0.5s ease;
	        transition: all 0.5s ease;
}

.modal-slider__btn--prev {
	left: 0;
}

.modal-slider__btn--next {
	right: 0;
}

.modal-slider__item {
	width: auto;
	min-width: 320px;
	position: relative;
}

.modal-slider__wrapper-img {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	        justify-content: center;
	width: auto;
}

.modal-slider__img {
	width: auto;
	max-width: 940px;
}

.modal-slider__bottom {
	background-color: rgba(0, 0, 0, 0.5);
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: start;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	        justify-content: flex-start;
	padding: 0 30px;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 70px;
}

.modal-slider__description {
	font-size: 0.875rem;
	color: #ffffff;
}

.modal-slider .stat {
	position: absolute;
	bottom: 0;
	height: 70px;
	padding: 20px 30px;
	right: 0;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	-webkit-box-align: baseline;
	-webkit-align-items: baseline;
	-ms-flex-align: baseline;
	        align-items: baseline;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	        justify-content: center;
}

.modal-slider .stat> * {
	margin-right: 10px;
	line-height: normal;
}

.modal-slider .stat> *:last-child {
	margin-right: 0;
}

.modal-slider .stat__curent {
	font-size: 1.875rem;
	color: #ffffff;
}

.modal-slider .stat__dec,
.modal-slider .stat__all {
	color: #999999;
}

В модальном окне, slick slider, в нем находятся картинки разной ширины и высоты.
Как сделать, что бы slick slider изменял свою ширину в зависимости от ширины картинки ?
Заранее спасибо.

Answer 1

[Виталий Першин]

у слик слайдера есть опция variableWidth: true

Пример инициализации из документации:

$('.variable-width').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  centerMode: true,
  variableWidth: true
});

Кроме того если слайдер в модальном окне, его может глючить при открытии окна, поэтому после открытия окна можно обновить позицию слайдера $(".variable-width").slick('setPosition');

Comments

[Егор Астрейко]

Почти помогло....

[Виталий Першин]

Егор Грубов, Если вы про высоту, то ест еще adaptiveHeight: true

[Егор Астрейко]

Виталий, Нет, по центру маленькая картинка, а по бокам появился следующий слайд

[Виталий Першин]

Егор Грубов, Вам бы документацию почитать в нимательныее..

При использовании centerMode: true, по умолчанию включается centerPadding: '60px', чтобы слайды не вылазили ставьте centerPadding: '0px',

[Виталий Першин]

Егор Грубов, Хотя при разной ширине я не знаю как они себя будут вести в итоге, судя по примеру один из салайдов будет обрезан, на столько насколько не помещается

[Егор Астрейко]

При помощи граблей подгоняю размер, но в целом, спасибо за помощь.

[Виталий Першин]

Егор Грубов, А вам обязательно разный размер для картинок или может проще задать одинаковый?

Почитайте про https://webref.ru/css/object-fit возможно в вашем случае это поможет, еще background-size:cover; htmlbook.ru/css/background-size

[Егор Астрейко]

Виталий, Обязательно разные, не от меня зависит (