1

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 class="slider_section section--black">
        <div class="container">
      <div id="slider" class="slider">
            <div class="sliderbox sliderbox--prev">
                <div class="sliderbox__content">
                    <h2>Industry Ready Program</h2>
                    <p class="small__heading">Get Ready to Work</p>
          <p class="sliderbox__paragraph hidden">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 class="sliderbox sliderbox--active">
                <div class="sliderbox__content">
                    <h2>Industry Program</h2>
                    <p class="small__heading">Get Perspective</p>
                    <p class="sliderbox__paragraph">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 class="sliderbox sliderbox--next">
                <div class="sliderbox__content">
                    <h2>Industry Ready Program</h2>
                    <p class="small__heading">Get Ready to Work</p>
          <p class="sliderbox__paragraph hidden">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" class="slider">
            <div class="sliderbox sliderbox--prev">
                <div class="sliderbox__content">
                    <h2>Industry Ready Program</h2>
                    <p class="small__heading">Get Ready to Work</p>
          <p class="sliderbox__paragraph hidden">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 class="sliderbox sliderbox--active">
                <div class="sliderbox__content">
                    <h2>Industry Program</h2>
                    <p class="small__heading">Get energised</p>
                    <p class="sliderbox__paragraph">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 class="sliderbox sliderbox--next">
                <div class="sliderbox__content">
                    <h2>Industry Ready Program</h2>
                    <p class="small__heading">Get Ready to Work</p>
          <p class="sliderbox__paragraph hidden">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 class="slider__arrows">
            <i id="prev" class="slider__arrow slider__arrow--prev fa-solid fa-arrow-left"></i>
      <i id="next" class=" slider__arrow slider__arrow--prev fa-solid fa-arrow-right"></i>
        </div>

        </div>





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

    
</body>

</html>

Improve this question

2 Answers 2

Reset to default
1

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 class="slider_section section--black">
      <div class="container">
        <div id="slider" class="slider">
          <div class="sliderbox">
            <div class="sliderbox__content">
              <h2>Industry Ready Program</h2>
              <p class="small__heading">Get Ready to Work</p>
              <p class="sliderbox__paragraph hidden">
                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 class="sliderbox">
            <div class="sliderbox__content">
              <h2>Industry Program</h2>
              <p class="small__heading">Get Perspective</p>
              <p class="sliderbox__paragraph">
                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 class="sliderbox">
            <div class="sliderbox__content">
              <h2>Industry Ready Program</h2>
              <p class="small__heading">Get Ready to Work</p>
              <p class="sliderbox__paragraph hidden">
                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 class="sliderbox">
            <div class="sliderbox__content">
              <h2>Industry Ready Program</h2>
              <p class="small__heading">Get Ready to Work</p>
              <p class="sliderbox__paragraph hidden">
                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 class="sliderbox">
            <div class="sliderbox__content">
              <h2>Industry Program</h2>
              <p class="small__heading">Get energised</p>
              <p class="sliderbox__paragraph">
                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 class="sliderbox">
            <div class="sliderbox__content">
              <h2>Industry Ready Program</h2>
              <p class="small__heading">Get Ready to Work</p>
              <p class="sliderbox__paragraph hidden">
                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 class="slider__arrows">
          <i
            id="prev"
            class="slider__arrow slider__arrow--prev fa-solid fa-arrow-left"
          ></i>
          <i
            id="next"
            class="slider__arrow slider__arrow--prev fa-solid fa-arrow-right"
          ></i>
        </div>
      </div>
      </div>
    </section>
    <footer>
      <script src="script.js" type="text/javascript"></script>
    </footer>
  </body>
</html>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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 class="slideshow-container">

  <!-- Full-width images with number and caption text -->
  <div class="mySlides fade">
    <div class="numbertext">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 class="text">Caption Text</div>
  </div>

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

  <div class="mySlides fade">
    <div class="numbertext">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 class="text">Caption Three</div>
  </div>

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

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

Improve this answer

2 Comments

Without running your code in a Stack Snippet <> I would have never have known it works. Make sure to include a snippet when you can, and could expand further by adding absolute image file paths to demonstrate it working.
@Kameron okay thank you. i will do it next time

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.