CSS Sliders

2025年1月22日 | 阅读 8 分钟

CSS 滑块可以在一个地方滑动多个标签。我们可以通过点击或延迟函数来滑动滑块。CSS 属性有助于使用文本、图像、视频或用户交互功能滑动容器页面。

如何创建 CSS 滑块

使用以下步骤创建 CSS 滑块。

Create 标签用于在网页上显示幻灯片。
创建链接、标签或符号作为幻灯片，标签作为滑块。
我们可以添加 CSS 属性来为多个标签创建滑块。

示例

提供的示例展示了具有吸引力和用户交互功能的滑块。

示例 1

以下示例展示了基本的 CSS 滑块。我们可以看到带有点击按钮的基本滑块。

<!DOCTYPE html>
<html>
<head>
<title> CSS Slider </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.CSS_slider {
width: 320px;
text-align: center;
overflow: hidden;
}
.CSS_slides::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.CSS_slides::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
.CSS_slides::-webkit-scrollbar-track {
background: transparent;
}
.CSS_slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 300px;
height: 300px;
margin-right: 50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.CSS_slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.CSS_slider > a {
display: inline-flex;
width: 1.4rem;
height: 1.4rem;
background: yellow;
text-decoration: none;
align-items: center;
justify-content: center;
border-radius: 60%;
margin: 0 0 0.5rem 0;
position: relative;
}
.CSS_slider > a:active {
top: 1px;
}
.CSS_slider > a:focus {
background: #000;
}
/* Does not require button navigation */
@supports (scroll-snap-type) {
.CSS_slider > a {
display: none;
}

html, body {
height: 100%;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: skyblue;
font-family: 'Ropa Sans', sans-serif;
}
</style>
</head>
<body style="background-color: #EEF9FD;">
<div class = "main_div">
<h2> CSS Slider </h2>
<b> We can see the slider with the text message!  </b>
<div class = "CSS_slider">
<a href = "#CSS_slide-1"> 1 </a>
<a href = "#CSS_slide-2"> 2 </a>
<a href = "#CSS_slide-3"> 3 </a>
<a href = "#CSS_slide-4"> 4 </a>
<a href = "#CSS_slide-5"> 5 </a>
<div class = "CSS_slides">
<div id = "CSS_slide-1">
CSS
</div>
<div id = "CSS_slide-2">
HTML
</div>
<div id = "CSS_slide-3">
JS
</div>
<div id = "CSS_slide-4">
JAVA
</div>
<div id = "CSS_slide-5">
PHP
</div>
</div>
</div>
</div>
</body>
</html>

输出

输出显示了带有文本的 CSS 滑块。

示例 2

以下示例展示了基本的 CSS 滑块。我们可以为滑块幻灯片设置动画延迟属性。

<!DOCTYPE html>
<html>
<head>
<title> CSS Slider </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
#CSS_slide1 {
height: 10em;
position: relative;
background:beige;
}
#CSS_slide1 > * {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
animation: 10s autoplay1 infinite;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: skyblue;
font-family: 'Ropa Sans', sans-serif;
}
@keyframes autoplay1 {
0% {visibility: visible}
33.33% {visibility: hidden}
}
#CSS_slide1 > *:nth-child(1) {animation-delay: 0s}
#CSS_slide1 > *:nth-child(2) {animation-delay: 4s}
#CSS_slide1 > *:nth-child(3) {animation-delay: 8s}
</style>
</head>
<body style="background-color: #EEF9FD;">
<div class = "main_div">
<h2> CSS Slider with Time </h2>
<b> We can see the slider with the animated and delay time!  </b>
<div id = CSS_slide1>
<div>
<h1> This is the First Slid </h1>
<p> First Slide </p>
</div>
<div>
<h1>This is the Second Slid</h1>
<p> Second slide </p>
</div>
<div>
<h1> This is the Third Slid </h1>
<p> Third Slide </p>
</div>
</div>
</div>
</body>
</html>

输出

输出显示了带有信息的 CSS 滑块。

示例 3

该示例显示了信息滑块的上一页和下一页标签。我们可以获取上一页标签以返回上一页，或获取下一页标签以访问下一页。

<!DOCTYPE html>
<html>
<head>
<title> CSS Slider </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
html,
body {
height: 100%;
margin: 0px;
}
.CSS_Slider-container {
background: linear-gradient(
149deg,
rgb(250, 0, 265) 0%,
rgb(265, 155, 0) 100%
);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.CSS_Slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
overflow: hidden;
position: relative;
}
.CSS_Slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}

.CSS_Slide:nth-of-type(even) {
background-color: rgb(255, 266, 222);
}

.CSS_Slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
scroll-snap-align: center;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
}

