主页 / 问题 / 1117677
Accepted
Anton Bogomolov
Asked:2020-04-29 20:02:53 +0800 CST2020-04-29 20:02:53 +0800 CST

无尽的块旋转木马

  • 772

我有 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 个块自动水平滚动？例如，Tinkoff在这里怎么样

javascript

1 个回答

  1. Best Answer

    使用 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 中也是如此

    • 2

相关问题