"cerasoul"
Bootstrap 4.1.1 Snippet by soumen

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <link rel="stylesheet" href="styles.css" /> </head> <body> <div class="carousel"> <div class="carousel__item carousel__item--visible"> <img src="images/1.jpg" /> </div> <div class="carousel__item"> <img src="images/2.jpg" /> </div> <div class="carousel__item"> <img src="images/3.jpg" /> </div> <div class="carousel__actions"> <button id="carousel__button--prev" aria-label="Previous slide"><</button> <button id="carousel__button--next" aria-label="Next slide">></button> </div> </div> <script src="app.js"></script> </body> </html>
.carousel { overflow: hidden; max-width: 600px; position: relative; } .carousel .carousel__item, .carousel .carousel__item--hidden { display: none; } .carousel .carousel__item img { width: 100%; max-width: 600px; height: auto; } .carousel .carousel__item--visible { display: block; animation: fadeVisibility 0.5s; } .carousel .carousel__actions { display: flex; width: 100%; justify-content: space-between; position: absolute; top: 50%; transform: translateY(-50%); } .carousel .carousel__actions button { border-radius: 50px; border: 0; font-weight: bold; cursor: pointer; width: 40px; height: 40px; } .carousel .carousel__actions button#carousel__button--prev { margin-left: 20px; } .carousel .carousel__actions button#carousel__button--next { margin-right: 20px; } @keyframes fadeVisibility { 0% { opacity: 0; } 100% { opacity: 1; transform: opacity linear; } }
let slidePosition = 0; const slides = document.getElementsByClassName('carousel__item'); const totalSlides = slides.length; document. getElementById('carousel__button--next') .addEventListener("click", function() { moveToNextSlide(); }); document. getElementById('carousel__button--prev') .addEventListener("click", function() { moveToPrevSlide(); }); function updateSlidePosition() { for (let slide of slides) { slide.classList.remove('carousel__item--visible'); slide.classList.add('carousel__item--hidden'); } slides[slidePosition].classList.add('carousel__item--visible'); } function moveToNextSlide() { if (slidePosition === totalSlides - 1) { slidePosition = 0; } else { slidePosition++; } updateSlidePosition(); } function moveToPrevSlide() { if (slidePosition === 0) { slidePosition = totalSlides - 1; } else { slidePosition--; } updateSlidePosition(); }

Related: See More

Material Kit PRO BS3

Questions / Comments: