div的轮播？

Question

我有一个 parent div div 被其他 2 个 div 识别并且在其中一个 div 中我想做一个divs 的旋转木马，但我既不能将 divs 放在一起，也不能让它与 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 <br>
            - 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 <br>
            - dolor sit amet, consectetur adipiscing <br>
            - 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 <br>
            - dolor sit amet, consectetur adipiscing <br>
            - dolor sit amet, consectetur adipiscing <br>
            - dolor sit amet, consectetur adipiscing</p>
        </div>
      </div>
  </main>
</body>
</html>

Answer 1

您只需要在幻灯片周围包装 div。它将有 overflow: hidden 和一个比父元素宽的 width。滑动时通常将负数 margin-left 应用于包装器，但对幻灯片应用 translate 也可以。

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

div的轮播？

Carousel of divs?

html

javascript

carousel