Бесконечная карусель блоков

Question

У меня есть 4 блока:

<div class="row">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    This is some text within a card body.
                </div>
            </div>
        </div>
        <div class="col-md-3" >
            <div class="card">
                <div class="card-body">
                    This is some text within a card body.
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    This is some text within a card body.
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    This is some text within a card body.
                </div>
            </div>
        </div>
    </div>

Как средствами JS или CSS сделать так, что бы эти 4 блока прокручивались горизонтально автоматически после загрузки страницы в бесконечном цикле? Например как здесь Тинькофф

Answer 1

Используй Slick.js, там всё просто Оффициальный сайт, Документация

Можно настроить слайдер для этого. Включить autoplay и поставить autoplaySpeed на 0. А чтобы оно не останавливалось убедится что easing cssEase стоят на linear

$('.autoplay').slick({
  slidesToShow: 2,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 0,
  speed: 2000
  easing: 'linear',
  cssEase: 'linear',

  //Убрать возможность ручного скролла
  arrows: false,
  swipe: false,
  draggable: false
});

Как то так

Тоже самое в CodePen

БЛОГ НА HUSL

Бесконечная карусель блоков

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