I am learning plain js try the carousel slider if anyone knows please help
2
<div class="carousel"> <div class="carousel-wrapper"> <div class="carousel-item">Item 1</div> <div class="carousel-item">Item 2</div> <div class="carousel-item">Item 3</div> </div> <button class="carousel-prev">Prev</button> <button class="carousel-next">Next</button> </div> <style> .carousel { position: relative; width: 100%; height: 200px; overflow: hidden; } .carousel-wrapper { position: absolute; width: 300%; height: 100%; display: flex; transition: transform 0.5s ease; } .carousel-item { flex: 1; display: flex; justify-content: center; align-items: center; font-size: 3em; } .carousel-prev, .carousel-next { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border: none; background-color: #fff; cursor: pointer; } .carousel-prev { left: 0; } .carousel-next { right: 0; } </style> <script> const carousel = document.querySelector('.carousel'); const wrapper = carousel.querySelector('.carousel-wrapper'); const prevButton = carousel.querySelector('.carousel-prev'); const nextButton = carousel.querySelector('.carousel-next'); const items = carousel.querySelectorAll('.carousel-item'); const itemWidth = items[0].offsetWidth; let currentPosition = 0; function slideTo(position) { if (position > 0 || position < -(items.length - 1) * itemWidth) { return; } currentPosition = position; wrapper.style.transform = `translateX(${position}px)`; } prevButton.addEventListener('click', () => slideTo(currentPosition + itemWidth)); nextButton.addEventListener('click', () => slideTo(currentPosition - itemWidth)); </script>
You should give more information in your request of at least showing SOME SORT of effort in learning or people wont be inclined to help you out bud.
you can simply be googling and get the answers from google itself.
one solution as follows…
// Variables let prev = document.querySelector('.prev'); let next = document.querySelector('.next'); let imgs = document.querySelectorAll('.carousel-img'); let dots = document.querySelectorAll('.dot'); let captions = document.querySelectorAll('.carousel-caption') let totalImgs = imgs.length; let imgPosition = 0; // Event Listeners next.addEventListener('click', nextImg); prev.addEventListener('click', prevImg); // Update Position function updatePosition (){ // Images for(let img of imgs){ img.classList.remove('visible'); img.classList.add('hidden'); } imgs[imgPosition].classList.remove('hidden'); imgs[imgPosition].classList.add('visible') // Dots for (let dot of dots) { dot.className = dot.className.replace(" active", ""); } dots[imgPosition].classList.add('active'); // Captions for (let caption of captions) { caption.classList.remove('visible'); caption.classList.add('hidden'); } captions[imgPosition].classList.remove('hidden'); captions[imgPosition].classList.add('visible') } // Next Img function nextImg(){ if (imgPosition === totalImgs -1){ imgPosition = 0; } else{ imgPosition++; } updatePosition(); } //Previous Image function prevImg(){ if (imgPosition === 0){ imgPosition = totalImgs-1; } else{ imgPosition--; } updatePosition(); } // Dot Position dots.forEach((dot, dotPosition) => { dot.addEventListener("click", () => { imgPosition = dotPosition updatePosition(dotPosition) }) })
*{ margin:0; } .carousel-container{ position:relative; margin:1em auto .5em auto; max-width:400px; } .carousel-container, .carousel-caption{ box-shadow: 0 0 5px rgb(204,204,204);; } .carousel-container img{ border-radius:.5em; width: 400px; } .hidden{ display:none; } .visible{ display:block; } .arrow{ display:inline; } .prev, .arrow{ cursor: pointer; position: absolute; top: 50%; width: auto; margin: -1.5em .3em 0 .3em; padding: 1em; color: white; font-weight: bold; font-size: 1.2em; transition: 0.3s ease; border-radius: .5em; user-select: none; background-color:rgba(204,204,204, 0.3); } .next { right:0 ; } .prev:hover, .next:hover{ box-shadow: 0 0 5px #fff; border:1px solid #fff; } .slide-numbers{ text-align: center; position:absolute; bottom:1em; left:45%; } .dot{ cursor: pointer; height: 10px; width: 10px; margin: 0 2px; background-color: rgba(204,204,204, 0.3); border-radius: 50%; display: inline-block; } .dot:hover, .active{ background-color: rgb(204,204,204); height: 12px; width: 12px; } .dot:hover{ box-shadow: 0 0 5px #fff; } .carousel-caption{ text-align: center; font-family:'Nanum Gothic',serif; background-color: rgba(204,204,204,.8); max-width:400px; margin:.5em auto; padding:1em 0; border-radius:.5em; }
<div class="carousel-container"> <div class="carousel-imgs"> <img src="https://i.imgur.com/3rCW1xj.png" class="carousel-img visible"/> <img src="https://i.imgur.com/AsXzjqX.png" class="carousel-img hidden"/> <img src="https://i.imgur.com/aJndu7X.png" class="carousel-img hidden"/> </div> <a class="prev arrow">❮</a> <a class="next arrow">❯</a> <div class="slide-numbers"> <span class="dot active"></span> <span class="dot"></span> <span class="dot"></span> </div> </div> <div class="carousel-captions"> <p class="carousel-caption visible">Mountain Range 1</p> <p class="carousel-caption hidden">Mountain Range 2</p> <p class="carousel-caption hidden">Mountain Range 3</p> </div>
Click here to cancel reply.
2
Answers
You should give more information in your request of at least showing SOME SORT of effort in learning or people wont be inclined to help you out bud.
you can simply be googling and get the answers from google itself.
one solution as follows…