前言
水平滚动轮播图是网站和应用程序中常见的元素之一。在过去，使用 jQuery 插件或 JavaScript 编写的代码是实现水平滚动轮播图的主要方式。但是，使用 CSS Flexbox 布局的方法可以更简单、更灵活地实现水平滚动轮播图。
什么是 CSS Flexbox 布局
CSS Flexbox 布局是一种用于定位和布局元素的 CSS3 模块。Flexbox 布局的主要特点是可以轻松地实现自适应布局、水平和垂直居中以及灵活的元素排序。Flexbox 布局的基本思想是将容器分为主轴和交叉轴，通过设置主轴和交叉轴的属性来控制元素的位置和排列方式。
实现水平滚动轮播图的方法
步骤一：创建 HTML 结构
首先，在 HTML 中创建一个包含所有轮播项的容器。每个轮播项都是一个包含图像、标题和描述的块元素。
-- -------------------- ---- -------
---- ---------------------------
---- ----------------------
---- -----------------
------------
----------
------
---- ----------------------
---- -----------------
------------
----------
------
---- ----------------------
---- -----------------
------------
----------
------
---- ------- ---
------步骤二：使用 CSS Flexbox 布局
接下来，在 CSS 中使用 Flexbox 布局来实现水平滚动轮播图。首先，设置容器的 display 属性为 flex，并将主轴方向设置为水平方向。
.carousel-container {
display: flex;
flex-direction: row;
}然后，将每个轮播项的宽度设置为容器的宽度，并将容器的 overflow-x 属性设置为 scroll，以便在容器中创建一个水平滚动条。
-- -------------------- ---- ------- -------------- - ------ ----- - ------------------- - -------- ----- --------------- ---- ----------- ------- -
最后，将每个轮播项之间的间距设置为零，并将轮播项的 flex-shrink 属性设置为 0，以防止它们在窗口缩小时缩小。
-- -------------------- ---- ------- -------------- - ------ ----- ------------- -- ------------ -- - ------------------- - -------- ----- --------------- ---- ----------- ------- -
步骤三：添加 JavaScript 代码
最后，在 JavaScript 中添加代码，以便在用户单击箭头按钮时滚动到下一个或上一个轮播项。下面是一个简单的示例代码：
-- -------------------- ---- -------
----- --------- - ----------------------------------------------
----- ----- - --------------------------------------------
----- ---------- - -----------------------------------------
----- ---------- - -----------------------------------------
--- -------------- - --
------------------------------------ -- -- -
-------------- -- ---------------------
--------------------
---- --
----- ---------------
--------- --------
---
---
------------------------------------ -- -- -
-------------- -- ---------------------
--------------------
---- --
----- ---------------
--------- --------
---
---总结
使用 CSS Flexbox 布局可以更简单、更灵活地实现水平滚动轮播图。通过设置容器的 display 属性为 flex，并将主轴方向设置为水平方向，然后将每个轮播项的宽度设置为容器的宽度，并将容器的 overflow-x 属性设置为 scroll，即可创建一个水平滚动轮播图。最后，通过添加 JavaScript 代码，实现在用户单击箭头按钮时滚动到下一个或上一个轮播项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650e458995b1f8cacd781ed6