@anton12333
Изучаю JavaScript

Как выровнять слайдер по центру(slick slider)?

5e5fcebe3fb6a037484245.png
$(".shop-slider").slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    infinite: true,
    dots: false,
    nextArrow:
      '<img class="slider-arrows slider-arrows__next" src="img/next-arrow.svg">',
    prevArrow:
      '<img class="slider-arrows slider-arrows__prev" src="img/prev-arrow.svg">'
  });

<div class="row">
        <div class="col-xl-12">
          <div class="shop-slider">
            <div class="shop-slider__item">
              <div class="shop-slider__item-wrapper">
                <div class="shop-slider__item-surf">
                  <img src="img/shop-img1.png" alt="" />
                </div>
                <div class="shop-slider__item-text">
                  <p class="shop-slider__item-text__subtitle">
                    Funboards
                  </p>
                  <h3>Chilli Rare Bird</h3>
                  <a href="#">
                    <p class="shop-slider__item-price">
                      $890
                    </p>
                    <div class="holder-suptitle">
                      Buy
                    </div>
                  </a>
                </div>
              </div>
            </div>
            <div class="shop-slider__item">
              <div class="shop-slider__item-wrapper">
                <div class="shop-slider__item-surf">
                  <img src="img/shop-img2.png" alt="" />
                </div>
                <div class="shop-slider__item-text">
                  <p class="shop-slider__item-text__subtitle">
                    Surfboards
                  </p>
                  <h3>Emery NEM XF</h3>
                  <a href="#">
                    <p class="shop-slider__item-price">
                      $950
                    </p>
                    <div class="holder-suptitle">
                      Buy
                    </div>
                  </a>
                </div>
              </div>
            </div>
            <div class="shop-slider__item">
              <div class="shop-slider__item-wrapper">
                <div class="shop-slider__item-surf">
                  <img src="img/shop-img3.png" alt="" />
                </div>
                <div class="shop-slider__item-text">
                  <p class="shop-slider__item-text__subtitle">
                    Funboards
                  </p>
                  <h3>Agency GROM</h3>
                  <a href="#">
                    <p class="shop-slider__item-price">
                      $670
                    </p>
                    <div class="holder-suptitle">
                      Buy
                    </div>
                  </a>
                </div>
              </div>
            </div>
            <div class="shop-slider__item">
              <div class="shop-slider__item-wrapper">
                <div class="shop-slider__item-surf">
                  <img src="img/shop-img3.png" alt="" />
                </div>
                <div class="shop-slider__item-text">
                  <p class="shop-slider__item-text__subtitle">
                    Funboards
                  </p>
                  <h3>Agency GROM</h3>
                  <a href="#">
                    <p class="shop-slider__item-price">
                      $670
                    </p>
                    <div class="holder-suptitle">
                      Buy
                    </div>
                  </a>
                </div>
              </div>
            </div>
           </div>
         </div>
       </div>
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
Get-Web
@Get-Web
Front-End Developer
Каждый салайд сделайте пустым дивом без стилей и в него свою карточку вставляйте, а уже её позиционируйте как хотите внутри дефолтного слайда
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
08 апр. 2020, в 04:51
16000 руб./за проект
08 апр. 2020, в 00:40
15000 руб./за проект