最近我正在一个项目上工作,需要实现一个幻灯片/轮播。我在网上搜索了一下,但没有找到具有我需要的功能或者还要装一些插件,所以,我想自己创建一个,方便自己使用。
这是一个示例:
HTML
让我们为轮播创建基本的HTML结构。
创建一个类为container的div。
在此div中创建另一个类为carousel-view的div。一个用于幻灯片向左滚动的按钮。一个带有类item-list的幻灯片项目容器。一个用于幻灯片向右滚动的按钮。
<div class="container">
<div class="carousel-view">
<!-- 向左按钮 -->
<button id="prev-btn" class="prev-btn"> </button>
<!-- 项目容器 -->
<div id="item-list" cla