0

I need to create a vertical slider on js without any library,except jquery.enter image description here This scrollable list of years need to be autoscrollable onclick. If you click the next sibling of active button then it must be autoscroll and the clicked button gets active and it goes to top of parent div. Same logic for onclick on previous sibling of button. Note that the next sibling can also be even the very bottom button so everything must work as well.

`

let yearSlides = document.querySelectorAll(".year-btn");
let yearSlideActive = document.querySelector(".active-year");
let nextElem = yearSlideActive.nextElementSibling;
let prevElem = yearSlideActive.previousElementSibling;

``

let counter = 0;
   
      nextElem.addEventListener('click', function(){
        counter++;
        carouse();
    })
    prevElem.addEventListener('click', function(){
        counter--;
        carouse();
    })
   

``

 function carouse(){
        if(counter < imgSlides.length -1){
            nextElem.disabled = false;
        }
        else{
            nextElem.disabled = true; //Disabling the next button if the current image is the last image
        }
        if(counter > 0){
            prevElem.disabled = false;
        }
        else{
            prevElem.disabled = true;  
        }
    
        //Changing the slide vertical positon based on the counter value
        imgSlides.forEach(function(slide){
            slide.style.transform = `translateY(-${counter*55}px)`
        })
    }
    prevElem.disabled = true;

`

Karen
  • 1
  • 2
    Welcome to Stack Overflow. You may want to take the Tour: https://stackoverflow.com/tour Also please provide a Minimal, Reproducible Example: https://stackoverflow.com/help/minimal-reproducible-example – Twisty Nov 22 '22 at 19:30

0 Answers0