主页 / 问题 / 1541776
Accepted
The__Tip учусь
Asked:2023-09-21 13:35:29 +0800 CST2023-09-21 13:35:29 +0800 CST

如何使用纯 Html css 制作这样的滑块？

  • 772

[！[

.slider{
width: 1366px;
height: 569px;
overflow: hidden;
}


.middle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}



.navigation{
display: flex;
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);

}

.bar{
 border-radius: 50%;
 width:15px;
 height: 15px;
background-color: #000;
}
<div class="slider midlle">

  <div class="slides">
  <input type="radio" name="s" id="r1" checked>
  <input type="radio" name="s" id="r2">
  <input type="radio" name="s" id="r3">
  <input type="radio" name="s" id="r4">
  <input type="radio" name="s" id="r5">
  <input type="radio" name="s" id="r6">
  <input type="radio" name="s" id="r7">
  <input type="radio" name="s" id="r8">
  <input type="radio" name="s" id="r9">
  <input type="radio" name="s" id="r10">
  
  <div class="sllide"><img src="image/slider__bg.jpg" alt=""></div>
  <div class="sllide"><img src="image/slider__bg.jpg" alt=""></div>
  <div class="sllide"><img src="image/slider__bg.jpg" alt=""></div>
  <div class="sllide"><img src="image/slider__bg.jpg" alt=""></div>
  <div class="sllide"><img src="image/slider__bg.jpg" alt=""></div>
  <div class="sllide"><img src="image/slider__bg.jpg" alt=""></div>
  <div class="sllide"><img src="image/slider__bg.jpg" alt=""></div>
  <div class="sllide"><img src="image/slider__bg.jpg" alt=""></div>
  <div class="sllide"><img src="image/slider__bg.jpg" alt=""></div>
  <div class="sllide"><img src="image/slider__bg.jpg" alt=""></div>
  
  </div>
  
  <div class="navigation">
    <lable for="r1" class="bar"></lable>
    <lable for="r2" class="bar"></lable>
    <lable for="r3" class="bar"></lable>
    <lable for="r4" class="bar"></lable>
    <lable for="r5" class="bar"></lable>
    <lable for="r6" class="bar"></lable>
    <lable for="r7" class="bar"></lable>
    <lable for="r8" class="bar"></lable>
    <lable for="r9" class="bar"></lable>
    <lable for="r10" class="bar"></lable>
  </div>
  
  </div>

在此输入图像描述] 2 ] 2

css3

1 个回答

  1. Best Answer

    发生了一些事。我们需要查看 caniuse 来查看其他浏览器是否支持它，但在 Google 109 中它对我来说可以正常工作。

    https://codepen.io/andromeda3141/pen/XWoVgpe

    .container {
  padding: 2rem;
}

.slider-wrapper {
  position: relative;
  max-width: 48rem;
  margin: 0 auto;
}

.slider {
  display: flex;
  aspect-ratio: 16 / 9;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.slider img {
  flex: 1 0 100%;
  scroll-snap-align: start;
}

.slider-nav {
  display: flex;
  column-gap: 1rem;
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.slider-nav a {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.75;
}

 ::-webkit-scrollbar {
  width: 0;
}
    <section class="container">
  <div class="slider-wrapper">
    <div class="slider">
      <img src="https://shop-cdn1-2.vigbo.tech/shops/2544/products/16486697/images/3-9f0ed407d8ba2537f38b8b2d9765ccdb.jpg" alt="Картинка-1" id="slide-1">
      <img src="https://png.pngtree.com/thumb_back/fw800/background/20230408/pngtree-woods-sunshine-forest-nature-background-image_2173232.jpg" alt="Картинка-1" id="slide-2">
      <img src="https://png.pngtree.com/background/20230401/original/pngtree-forest-morning-background-picture-image_2251636.jpg" alt="Картинка-1" id="slide-3">
    </div>
    <div class="slider-nav">
      <a href="#slide-1"></a>
      <a href="#slide-2"></a>
      <a href="#slide-3"></a>
    </div>
  </div>
</section>

    • 2

相关问题