前言
在 Web 开发中，滚动轮播图是常用的功能之一。Bootstrap-carousel-swipe-haven 是一个基于 Bootstrap 轮播插件的拓展，可同时控制滑动和轮播。本文将介绍如何使用 npm 包 bootstrap-carousel-swipe-haven 来创建全新的轮播效果。
安装
在终端或命令行中，输入以下命令来安装 bootstrap-carousel-swipe-haven：
npm install bootstrap-carousel-swipe-haven --save
同时需要引入 jQuery 和 Bootstrap，具体的使用方法请参考相关的文档或官方网站。
使用教程
首先，在 HTML 文件中引入必要的文件：
<link rel="stylesheet" href="path/to/bootstrap.min.css"> <link rel="stylesheet" href="path/to/bootstrap-carousel-swipe-haven.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="path/to/bootstrap.min.js"></script> <script src="path/to/bootstrap-carousel-swipe-haven.min.js"></script>
接下来就可以开始创建轮播效果了。比如，下面的 HTML 代码定义了一个基本的轮播容器：
-- -------------------- ---- -------
---- --------------- --------------- ------ ---------------------
---- ---------- ---
--- ----------------------------
--- ------------------------- ----------------- --------------------
--- ------------------------- -----------------------
--- ------------------------- -----------------------
-----
---- ------- --- ------ ---
---- -----------------------
---- ----------- --------
---- ---------------- ---------- ---
------
---- -------------
---- ---------------- ---------- ---
------
---- -------------
---- ---------------- ---------- ---
------
------
---- -------- ---
-- ----------- ----------------- ------------------ ------------- ------------------
----- ---------------- ----------------------- --------------------------
----- -------------------------------
----
-- ------------ ----------------- ------------------ ------------- ------------------
----- ---------------- ------------------------ --------------------------
----- ---------------------------
----
------这是 Bootstrap 原生的轮播效果，现在我们想要用 bootstrap-carousel-swipe-haven 来进行改进。在 JavaScript 中，可以这样实现：
-- -------------------- ---- -------
---------------------------
--------- ---- -- ----- - -
---
--------------------------------
---------- ---------- -
-------------------------
--
----------- ---------- -
-------------------------
-
---在这段代码中，我们使用了 Bootstrap 自带的 carousel 插件来创建轮播效果。同时，我们将 $().carouselSwipe() 函数绑定到了 #myCarousel 元素上，以实现滑动效果。
当然，这并不是所有的配置方法，bootstrap-carousel-swipe-haven 还包含了很多高级的配置，可以用来实现更加华丽的轮播效果。接下来，我们将介绍一些常用的配置参数和用法。
高级配置参数
- swipeSpeed
控制滑动速度的参数，默认值为 300。可以通过修改该参数来实现快速、平滑等不同的滑动效果：
-- -------------------- ---- -------
--------------------------------
---------- ---------- -
----------------------------------------
----------- ---- -- - --------
---
--
----------- ---------- -
----------------------------------------
----------- --- -- ---------
---
-
---- threshold
控制手指滑动的阈值，也就是滑动多长距离才算是一次有效的滑动。默认值为 50px，可以根据实际情况自行调整。
-- -------------------- ---- -------
--------------------------------
---------- ---------- -
----------------------------------------
---------- --- -- ------ ----- ------
---
--
----------- ---------- -
----------------------------------------
---------- -- -- ------ ---- ------
---
-
---- excludedElements
设置滑动效果不起作用的元素。当用户在这些元素上进行滑动操作时，将不会触发轮播效果。默认值为 "button, input, textarea, select, a"，即按钮、输入框等常见元素。
$('#myCarousel').carouselSwipe({
excludedElements: "button, input, textarea, select" // 禁止滑动操作在按钮、输入框等元素上触发
});- mouseSwipe
设置是否允许鼠标滑动，可取值为 true 或 false。默认值为 true，即允许鼠标进行滑动操作。
$('#myCarousel').carouselSwipe({
mouseSwipe: false // 禁止鼠标滑动
});- controlMinWidth
在移动设备上，由于屏幕尺寸较小，轮播控制器通常会被设为缩略图样式。这时，可以通过 controlMinWidth 参数来控制轮播控制器的最小宽度。默认值为 30px。
$('#myCarousel').carouselSwipe({
controlMinWidth: 20 // 设置轮播控制器的最小宽度为 20px
});示例代码
在此，我们提供一些常用的轮播效果示例代码。你可以将这些代码复制到你的项目中，或者根据自己的需要进行修改。
- 带有图片和标题的轮播图
-- -------------------- ---- -------
---- --------------- --------------- ------ ---------------------
---- --------- ---
--- ----------------------------
--- ------------------------- ----------------- --------------------
--- ------------------------- -----------------------
--- ------------------------- -----------------------
-----
---- ------- --- ------ ---
---- ---------------------- ---------------
---- ----------- --------
---- ---------------- ---------- ---
---- -------------------------
--------- ------
----------- --- ----- ------
------
------
---- -------------
---- ---------------- ---------- ---
---- -------------------------
--------- ------
----------- --- ----- ------
------
------
---- -------------
---- ---------------- ---------- ---
---- -------------------------
--------- ------
----------- --- ----- ------
------
------
------
---- -------- ---
-- ----------- ----------------- ------------------ ------------- ------------------
----- ---------------- ----------------------- --------------------------
----- -------------------------------
----
-- ------------ ----------------- ------------------ ------------- ------------------
----- ---------------- ------------------------ --------------------------
----- ---------------------------
----
------- 带有缩略图的轮播图
-- -------------------- ---- -------
---- --------------- --------------- ------ ---------------------
---- --------- ---
--- ----------------------------
--- ------------------------- ----------------- ---------------
---- ---------------- -------------- ---
-----
--- ------------------------- ------------------
---- ---------------- -------------- ---
-----
--- ------------------------- ------------------
---- ---------------- -------------- ---
-----
-----
---- ------- --- ------ ---
---- -----------------------
---- ----------- --------
---- ---------------- ---------- ---
------
---- -------------
---- ---------------- ---------- ---
------
---- -------------
---- ---------------- ---------- ---
------
------
---- -------- ---
-- ----------- ----------------- ------------------ ------------- ------------------
----- ---------------- ----------------------- --------------------------
----- -------------------------------
----
-- ------------ ----------------- ------------------ ------------- ------------------
----- ---------------- ------------------------ --------------------------
----- ---------------------------
----
------- 带有动态标题的轮播图
-- -------------------- ---- -------
---- --------------- --------------- ------ ---------------------
---- --------- ---
--- ----------------------------
--- ------------------------- ----------------- --------------------
--- ------------------------- -----------------------
--- ------------------------- -----------------------
-----
---- ------- --- ------ ---
---- -----------------------
---- ----------- --------
---- ---------------- ---------- ---
---- -------------------------
--- -----------------------
----------- --- ----- ------
------
------
---- -------------
---- ---------------- ---------- ---
---- -------------------------
--- -----------------------
----------- --- ----- ------
------
------
---- -------------
---- ---------------- ---------- ---
---- -------------------------
--- -----------------------
----------- --- ----- ------
------
------
------
---- -------- ---
-- ----------- ----------------- ------------------ ------------- ------------------
----- ---------------- ----------------------- --------------------------
----- -------------------------------
----
-- ------------ ----------------- ------------------ ------------- ------------------
----- ---------------- ------------------------ --------------------------
----- ---------------------------
----
------
--------
--- ------ - ------- --- ------ --- ------ ----
--------------------------------------- -------- -- -
--- ----- - --------------------------------
--- ----- - --------------
---------- - ------ - -- - ----------------------
---
---------总结
本文介绍了如何使用 npm 包 bootstrap-carousel-swipe-haven 来创建全新的轮播效果。同时，还介绍了一些常用的配置参数和示例代码，供读者参考。在实际的项目中，我们可以根据具体需求进行定制化开发，以实现更好的轮播效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bcf81e8991b448d96d2