Slick slider — не адаптируется по ширине?

Question

[Qurel]

Помогите решить проблему со слайдером, не xочет адаптироваться, не понимаю почему, делала аналогичные слайдеры в другиx проектаx не было с ним такиx проблем(были другие проблемы), с ним постоянно одни проблемы, которые решаю с помощью костылей. Почему он всем так нравится? Задавала слайдеру maxwidth: 459px и у меня все слайды были фиксированной ширины и не адаптировались.

.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

[Dima Polos]

Слик адаптируется не через css, а через настройки в js.
kenwheeler.github.io/slick ищите в доках adaptive.

Comments

[Qurel]

В докаx есть только adaptiveHeight

[Dima Polos]

Qurel, да, сорри, спутал, ищите responsive display.
Там надо в настройки передать, по ключу responsive, массив из объектов:

responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },

Отдельный элемент массива - отдельный брейкпоинт или медиазапрос (типа того). Каждый элемент массива - объект, по ключу breakpoint указываете с какого пикселя применять настройки, а далее по ключу settings переопределяете настройки, в частности slideToShow, можно выводить не по 3 слайда, а по 2, если экран меньше чем Х пикселей. По умолчанию там идут брейкпоинты по max-width, но можно переопределить передав в настройки ключ mobileFirst: true

[Qurel]

Dima Polos, у меня там только один слайдер показывается, я его пофиксила - поставила слайдеру max-width: 100vw, потом оно каким-то образом все нормально заработало без этого фикса, но сейчас появилась другая проблема, убрала блок внизу, который баннер на всю ширину экрана, и у меня картинка в слайдере не растягивается на всю ширину блока. Вообще не понимаю почему так! Как блок внизу может влиять на слайдер??? Мне надо сдать эту работу, и по закону подлости не могу доделать.
Ссылка на страницу

[Qurel]

Нашла ошибку, пока работает

[Dima Polos]

Qurel, работает - не трогай, пусть работает себе)

[Qurel]

Наконец работает!