如何使用HTML和CSS创建一个工作的滑动器

概述

滑动器是一个组件，当点击前进和后退导航按钮时，会触发类似幻灯片的动画。滑动器由不同的图片按顺序排列而成。我们可以使用HTML和CSS来创建这个工作的滑动器。因此，在CSS中，我们将使用nth-child选择器使滑动器工作。nth-child选择器将从父级div中选择特定的子级，并使图像显示在前台。

步骤

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

步骤2 - 现在创建一个带有id为slider的div容器。

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

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

步骤7 − 如果你想向幻灯片中添加更多的幻灯片，重复 步骤3, 5, 6 。

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

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

步骤10 − 还使用CSS样式化你的页面。

步骤11 − 幻灯片已准备就绪。

示例

在这个示例中，我们使用纯CSS创建了一个工作的幻灯片。CSS的工作是使用了nth child选择器、单选按钮和标签标签。我们创建了两个文件，第一个文件是包含HTML骨架的index.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>

以下是上述输出的图像。其中显示了一个带有两个导航按钮和图像指针的幻灯片中的图像。因此，点击右侧箭头按钮将图像幻灯片更改为下一个图像，点击左侧箭头按钮将显示上一张幻灯片的图像。它还具有一个功能，可以在图像底部显示带有指示的点，指示出当前所在的幻灯片。