Почему не работает responsive в slick slider?

Question

[wether_report]

Не понимаю в чём причина, не работает настройка responsive в этом коде, поискав в интернете понял, что у плагина в принципе много проблем с этим, попробовал все советы, не помогает.

$(document).ready(function(){
    $('.slider').slick({
        // dots: true,
        speed: 500,
        adaptiveHeight: true,
        prevArrow: '<button type="button" class="slick-prev"><img src="images/slider/arrow-left.svg" alt="previous"></button>',
        nextArrow: '<button type="button" class="slick-next"><img src="images/slider/arrow-right.svg" alt="next"></button>',
        responsive: [
            {
            breakpoint: 768,
            settings: {
            arrows: false,
            dots: true
              }
            }
          ]
      });
  });

<section class="carousel">
			<div class="container container--relative">
				<div class="carousel__inner slider">
					<div class="slider__item">
						<img src="./images/slider/slide-1.jpg" alt="" class="slider__img">
					</div>
					<div class="slider__item">
						<img src="./images/slider/slide-2.jpg" alt="" class="slider__img">
					</div>
					<div class="slider__item">
						<img src="./images/slider/slide-3.jpg" alt="" class="slider__img">
					</div>
				</div>
			</div>
		</section>

@use '../abstracts/mathem' as m;

.slider{
    width: min(750px, 85%);
    margin: 0 auto;
    .slick-prev, .slick-next{
        position: absolute;
        z-index: 1;
        top: 50%;
        transform: translateY(-50%);
        max-width: m.rem(31);
        max-height: m.rem(50);
    }
    .slick-prev{
        left: 0;
    }

    .slick-next{
        right: 0;
    }

    &__item img{
        width: 100%;
    }
}

Answer 1

[5465]

Проблема может быть связана с тем, что вы используете относительную ширину min(750px, 85%) для элемента с классом .slider, а не задаете ему явно ширину в пикселях. Slick slider может иметь проблемы с вычислением правильной ширины элемента при использовании относительных единиц измерения.

Попробуйте задать явно ширину для элемента .slider в пикселях, например:

.slider{
    width: 750px;
    margin: 0 auto;
    ...
}

Если это не поможет, попробуйте добавить в настройки responsive параметр slidesToShow, чтобы явно указать количество слайдов, отображаемых при разных ширинах экрана. Например:

responsive: [
    {
        breakpoint: 768,
        settings: {
            arrows: false,
            dots: true,
            slidesToShow: 1
        }
    }
]

Это должно гарантировать, что при ширине экрана менее 768 пикселей будет отображаться только один слайд, а несколько слайдов будут отображаться только при больших разрешениях.