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.
*{ 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>
