如何使用 HTML 和 CSS 创建可运行的滑块?

htmlcssweb developmentfront end technology更新于 2024/6/16 12:28:17

概述

滑块是一个组件，当点击前进和后退导航按钮时，它会呈现类似幻灯片的动画效果。滑块由不同的图片按顺序排列。我们可以使用 HTML 和 CSS 创建这个可运行的滑块。因此，在 CSS 中，我们将使用第 n 个子选择器来使滑块运行。第 n 个子选择器将从父 div 中选择特定的子元素，并将图像显示在首页上。

算法

步骤 1 − 在文件夹中创建一个 index.html 文件，并在文本编辑器中打开它。

步骤 2 − 现在创建一个 div 容器，其 id 为 slider。

<div id="slider"></div>

步骤 3−使用 radio 类型的输入标签创建一个单选按钮。

<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 − 现在创建一个带有 for 属性的标签容器，for 属性的值应与我们在第一个单选按钮容器中创建的单选按钮的 ID 名称相同。

<label for="slider1"></label>

步骤 7 − 如果您想向滑块添加更多幻灯片，请重复步骤 3、5、6。

步骤 8 − 现在在同一文件夹中创建一个 style.css 文件，并将其与 index.html 文件链接。

步骤9 − 现在使用 style.css 文件中的以下代码创建前进和后退导航按钮。

步骤 10 − 同时使用 CSS 设置页面样式。

步骤 11 − 滑块已准备就绪，可供使用。

示例

在此示例中，我们仅使用 CSS 创建了一个可运行的滑块。CSS 的工作是通过第 n 个子选择器、单选按钮和标签标签完成的。我们创建了两个文件，第一个文件是 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>

下图是上述输出的结果。其中，滑块中显示一张图片，并带有两个导航按钮和图片指针。点击右侧箭头按钮时，幻灯片图片将切换至下一张;点击左侧箭头时，则显示上一张幻灯片图片。此外，它还具有在图片底部显示一个点的功能，指示当前幻灯片所在的位置。