skip to Main Content

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

2

Answers


  1. <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.

    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search