如何创建平滑的垂直轮播网页？

【问题标题】：How to create smooth vertical carousel web?如何创建平滑的垂直轮播网页？
【发布时间】：2019-09-17 05:07:37
【问题描述】：

我想为我的产品列表创建一个平滑的垂直轮播，我想为我的 Kiosk Machine 构建它，它使用触摸屏媒体并具有平滑的垂直轮播和滚动功能。

有点困惑我应该使用什么库/工具。

我能做什么：https://codepen.io/DilrajPutra10/pen/bPvQmM

$('.slick-carousel').slick({
  vertical:true,
  verticalSwiping:true,
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 0,
  speed:9000,
  cssEase: 'linear',
  infinite: true,
  arrows:false,
});

在 codepen 上，我可以创建平滑的滚动效果，但我不能滚动它

【问题讨论】：

标签： javascript html css frontend carousel

【解决方案1】：

您可以引入click_handler 函数，以便轮播仅在用户单击slick-carousel 时启动。

function click_handler() {


     $('.slick-carousel').slick({
            vertical:true,
            verticalSwiping:true,
            slidesToShow: 3,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 0,
            speed: 9000,
            cssEase: 'linear',
            infinite: false,
            arrows:false,
      });
}

注意参数infinite这里设置为false。

在 html 中添加这个

<div class="slick-carousel" onclick="click_handler(this)">

【讨论】：

还是不能滚动？自动播放效果很好，垂直轮播很流畅，但是如何让它可以滚动呢？？