jCarouselLite 技术文档

1. 安装指南

jCarouselLite 是一个基于 jQuery 的轻量级轮播图插件，可以通过以下几种方式进行安装：

• 使用 Bower：bower install jquery-carousel-lite
• 使用 npm：npm install jcarousellite
• 从 GitHub 下载：下载 jcarousellite.js 文件并放置到项目中的某个位置
• 使用 rawgit：直接在 HTML 中引用 <script src="https://rawgit.com/kswedberg/jquery-carousel-lite/master/jcarousellite.js"></script>

2. 项目使用说明

HTML

轮播图的 HTML 标记可以简单地如下所示：

<div class="carousel">
   <ul>
       <li><img src="image/1.jpg" alt="1"></li>
       <li><img src="image/2.jpg" alt="2"></li>
       <li><img src="image/3.jpg" alt="3"></li>
   </ul>
</div>

这个片段只是一个包含无序列表中图片的简单 div。这里的 "carousel" 类只是为了解释之用。你可以为任何元素使用任何类名，或者根本不使用。

为了手动导航轮播图的元素，你可以包括一些导航按钮。例如，你可以有一个 "previous" 按钮用于向后导航和一个 "next" 按钮用于向前导航。这些按钮不必是轮播图 div 本身的部分；它们可以是文档中的任何元素。例如，假设你想要以下元素作为前一个和下一个按钮：

<button class='prev'> &raquo; </button>
<button class='next'> &laquo; </button>

CSS

默认情况下，轮播图可能只需要在你的样式表中添加一个 CSS 规则（再次使用 <div class="carousel"> 作为示例）：

div.carousel {
  overflow: hidden;
}

jQuery

你需要对代表轮播图的 div 元素调用 carousel 组件，并传入导航按钮作为选项。

$('div.carousel').jCarouselLite({
  btnNext: '.next',
  btnPrev: '.prev'
});

有许多其他设置可以自定义轮播图，以下会逐一解释。

3. 项目 API 使用文档

以下是 jCarouselLite 插件的一些主要选项：

• containerSelector：默认值为 "ul"，允许自定义容器选择器。
• itemSelector：默认值为 "li"，允许自定义列表项选择器。
• responsive：默认值为 false，允许在窗口大小变化时重置轮播图及其列表项的宽度和高度。
• swipe：默认值为 true，启用触摸输入响应。
• swipeThresholds：定义触发滑动的阈值。
• preventTouchWindowScroll：默认值为 true，在水平轮播图上滑动时防止窗口垂直滚动。
• btnPrev 和 btnNext：定义导航按钮。
• btnGo：允许使用按钮或链接直接跳转到特定索引的列表项。
• autoCSS：默认值为 true，自动设置轮播图元素的初始样式。
• autoWidth：默认值为 false，基于 <div> 的宽度设置 <li> 的宽度和 <ul> 的位置。
• btnDisabledClass：当非循环轮播图处于第一张或最后一张幻灯片时，自动添加到 btnPrev 或 btnNext 元素的类。
• activeClass：活动幻灯片自动添加的类。
• visibleClass：可见幻灯片对应的 btnGo 元素自动添加的类。
• auto：默认值为 false，控制自动滚动功能。
• pause：默认值为 true，当鼠标进入轮播图时暂停自动滚动。
• directional：未完全定义的选项，可能用于控制滚动方向。

4. 项目安装方式

jCarouselLite 的安装方式已在 "安装指南" 部分详细说明，可以通过 Bower、npm、GitHub 或 rawgit 进行安装。请参考上述步骤进行操作。