Проблема с slick-slider

Question

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

**HTML**

`  <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>`

**SCSS**

`.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;
    }
}`

**jQuery**

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

Answer 1

Изначально элементы переносятся на следующий ряд, но когда ширина экрана становится меньше, чем ширина элемента, элементы пропорционально уменьшаются. html код не изменял. Вот css код:

.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 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.cards__card {
    width: auto;
    height: auto;
    max-width: 300px;
    max-height: 330px;
    margin: 0 15px;
}
.card__inner {
    display: block;
}
.card__picture {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f2f2f2;
    max-width: 330px;
    max-height: 330px;
    position: relative;
}

.card__picture img {
    max-width: 100%;
    max-height: auto;
}

БЛОГ НА HUSL

Проблема с slick-slider

Ответы (1 шт):