Как правильно адаптировать slick slider?

Question

[Horus123]

Нужно чтобы при уменьшении ширины экрана расстояние между элементами слайдера 30px сохранялось, элементы пропорционально уменьшались. При этом первоначальные размеры должны быть 330x330. Если не выставлять фиксированные размеры элементы сразу уменьшаются по содержимому.

<section class="goods">
    <div class="container">
      <div class="goods__inner">
        <div class="goods__title">Популярные товары
        </div>
        <div class="goods__cards">
          <div class="cards__card">
            <div class="card__inner">
              <div class="card__picture">
                <img src="https://so-wiki.ru/w/images/thumb/e/e0/Icon_%D0%9A%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B0_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F.png/250px-Icon_%D0%9A%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B0_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F.png" alt="">
              </div>
              <div class="card__title">Box</div>
            </div>
          </div>
          <div class="cards__card">
            <div class="card__inner">
              <div class="card__picture">
                <img src="https://so-wiki.ru/w/images/thumb/e/e0/Icon_%D0%9A%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B0_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F.png/250px-Icon_%D0%9A%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B0_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F.png" alt="">
              </div>
              <div class="card__title">Box</div>
            </div>
          </div>
          <div class="cards__card">
            <div class="card__inner">
              <div class="card__picture">
                <img src="https://so-wiki.ru/w/images/thumb/e/e0/Icon_%D0%9A%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B0_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F.png/250px-Icon_%D0%9A%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B0_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F.png" alt="">
              </div>
              <div class="card__title">Box</div>
            </div>
          </div>
          <div class="cards__card">
            <div class="card__inner">
              <div class="card__picture">
                <img src="https://so-wiki.ru/w/images/thumb/e/e0/Icon_%D0%9A%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B0_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F.png/250px-Icon_%D0%9A%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B0_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F.png" alt="">
              </div>
              <div class="card__title">Box</div>
            </div>
          </div>
          <div class="cards__card">
            <div class="card__inner">
              <div class="card__picture">
                <img src="https://so-wiki.ru/w/images/thumb/e/e0/Icon_%D0%9A%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B0_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F.png/250px-Icon_%D0%9A%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B0_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F.png" alt="">
              </div>
              <div class="card__title">Box</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

.goods {
    margin-top: 100px;
}
.container {
    max-width: 1410px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}
.goods__inner {
    position: relative;
}
.goods__title {
    font-size: 30px;
    color: #333333;
}
.goods__cards {
}
.cards__card {
    margin: 0 15px;
}
.card__inner {
}
.card__picture {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f2f2f2;
    width: 330px;
    height: 330px;
    position: relative;
    img {
        max-width: 100%;
        max-height: auto;
    }
}

$('.goods__cards').slick({
  slidesToShow: 4,
});

Answer 1

[Eduard07]

width: calc((330 * 100) / 1920) * 1vw);
height: calc((330 * 100) / 1920) * 1vw);
где :
330 - ширина блока
1920 - ширина екрана на каком делаешь адаптив
Нужно пропробовать с calc(), я это делаю через scss, с помощью миксов .

Comments

[Eduard07]

в идеале, формула: (width_element * 100vw) / width_window