数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 HTML 和 CSS 创建一个可工作的滑块？
概述
滑块是一种组件，当点击向前和向后导航按钮时，它会制作类似幻灯片的动画。滑块按顺序包含不同的图像，一个接一个。我们可以使用 HTML 和 CSS 创建此工作滑块。因此，在 CSS 中，我们将使用 nth child 选择器使滑块工作。nth child 选择器将从父 div 中选择特定的子元素，并使图像显示在首页上。
算法
步骤 1 − 在文件夹中创建一个 index.html 文件，并在文本编辑器中打开它。
步骤 2 − 现在创建一个 div 容器，其 id 为 slider。
<div id="slider"></div>
步骤 3 − 使用类型为 radio 的 input 标签创建一个单选按钮。
<input type="radio" name="slider" id="slider1" checked />
步骤 4 − 现在创建一个包含滑块图像的容器。
<div class="sliderContainer"></div>
步骤 5 − 使用 img 标签在滑块中插入图像。
<img src="https://images.ctfassets.net/hrltx12pl8hq/4f6DfV5DbqaQUSw0uo0mWi/6fbcf889bdef65c5b92ffee86b13fc44/shutterstock_376532611.jpg?fit=fill&w=800&h=300" alt="image 1" style="width: 100%;" height="100%">
步骤 6 − 现在创建一个 label 标签容器，并带有 for 属性，for 属性的值应与我们在第一个 radio 容器中创建的单选按钮的 id 名称相同。
<label for="slider1"></label>
步骤 7 − 如果要向滑块添加更多幻灯片，请重复步骤 3、5、6。
步骤 8 − 现在在同一个文件夹中创建一个 style.css 文件，并将其链接到 index.html 文件。
步骤 9 − 现在，要使用 style.css 文件中给出的以下代码创建向前和向后导航按钮。
步骤 10 − 还可以使用 CSS 样式化页面。
步骤 11 − 滑块已准备好使用。
示例
在此示例中，我们使用纯 CSS 创建了一个可工作的滑块。CSS 的工作是使用 nth child 选择器、单选按钮和标签标签完成的。其中我们创建了两个文件，第一个文件是 index.html 文件，它包含 HTML 的骨架，另一个文件是 style.css，它包含滑块的工作和样式。
<html>
<head>
<title>working slider</title>
<link rel="stylesheet" href="style.css">
<style>
* {
margin: 0;
padding: 0;
}
#slider {
height: 80vh;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
input[type=radio] {
display: none;
}
#slider label {
cursor: pointer;
}
#slides .sliderContainer {
transition: margin-left 0.2s;
width: 400%;
line-height: 0;
height: 300px;
}
#slides .slider {
width: 25%;
float: left;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #0a0a0a;
}
#controlspointer {
margin: -180px 0 0 0;
width: 100%;
height: 50px;
z-index: 3;
}
#controlspointer label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
}
img{
border-radius: 5px;
}
#slider1:checked~#slides .sliderContainer {
margin-left: 0;
}
#slider2:checked~#slides .sliderContainer {
margin-left: -100%;
}
#slider1:checked~#iloc label:nth-child(1),
#slider2:checked~#iloc label:nth-child(2) {
background: #37af00;
}
#slider1:checked~#controlspointer label:nth-child(2),
#slider2:checked~#controlspointer label:nth-child(1) {
background: url(https://img.icons8.com/ios-filled/256/chevron-right.png) no-repeat center;
float: right;
display: block;
padding: 1rem;
border-radius: 100%;
width: 1px;
height: 1px;
cursor: pointer;
box-shadow: 0 0 8px rgb(83, 83, 83);
margin-right: 0.5rem;
}
#slider1:checked~#controlspointer label:nth-last-child(2),
#slider2:checked~#controlspointer label:nth-last-child(1) {
background: url(https://img.icons8.com/ios-filled/256/chevron-left.png) no-repeat center;
float: left;
display: block;
padding: 1rem;
border-radius: 100%;
width: 1px;
height: 1px;
cursor: pointer;
box-shadow: 0 0 8px rgb(83, 83, 83);
margin-left: 0.5rem;
}
#iloc {
margin: 100px 0 0;
z-index: 9;
text-align: center;
}
#iloc label {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 100%;
background: #ffffff79;
}
</style>
</head>
<body>
<h3 style="padding: 2rem;text-align: center;">Working Slider Using HTML and CSS</h3>
<div id="slider">
<input type="radio" name="slider" id="slider1" checked />
<input type="radio" name="slider" id="slider2" />
<div id="slides">
<div id="overflow">
<div class="sliderContainer">
<div class="slider slider_1">
<div class="slider-content">
<img src="https://images.ctfassets.net/hrltx12pl8hq/4f6DfV5DbqaQUSw0uo0mWi/6fbcf889bdef65c5b92ffee86b13fc44/shutterstock_376532611.jpg?fit=fill&w=800&h=300" alt="image 1" style="width: 100%;" height="100%">
</div>
</div>
<div class="slider slider_2">
<div class="slider-content">
<img src="https://images.ctfassets.net/hrltx12pl8hq/5vMt4yXH3WJfVGUro74UJ7/159813a78d63638d4a223a78e997f989/compressed_shutterstock_1283470036.jpg?fit=fill&w=800&h=300" alt="image 2" style="width: 100%;" height="100%">
</div>
</div>
</div>
</div>
</div>
<div id="controlspointer">
<label for="slider1"></label>
<label for="slider2"></label>
</div>
<div id="iloc">
<label for="slider1"></label>
<label for="slider2"></label>
</div>
</div>
</body>
</html>
下面给出了上述输出的图像。其中它在滑块中显示一个图像，并带有两个导航按钮和图像指针。因此，单击右侧箭头按钮，幻灯片的图像将更改为下一个，而单击左侧箭头将显示上一张幻灯片的图像。它还有一个功能，可以在图像底部显示点，并指示它位于哪个幻灯片上。
结论
因此，在上面的示例中，我们使用了 nth child 选择器，因为我们必须使用 CSS 构建此滑块。但是，如果我们必须使用 javascript 构建相同的滑块，则只需将所有幻灯片数据存储在对象或数组中，就可以更容易地处理它。如果我们想仅使用 CSS 构建它，则需要对 CSS 的 nth 选择器有很好的了解。
3K+ 浏览量