.CSS_Slide__text {
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}
.CSS_Slide a {
background: none;
border: none;
}
a.CSS_Slide__prev,
.CSS_Slider::before {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
left: 5%;
}
a.CSS_Slide__next,
.CSS_Slider::after {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
right: 5%;
}
.CSS_Slider::before,
.CSS_Slider::after,
.CSS_Slide__prev,
.CSS_Slide__next {
position: absolute;
top: 48%;
width: 35px;
height: 35px;
border: solid black;
border-width: 0 4px 4px 0;
padding: 3px;
box-sizing: border-box;
}
.CSS_Slider::before,
.CSS_Slider::after {
content: "";
z-index: 1;
background: none;
pointer-events: none;
}
</style>
</head>
<body style="background-color: #EEF9FD;">
<div class = "main_div">
<b> We can see the slider with the text message!  </b>
<div class = "CSS_Slider-container">
<div class = "CSS_Slider">
<div class = "CSS_Slides">
<div id = "CSS_Slides1" class = "CSS_Slide">
<span class = "CSS_Slide__text"> First Slide </span>
<a class = "CSS_Slide__prev" href = "#CSS_Slides4" title = "Next"></a>
<a class = "CSS_Slide__next" href = "#CSS_Slides2" title = "Next"></a>
</div>
<div id = "CSS_Slides2" class = "CSS_Slide">
<span class = "CSS_Slide__text"> Second Slide </span>
<a class = "CSS_Slide__prev" href = "#CSS_Slides1" title = "Prev"></a>
<a class = "CSS_Slide__next" href = "#CSS_Slides3" title = "Next"></a>
</div>
<div id = "CSS_Slides3" class = "CSS_Slide">
<span class = "CSS_Slide__text"> Third Slide </span>
<a class = "CSS_Slide__prev" href = "#CSS_Slides2" title = "Prev"></a>
<a class = "CSS_Slide__next" href = "#CSS_Slides4" title = "Next"></a>
</div>
<div id = "CSS_Slides4" class = "CSS_Slide">
<span class = "CSS_Slide__text"> Fourth Slide </span>
<a class = "CSS_Slide__prev" href = "#CSS_Slides3" title = "Prev"></a>
<a class = "CSS_Slide__next" href = "#CSS_Slides1" title = "Prev"></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

输出

输出显示了带有文本的 CSS 滑块。

示例 4

该示例显示了信息滑块的上一页和下一页链接。我们可以获取上一页链接以返回上一页，或获取下一页链接以访问下一页。

<!DOCTYPE html>
<html>
<head>
<title> CSS Slider </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.CSS_Slider-container {
background: linear-gradient(
149deg,
rgb(250, 0, 265) 0%,
rgb(265, 155, 0) 100%
);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.CSS_Slider {
width: 100%;
max-width: 600px;
height: 350px;
margin: 20px;
text-align: center;
border-radius: 20px;
overflow: hidden;
position: relative;
}
.CSS_Slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.CSS_Slide:nth-of-type(even) {
background-color: rgb(255, 266, 222);
}
.CSS_Slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
scroll-snap-align: center;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
}
.CSS_Slide__text {
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}
.CSS_Slide a {
background: none;
border: none;
}
a.CSS_Slide__prev,
.CSS_Slider::before {
left: 5%;
}
a.CSS_Slide__next,
.CSS_Slider::after {
right: 5%;
}
.CSS_Slider::before,
.CSS_Slider::after,
.CSS_Slide__prev,
.CSS_Slide__next {
position: absolute;
top: 78%;
width: 35px;
height: 35px;
padding: 3px;
box-sizing: border-box;
}
.CSS_Slider::before,
.CSS_Slider::after {
content: "";
z-index: 1;
background: none;
pointer-events: none;
}
</style>
</head>
<body style="background-color: #EEF9FD;">
<div class = "main_div">
<b> CSS Slider : We can see the slider with the text message!  </b>
<div class = "CSS_Slider-container">
<div class = "CSS_Slider">
<div class = "CSS_Slides">
<div id = "CSS_Slides1" class = "CSS_Slide">
<span class = "CSS_Slide__text"> First Slide </span>
<a class = "CSS_Slide__prev" href = "#CSS_Slides4" title = "Next"> Previous </a>
<a class = "CSS_Slide__next" href = "#CSS_Slides2" title = "Next"> Next </a>
</div>
<div id = "CSS_Slides2" class = "CSS_Slide">
<span class = "CSS_Slide__text"> Second Slide </span>
<a class = "CSS_Slide__prev" href = "#CSS_Slides1" title = "Prev"> Previous </a>
<a class = "CSS_Slide__next" href = "#CSS_Slides3" title = "Next"> Next </a>
</div>
<div id = "CSS_Slides3" class = "CSS_Slide">
<span class = "CSS_Slide__text"> Third Slide </span>
<a class = "CSS_Slide__prev" href = "#CSS_Slides2" title = "Prev"> Previous </a>>
<a class = "CSS_Slide__next" href = "#CSS_Slides4" title = "Next"> Next </a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

