Slick slider - not adapting to width?

Question

css

Help me solve the problem with the slider, it doesn’t want to adapt, I don’t understand why, I made similar sliders in other projects, I didn’t have such problems with it (there were other problems), it always has some problems that I solve with the help of crutches. Why does everyone like him so much? I set the slider maxwidth: 459px and all my slides had a fixed width and did not adapt.

.main-content__offer
          button.slider-btn.slider-btn--prev
            i.prev-special
          button.slider-btn.slider-btn--next
            i.next-special
          .slider
            .slider-banner
              a.slider-banner__link(href="#")
              img(src="static/images/content/special/special.jpg", alt="Работники на стройку")
              .slider-banner__info
                .slider-banner__job
                  h6.slider-banner__vacancy Работники на стройку
                  span.slider-banner__company Киевжитлобуд
                .slider-banner__price <span>7000грн./мес</span>(+ премии)

.main {
  padding: 35px 0 50px;
    &__offer {
      position: relative;
      margin-bottom: 10px;
      margin-left: -25px;
      padding: 0 25px;
    }
}

.slider {
  &-btn {
    padding: 10px;
    transition: all ease-in-out .3s;
    position: absolute;
    top: 50%;
    margin-top: -16px;
    z-index: 10;

    &--prev {
      left: 0;
      &:hover {
        transform: translateX(-10px) scale(1.2);
      }
    }
    &--next {
      right: 0;
      &:hover {
        transform: translateX(10px) scale(1.2);
      }
    }

  }

  &-banner {
    position: relative;
    border-radius: 6px;
    overflow: hidden;

    img {
      width: 100%;
    }

    &__link {
      position: absolute;
      z-index: 5;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    &__info {
      display: flex;
      justify-content: space-between;
      position: absolute;
      width: 100%;  
      left: 0;
      bottom: 0;
      padding: 10px 30px 10px 15px;
      background-color: rgba($black, 0.7);
      color: $white;
    }

    &__vacancy {
      font-size: 16px;
    }

    &__company {
      font-size: 14px;
    }

    &__price {
      
      span {
        font-size: 18px;
        display: block;
        color: $action-color;
        font-weight: 700;
      }

    }

  }
}

// slider for specials offer
    $('.slider').slick({
        // variableWidth: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        speed: 700,
        autoplay: true,
        autoplaySpeed: 2000,
        nextArrow: '.slider-btn--next',
        prevArrow: '.slider-btn--prev'
    });

Answer 1

Slick adapts not through css, but through settings in js.
kenwheeler.github.io/slick search the adaptive docs.