how to change order of html elements inside a div-CodePudding

I need to create a carousel with three cards

one - previous card two- active card three - next card

when the user click next button, the carousel should show the next card as active card and show the elements related to that card including the paragraph(which I have hidden by display:none) and when user click on the back button, the carousel should show the previous card as the active card. Is there any way to achieve this using JavaScript in a easy way.

Here is the carousel

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.section--black{
    background-color: #000000;
    color: #fff;
    padding: 60px 0;
}

.container{
    max-width: 1050px;
    margin: 0 auto;
    display: flex;
    overflow: hidden;
    position: relative;
    min-height: 700px;
}
.slider{
  width: 100%;
    display: flex;
    justify-content: space-between;
}

.sliderbox{
    padding: 20px;
    display: flex;
    flex-direction: column;
    width: 290px;
    height: 340px;
    justify-content: flex-end;
    border: 1px solid yellow;
}
.sliderbox__content .sliderbox__paragraph{
    padding-bottom: 20px;
}
.sliderbox--active .sliderbox__content h2{
    font-size: 32px;
}
.sliderbox__content h2{
    letter-spacing: 5px;
    font-size: 22px;
    text-transform: uppercase;
    padding-right: 10px;
}

.sliderbox a{
    color: #fff;
    text-decoration: none;
    display: inline-block;
    border-bottom: 1px solid #fff;
}

.small__heading{
    padding: 10px 0;
}


.sliderbox--prev{
  
  background-image: linear-gradient(black, black), url('https://cdn.pixabay.com/photo/2019/04/06/06/44/astronaut-4106766_960_720.jpg');
  background-size: cover;
  background-blend-mode: saturation;
  margin-right: 35px;
  margin-top: 70px;
  
}

.sliderbox--active{
    min-height: 465px;
    min-width: 400px;
    position: relative;
    background-image: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_960_720.jpg');
    background-position: top center;
    background-size: cover;
}

.sliderbox--next{
  background-image: linear-gradient(black, black), url('https://cdn.pixabay.com/photo/2016/08/17/01/39/mystery-1599527_960_720.jpg');
  background-size: cover;
  background-blend-mode: saturation;
  margin-left: 35px;
  margin-top: 70px;

}
.sliderbox--active .sliderbox__content{
    position: absolute;
    bottom: -44%;
}


.slider__arrows{
    position: absolute;
    bottom: 0;
    right: 0;
}

.slider__arrow{
  border: 1px solid #ffffff;
  border-radius: 50px;
  font-size: 20px;
  padding: 10px;
  cursor: pointer;
}
.slider__arrow:first-child{
  margin-right: 20px; 
}


.slider__overflow{
  right: -100%;
  transform: translateX(0%);
}


.hidden{
  display: none;
}

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/f92ec5af05.js" crossorigin="anonymous">
    </script>

    <title>slider</title>
</head>

<body>
    <section >
        <div >
      <div id="slider" >
            <div >
                <div >
                    <h2>Industry Ready Program</h2>
                    <p >Get Ready to Work</p>
          <p >is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                        it to make a type specimen book.</p>
                    <a href="">Learn More</a>
                </div>
            </div>
            <div >
                <div >
                    <h2>Industry Program</h2>
                    <p >Get Perspective</p>
                    <p >is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                        it to make a type specimen book.</p>
                    <a href="">Learn More</a>
                </div>
            </div>
            <div >
                <div >
                    <h2>Industry Ready Program</h2>
                    <p >Get Ready to Work</p>
          <p >is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                        it to make a type specimen book.</p>
                    <a href="">Learn More</a>
                </div>
            </div>
  </div>

        <div id="data-carousel" >
            <div >
                <div >
                    <h2>Industry Ready Program</h2>
                    <p >Get Ready to Work</p>
          <p >is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                        it to make a type specimen book.</p>
                    <a href="">Learn More</a>
                </div>
            </div>
            <div >
                <div >
                    <h2>Industry Program</h2>
                    <p >Get energised</p>
                    <p >is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                        it to make a type specimen book.</p>
                    <a href="">Learn More</a>
                </div>
            </div>
            <div >
                <div >
                    <h2>Industry Ready Program</h2>
                    <p >Get Ready to Work</p>
          <p >is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                        it to make a type specimen book.</p>
                    <a href="">Learn More</a>
                </div>
            </div>
  </div>

            <div >
            <i id="prev" ></i>
      <i id="next" ></i>
        </div>

        </div>





    </section>
  <footer>
<script src="script.js" type="text/javascript"></script>
  </footer>

    
</body>

</html>

CodePudding user response：

I think this below code help you, this is simple slide show (do same coding with hidden class) (Use full screen Snippet)

const next = document.querySelector("#next")
const prev = document.querySelector("#prev")
const slider = document.querySelectorAll(".sliderbox")


