div 轮播？ - 编程之家

如何解决div 轮播？

我有一个父 div，除以 2 个其他 div，在其中一个 div 中，我想制作一个 div 轮播，但我既不能将这些 div 放在一起，也不能使其与 JS 一起使用。

我尝试使用 display inline-block 和 flex 使它们彼此相邻，尽管 JS 代码有效，但这不是我的想法。

const leftArrow = document.querySelector('.left-arrow');
const rightArrow = document.querySelector('.right-arrow');
let slide = document.querySelectorAll('.slide');

leftArrow.addEventListener('click',()=>{
  slide.forEach(slide => {
    slide.style.transform = 'translateX(0px)'; // 200px is just so I can see if the movement works
  })
});

rightArrow.addEventListener('click',()=>{
  slide.forEach(slide => {
    slide.style.transform = 'translateX(200px)'; // 200px is just so I can see if the movement works
  })
});

*{
  margin: 0;
  padding: 0;
  Box-sizing: border-Box;
}

main {
  min-height: 100vh;
  background-image: url(../images/bg.jpg);
  display: flex;
  align-items: center;;
  justify-content: center;
}

h1{
  font-family: 'Montserrat',sans-serif;
  color:#729CC6;
  font-size: 96px;
  padding-bottom: 30px;
}

h2{
  color:#729CC6;
}

p{
  font-family: 'Lora',serif;
  color:#729CC6;
  font-size: 3.72vh;
  padding-bottom: 60px;
}

.glass{
  border: 1px solid black;
  position: relative;
  min-height: 80vh;
  width: 80%;
  overflow: hidden;
}

/* SIDE-NAV */

.side-nav{
  border: 1px solid red;
  position: absolute;
  left: 0;
  height: 100%;
  min-height: 80vh;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}


.nav{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  height: 100%;
border: 1px solid red;
}

.screen-home {
  position: absolute;
  top: 11rem;
  left: 17rem;
}

.screen {
  border: 1px solid blue;
  position: absolute;
  top: 1.5rem;
  left: 17rem;
}

.left-arrow {
  position: absolute;
  top: 2.5rem;
  right: 12.5rem;
  height: 80px;
  z-index: 99;
  cursor: pointer;
}

.right-arrow {
  position: absolute;
  top: 2.5rem;
  right: 6.5rem;
  height: 80px;
  z-index: 98;
  cursor: pointer;
}

.title{
  font-family: 'Lora',serif;
  font-size: 44px;
  font-weight: bold;
}
.desc{
  font-family: 'Lora',serif;
  font-size: 26px;
  font-weight: normal;
  line-height: 4rem;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <Meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Lora&display=swap" rel="stylesheet">
</head>

<body>

  <main>
    <div class="glass">

      <img class="left-arrow" src="" alt="left-arrow"></a>
      <img class="right-arrow" src="" alt="right-arrow"></a>


      <div class="side-nav">

        <div class="nav">
          <a href="#"> <img class="side-nav-icon" src="" alt="nav"></a>
        </div>

        <div class="nav">
          <a href="#"> <img class="side-nav-icon" src="" alt="nav"></a>
        </div>

        <div class="nav">
          <a href="#"> <img class="side-nav-icon" src="" alt="nav"></a>
        </div>

        <div class="nav">
          <a href="#"> <img class="side-nav-icon" src="" alt="nav"> </a>
        </div>

        <div class="nav">
          <a href="#"> <img class="side-nav-icon" src="" alt="nav"> </a>
        </div>

      </div>

      <!-- SCREEN -->

      <div class="screen">

        <h1>Lorem ipsum</h1>
        
        <div class="slide">
          <h2 class="title">Title text</h2> <br>
          <p class="desc">
            - dolor sit amet,consectetur adipiscing <br>
            - dolor sit amet,consectetur adipiscing</p>
        </div>

        <div class="slide">
          <h2 class="title">Title text</h2> <br>
          <p class="desc">
            - dolor sit amet,consectetur adipiscing</p>
        </div>
      </div>
  </main>
</body>
</html>

解决方法

您需要一个仅围绕幻灯片的包装器 div。它将具有 overflow: hidden 和一个比父元素宽的 width。滑动时对包装器应用负值 margin-left 是很常见的，但对幻灯片应用 translate 也可以。

如果您处理预先确定的尺寸，事情会更容易，否则您想使用 JS 从幻灯片中获取测量值并进行一些数学运算。包装纸的宽度应该是幻灯片宽度的总和。如果您的包装器足够宽，display: inline-block 会将所有内容放在同一行上。