How To Build a Simple Carousel With Vanilla JavaScript - Html

ManivannanKumar
March 11, 2023
150 views
0 votes
2 Answers

I am learning plain js try the carousel slider if anyone knows please help

Answers

<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">&#10094;</a>
    <a class="next arrow">&#10095;</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>

Please signup or login to give your own answer.

Click here to cancel reply.

How To Build a Simple Carousel With Vanilla JavaScript – Html

Answers