let countIndex = 0
next.addEventListener("click", () => {
  if (slider.length - 1 > countIndex) {
    countIndex  
    slider[`${countIndex - 1}`].classList.remove("active")
    slider[countIndex].classList.add("active")
  } else {
    countIndex = 0
    slider[slider.length - 1].classList.remove("active")
    slider[countIndex].classList.add("active")
  }
})
prev.addEventListener("click", () => {
  if (countIndex === 0) {
    countIndex = slider.length - 1
    slider[0].classList.remove("active")
    slider[countIndex].classList.add("active")
  }
  countIndex--
  slider[`${countIndex   1}`].classList.remove("active")
  slider[countIndex].classList.add("active")
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

.section--black {
  background-color: #000000;
  color: #fff;
  padding: 60px 0;
}

.container {
  max-width: 1050px;
  margin: 0 auto;
  display: flex;
  overflow: hidden;
  position: relative;
  min-height: 700px;
}
.slider {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.sliderbox {
  padding: 20px;
  display: flex;
  flex-direction: column;
  width: 290px;
  height: 340px;
  justify-content: flex-end;
  border: 1px solid yellow;
}
.sliderbox__content .sliderbox__paragraph {
  padding-bottom: 20px;
}
.sliderbox--active .sliderbox__content h2 {
  font-size: 32px;
}
.sliderbox__content h2 {
  letter-spacing: 5px;
  font-size: 22px;
  text-transform: uppercase;
  padding-right: 10px;
}

.sliderbox a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  border-bottom: 1px solid #fff;
}

.small__heading {
  padding: 10px 0;
}

.sliderbox {
  background-image: linear-gradient(black, black), url("#");
  background-size: cover;
  background-blend-mode: saturation;
  margin-left: 35px;
  margin-top: 70px;
}
.sliderbox.active {
  min-height: 465px;
  min-width: 400px;
  position: relative;
  background-image: url("#");
  background-position: top center;
  background-size: cover;
}
.sliderbox.active .sliderbox__content {
  position: absolute;
  bottom: -44%;
}

.slider__arrows {
  position: absolute;
  bottom: 0;
  right: 0;
}

.slider__arrow {
  border: 1px solid #ffffff;
  border-radius: 50px;
  font-size: 20px;
  padding: 10px;
  cursor: pointer;
}
.slider__arrow:first-child {
  margin-right: 20px;
}

.slider__overflow {
  right: -100%;
  transform: translateX(0%);
}

.hidden {
  display: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script
      src="https://kit.fontawesome.com/f92ec5af05.js"
      crossorigin="anonymous"
    ></script>

    <title>slider</title>
  </head>

  <body>
    <section >
      <div >
        <div id="slider" >
          <div >
            <div >
              <h2>Industry Ready Program</h2>
              <p >Get Ready to Work</p>
              <p >
                is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever
                since the 1500s, when an unknown printer took a galley of type
                and scrambled it to make a type specimen book.
              </p>
              <a href="">Learn More</a>
            </div>
          </div>
          <div >
            <div >
              <h2>Industry Program</h2>
              <p >Get Perspective</p>
              <p >
                is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever
                since the 1500s, when an unknown printer took a galley of type
                and scrambled it to make a type specimen book.
              </p>
              <a href="">Learn More</a>
            </div>
          </div>
          <div >
            <div >
              <h2>Industry Ready Program</h2>
              <p >Get Ready to Work</p>
              <p >
                is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever
                since the 1500s, when an unknown printer took a galley of type
                and scrambled it to make a type specimen book.
              </p>
              <a href="">Learn More</a>
            </div>
          </div>
       

          <div >
            <div >
              <h2>Industry Ready Program</h2>
              <p >Get Ready to Work</p>
              <p >
                is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever
                since the 1500s, when an unknown printer took a galley of type
                and scrambled it to make a type specimen book.
              </p>
              <a href="">Learn More</a>
            </div>
          </div>
          <div >
            <div >
              <h2>Industry Program</h2>
              <p >Get energised</p>
              <p >
                is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever
                since the 1500s, when an unknown printer took a galley of type
                and scrambled it to make a type specimen book.
              </p>
              <a href="">Learn More</a>
            </div>
          </div>
          <div >
            <div >
              <h2>Industry Ready Program</h2>
              <p >Get Ready to Work</p>
              <p >
                is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever
                since the 1500s, when an unknown printer took a galley of type
                and scrambled it to make a type specimen book.
              </p>
              <a href="">Learn More</a>
            </div>
          </div>
        </div>
     
        <div >
          <i
            id="prev"
            
          ></i>
          <i
            id="next"
            
          ></i>
        </div>
      </div>
      </div>
    </section>
    <footer>
      <script src="script.js" type="text/javascript"></script>
    </footer>
  </body>
</html>

CodePudding user response：

In order to create a carousel in a simple way you can try this:

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex  = n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i  ) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i  ) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className  = " active";
}

* {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif;
  margin: 0
}

.mySlides {
  display: none
}

img {
  vertical-align: middle;
}


/* Slideshow container */

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}


/* Position the "next button" to the right */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

<!-- Slideshow container -->
<div >

  <!-- Full-width images with number and caption text -->
  <div >
    <div >1 / 3</div>
    <img src="https://img.lemde.fr/2019/05/17/0/0/3553/2542/664/0/75/0/74a2a9f_91ae3c37d18b44d4ae49147a7b9a2126-91ae3c37d18b44d4ae49147a7b9a2126-0.jpg" style="width:100%">
    <div >Caption Text</div>
  </div>

  <div >
    <div >2 / 3</div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_November_2010-1a.jpg" style="width:100%">
    <div >Caption Two</div>
  </div>

  <div >
    <div >3 / 3</div>
    <img src="https://img.lemde.fr/2019/05/17/0/0/3553/2542/664/0/75/0/74a2a9f_91ae3c37d18b44d4ae49147a7b9a2126-91ae3c37d18b44d4ae49147a7b9a2126-0.jpg" style="width:100%">
    <div >Caption Three</div>
  </div>

  <!-- Next and previous buttons -->
  <a  onclick="plusSlides(-1)">&#10094;</a>
  <a  onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<!-- The dots/circles -->
<div style="text-align:center">
  <span  onclick="currentSlide(1)"></span>
  <span  onclick="currentSlide(2)"></span>
  <span  onclick="currentSlide(3)"></span>
</div>

CodePudding user response：

In this code i have not found the js code but i understand the question you like build the two btn that the class active must be moved between you can use the NodeList in Js for Introduction card to js and use hoop for to change the class active in this card.