javascript - Carousel of divs?

Question

Welcome To Ask or Share your Answers For Others

javascript - Carousel of divs?

asked Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Carousel of divs?

I have a parent div divided by 2 other divs and inside one of those divs I would like to make a carousel of divs but I can neither put the divs next to each other nor make it work with JS.

I've tried using display inline-block and flex to make them be next to each other and although JS code works, it's not what I had in mind.

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>

question from:https://stackoverflow.com/questions/65891495/carousel-of-divs

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-06T19:18:48+0000

You need a wrapper div around just the slides. It will have overflow: hidden and a width that is wider than the parent element. It is common to apply a negative margin-left to the wrapper when sliding, but applying translate to the slides will work too.

Things are easier if you are dealing with predetermined sizes, otherwise you want to use JS to get measurements from the slides and do some math. The width of the wrapper should be the sum of the widths of the slides. display: inline-block will put everything on the same line if your wrapper is wide enough.

Categories

javascript - Carousel of divs?

javascript - Carousel of divs?

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags