0

Что надо сделать - Что надо сделать

введите сюда описание изображения - Что сделал

Как заменить стрелки, и сделать вот такой эффект чтобы главный слайд был посредине, а 2 других были по краям?

1 ответ 1

-1

на примере моего кода: HTML

    <div class="reviews-slider">

      <div class="reviews-card">
        <div class="reviews-card__image"><img src="img/Ellipse 5.png" alt="девушка на доске" class="reviews-card__image__img"></div>
        <h3 class="reviews-card__header">Мария Кравец</h3>
        <p class="reviews-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>

      <div class="reviews-card">
        <div class="reviews-card__image"><img src="img/Ellipse 6.png" alt="девушка на доске" class="reviews-card__image__img"></div>
        <h3 class="reviews-card__header">Дарья Сиголик</h3>
        <p class="reviews-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>

      <div class="reviews-card">
        <div class="reviews-card__image"><img src="img/Ellipse 7.png" alt="девушка на доске" class="reviews-card__image__img"></div>
        <h3 class="reviews-card__header">Антон Жидов</h3>
        <p class="reviews-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>

    </div>

    <div class="arrows">
      <div class="arrow-left">
        <img src="img/arrow left.svg" alt="стрелка влево">
      </div>
      <div class="arrow-right">
        <img src="img/arrow right.svg" alt="стрелка вправо">
      </div>

JS

  <script type="text/javascript">
$(document).ready(function(){
  $('.reviews-slider').slick({
    // arrow: true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3,
    prevArrow: $('.arrow-left'),
    nextArrow: $('.arrow-right'),
    variableWidth: true,
  });
});

после слайдера (в html) я вставил иконки стрелок и обозвал их классами arrow-left и arrow-right. далее в скрипте написал

    prevArrow: $('.arrow-left'), - предыдущий слайд
    nextArrow: $('.arrow-right'), - следующий слайд

эти значения можешь посмотреть на сайте slick. вместо картинок можно написать слово или сделать квадрать, вообщем все что угодно, просто назови его как-нибудь, а потом сошлись на него в js

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.