输出

输出显示了带有文本的 CSS 滑块。

示例 5

以下示例展示了带有图像的 CSS 滑块。

<!DOCTYPE html>
<html>
<head>
<title> CSS Slider </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
html,
body {
height: 100%;
margin: 0px;
}
.CSS_Slider-container {
background: linear-gradient(
149deg,
rgb(270, 0, 265) 0%,
rgb(265, 175, 0) 100%
);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.CSS_Slider {
width: 100%;
max-width: 600px;
height: 380px;
margin: 20px;
text-align: center;
border-radius: 20px;
overflow: hidden;
position: relative;
}
.CSS_Slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}

.CSS_Slide:nth-of-type(even) {
background-color: rgb(255, 266, 222);
}

.CSS_Slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
scroll-snap-align: center;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
}

.CSS_Slide a {
background: none;
border: none;
}
a.CSS_Slide__prev,
.CSS_Slider::before {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
left: 5%;
}
a.CSS_Slide__next,
.CSS_Slider::after {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
right: 5%;
}
.CSS_Slider::before,
.CSS_Slider::after,
.CSS_Slide__prev,
.CSS_Slide__next {
position: absolute;
top: 48%;
width: 35px;
height: 35px;
border: solid black;
border-width: 0 4px 4px 0;
padding: 3px;
box-sizing: border-box;
}
.CSS_Slider::before,
.CSS_Slider::after {
content: "";
z-index: 1;
background: none;
pointer-events: none;
}
</style>
</head>
<body style="background-color: #EEF9FD;">
<div class = "main_div">
<b> CSS Slider : We can see the slider with the image!  </b>
<div class = "CSS_Slider-container">
<div class = "CSS_Slider">
<div class = "CSS_Slides">
<div id = "CSS_Slides1" class = "CSS_Slide">
<span class = "CSS_Slide__text">   <img srcset="https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f 350w," sizes="120px,
123px,
120px">
</span>
<a class = "CSS_Slide__prev" href = "#CSS_Slides4" title = "Next"></a>
<a class = "CSS_Slide__next" href = "#CSS_Slides2" title = "Next"></a>
</div>
<div id = "CSS_Slides2" class = "CSS_Slide">
<img srcset="https://img.freepik.com/premium-photo/life-mexico-landscape-with-field_23-2149862588.jpg?w=1380 350w," sizes="120px,
123px,
120px">
<a class = "CSS_Slide__prev" href = "#CSS_Slides1" title = "Prev"></a>
<a class = "CSS_Slide__next" href = "#CSS_Slides3" title = "Next"></a>
</div>
<div id = "CSS_Slides3" class = "CSS_Slide">
<img srcset="https://img.freepik.com/free-photo/beautiful-retro-nature-with-flowers_23-2149681494.jpg?w=1380&t=st=1700083434~exp=1700084034~hmac=9a463ce8ff477d8727e1149bfbe9ec6bb69d51d5f9072081d71e85cbdc8be888 350w," sizes="120px,
123px,
120px">
<a class = "CSS_Slide__prev" href = "#CSS_Slides2" title = "Prev"></a>
<a class = "CSS_Slide__next" href = "#CSS_Slides4" title = "Next"></a>
</div>
<div id = "CSS_Slides4" class = "CSS_Slide">
<img srcset="https://img.freepik.com/free-photo/closeup-shot-red-rose-with-dew-top-black_181624-28079.jpg?w=740&t=st=1700083578~exp=1700084178~hmac=f9b521720f4fba7b3153b8b587877db73411f4be76c98f5f500d05001c85c0da 350w," sizes="120px,
123px,
120px">
<a class = "CSS_Slide__prev" href = "#CSS_Slides3" title = "Prev"></a>
<a class = "CSS_Slide__next" href = "#CSS_Slides1" title = "Prev"></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

输出

输出显示了带有图像的 CSS 滑块。

结论

CSS 滑块在单个网页上显示多个文本、信息和图像。开发人员可以在最小的空间内放置大量内容，以实现用户交互功能。

下一主题Skeleton CSS

CSS Sliders

如何创建 CSS 滑块

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Sliders

如何创建 CSS 滑块

示例

结论

相关帖子

CSS 垂直线

CSS 中的 Input Placeholder Selector

CSS Flexbox Space Between

CSS Normalization

CSS Spacing

CSS Margin 0 Auto

CSS Loading Animation

CSS :Not(:last-of-type)

CSS Child Selector

CSS Layers

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器