Caroufredsel 是一个轻量级的 jQuery 插件，可以帮助我们快速地创建滑动和旋转的轮播。“Caroufredsel” 由 Carousel（旋转木马）和 Fred（一个人名）组成。
本文将介绍如何在你的前端项目中使用 Caroufredsel。 我们将从安装开始，详细解释 Caroufredsel 的各种选项和配置，最后给出一个完整的演示示例。
安装
Caroufredsel 可以通过 NPM 安装，使用以下命令即可：
npm install caroufredsel --save
安装完毕后，我们可以在项目中引入它：
import $ from 'jquery'; import 'caroufredsel';
基本使用
让我们从最简单的开始：创建一个轮播。假设我们有一个图片列表，我们想用 Caroufredsel 来创建一个可循环、自动旋转的轮播。
HTML
-- -------------------- ---- -------
---- ---------------
----
-------- ----------- -------
-------- ----------- -------
-------- ----------- -------
-------- ----------- -------
-------- ----------- -------
-----
------CSS
-- -------------------- ---- ------- ------- --- ------- -- - ------- -- -------- -- ----------- ----- - ------- -- - ------ ----- ------- ------ --------- --------- - ------- -- --- - ------ ----- ------- ----- -------- ------ -
JavaScript
-- -------------------- ---- -------
---------- -------------------
----------- -----
--------- -----
--------- -----
------ -
-------- --
------ ------
--
------- -
--------- ----
---------------- -----
------- --------
--
----- -
----- ----
-
---我们使用 jQuery 选择器选择出目标元素 ul，然后使用 carouFredSel 函数将其转化为一个 Caroufredsel 轮播。函数接受一个配置对象，通过这些配置我们可以控制轮播的各种属性。接下来我们将详细讲解每个属性的含义。
配置
下面是一份完整的配置列表供参考：
-- -------------------- ---- -------
-
----------- ------
------ -----
------- -----
------ -
------ -----
-------- -----
-------- --
------ -----
------- -----
---------- ----
--
------- -
------- -----
--------- ----
------------- ------
----------- ------
------ ---
------ -----
--- ---------
--------- -------
-------- ------
--
---------- -------
--------- -----
--------- ------
------ -----
-------- -----
----- -
----- ------
---------------- ----
--
----- -
------- -----
---- -----
--
----- -
------- -----
---- -----
--
----------- -
---------- -----
----- -----
-------------- -------
------ --------
------------- -----
--
------ -
-------- -----
-------- ------
-------- -
----------------- -------- ------ ------- --------- ----------
------------ -------
---------------- -------
---------- ---
-------- --
---------------------- ----
-
-
-接下来我们将详细讲解每个属性的作用。
responsive
类型: boolean 默认值: false
如果设置为 true，Caroufredsel 将能够自动响应浏览器窗口调整大小的变化。
width
类型: string/number/null 默认值: null
设置容器的宽度。
height
类型: string/number/null 默认值: null
设置容器的高度。
items.start
类型: number 默认值: null
设置轮播的起始项。
items.visible
类型: number 默认值: null
设置每个轮播包含的可见项。
items.minimum
类型: number 默认值: 1
设置最小可见项数量。
items.width
类型: string/number/null 默认值: null
设置单个项的宽度。
items.height
类型: string/number/null 默认值: null
设置单个项的高度。
items.dimension
类型: string 默认值: null
设置项的尺寸，可以是 "height" 或 "width"，Caroufredsel 将根据此设置计算出其他的项宽度或高度。
以上几个参数共同控制了每张图片的尺寸、数量、排列方式等。通过配置这些参数，我们可以实现各种不同的轮播效果。
scroll.easing
类型: string/null 默认值: null
设置轮播过程中的缓动效果。如果不设置，则使用默认的 linear 缓动。
scroll.duration
类型: number 默认值: 500
设置每次滑动的耗时。
scroll.pauseOnHover
类型: boolean 默认值: false
当鼠标悬停在轮播上时是否暂停滑动。
scroll.mousewheel
类型: boolean 默认值: false
是否开启滚轮滚动控制。
scroll.swipe
类型: object 默认值: {}
可以通过此属性配置触摸设备上的滑动选项。可以参考 jQuery TouchSwipe Plugin 以获取更多细节。
scroll.fx
类型: string 默认值: "scroll"
设置 Caroufredsel 的滚动效果，可以选择 scroll、fade、crossfade、cover、uncover 等效果。
scroll.onBefore
类型: function 默认值: $.noop
轮播滑动之前执行的回调函数。
scroll.onAfter
类型: function 默认值: $.noop
轮播滑动之后执行的回调函数。
direction
类型: string 默认值: "left"
设置轮播滑动的方向，可以是 left、right、up、down 等。direction 还可以是包含多个方向的字符串，比如 "up, right"，可以实现复杂的斜向滑动等效果。
circular
类型: boolean 默认值: true
是否启用循环滑动。
infinite
类型: boolean 默认值: false
是否启用无限循环滑动，即可以继续往原方向滑动，比如从最后一张图片又跳到了第一张。
align
类型: string/null 默认值: null
设置轮播的对齐方式，可以是 left、center、right。
padding
类型: number/null 默认值: null
对齐时的边距。
auto.play
类型: boolean 默认值: false
是否自动播放轮播。
auto.timeoutDuration
类型: number 默认值: 4000
轮播切换的时间间隔。
prev.button
类型: string/null 默认值: null
让用户可以通过一个链接、按钮或其他元素来控制轮播滑动到上一项。
prev.key
类型: string/null 默认值: null
让用户可以使用键盘上的按键来控制轮播滑动到上一项。
next.button
类型: string/null 默认值: null
让用户可以通过一个链接、按钮或其他元素来控制轮播滑动到下一项。
next.key
类型: string/null 默认值: null
让用户可以使用键盘上的按键来控制轮播滑动到下一项。
pagination.container
类型: string/null 默认值: null
往轮播中添加分页器。
pagination.keys
类型: boolean/null 默认值: null
是否使用键盘来控制分页器。
pagination.anchorBuilder
类型: function 默认值: $.noop
生成每个分页器元素链接的函数。
pagination.event
类型: string 默认值: "click"
分页器元素绑定的事件名称。
pagination.pauseOnHover
类型: boolean 默认值: false
当鼠标悬停在分页器元素上时是否暂停轮播滑动。
swipe.onTouch
类型: boolean 默认值: true
在触摸设备上使用触摸事件控制滑动。
swipe.onMouse
类型: boolean 默认值: false
在 PC 设备上使用鼠标事件控制滑动。
swipe.options
类型: object 默认值: {}
在触摸设备上用来配置 TouchSwipe 的选项。
演示
下面是一个完整的演示，当你点击运行按钮后，就可以在下面看到 Caroufredsel 的实际效果了。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------- ------------
----- ---------------- ----------------------------------------------------------------------------------
-------
------- ---
------- -- -
------- --
-------- --
----------- -----
-
------- -- -
------ -----
------- ------
--------- ---------
-
------- -- --- -
------ -----
------- -----
-------- ------
-
--------
-------
------
---- ---------------
----
-------- ------------------------------------------- -------
-------- ------------------------------------------- -------
-------- ------------------------------------------- -------
-------- ------------------------------------------- -------
-------- ------------------------------------------- -------
-----
------
------- ---------------------------------------------------
------- ---------------------------------------------------------
--------
------------ -
---------- -------------------
----------- -----
--------- -----
--------- -----
------ -
-------- --
------ ------
--
------- -
--------- ----
---------------- -----
------- --------
--
----- -
----- ----
-
---
---
---------
-------
-------上面这段代码会创建一个包含 5 张图片的、可无限循环旋转的轮播，每张图片之间有 4 秒的切换时间。
总结
本文介绍了如何在前端项目中使用 Caroufredsel，详解了其各种配置选项，最后还给出了一个实际演示的示例。Caroufredsel 为我们创建轮播效果提供了强大而易用的工具，如果你要制作一个漂亮的图片轮播，它是一个绝佳的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005707781e8991b448e7e5d