使用Swiper 5模拟3D滚轮的自定义效果
我需要用12个项目构建一个轮播，以模拟无限旋转的3D车轮。为了清楚起见，我需要精确地创建这种效果： https://codepen.io/SitePoint/pen/yXWXaw（在此处找到） 但具有以下新增功能（尤其是在台式机和移动设备上）： 幻灯片必须逐步滑动，也就是说，幻灯片应在滑动时移动（就像Swiper一样）。 快速滑动即可滑动许多幻灯片（如Swiper所做的那样 freeScroll）。 然后，当车轮停止旋转时，它会卡扣到前滑片上（就像Swiper使用freeModeSticky和一样 centeredSlides），它是用户选择的滑片。 每次幻灯片更改（例如slideChanged）时，我都需要回调（就像Swiper一样）。 由于所有这些原因，我认为Swiper 5.3.0是一个很好的起点。 我尝试了各种解决方法，更好的方法是使用此设置，但是这loop: true是一种糟糕的解决方法，并且会导致问题（请查看评论）： var swiper = new Swiper(el_class, { slidesPerView: 1.5, spaceBetween: 25, centeredSlides: true, grabCursor: true, speed: 550, loop: true, // <== repeat infinitely the 12 items. with fast scroll at the end of a cycle it waits a …