Vertical Image Slider using HTML, CSS & JavaScript

Vertical Image Slider using HTML, CSS & JavaScript
Hello developers, today in this blog, you'll learn to create a Vertical Image Slider using HTML, CSS & JavaScript.

Image slider or slideshow commonly shows one large image. The images get manually forward and backward, allowing you to click on the forward and backward buttons.

In this blog (Vertical Image Slider), there are five images but only a single image will appear at the front. There are five rounded buttons at the middle right of the image which works manually by clicking on either side of the buttons. These buttons slide these images one by one on a button click. By clicking on the button you can choose which image you want. This onclick button function is performed by using JavaScript.

The source code of this Vertical Image Slider is given below, if you want the source code of this program, you can copy it. You can use this Vertical Image Slider with your creativity and can take this project to the next level.

Vertical Image Slider [Source Code]

To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you've to make a file with a .html extension.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vertical Image Slider || Learningrobo</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="C-carousel"> <div class="C-slide"><h1 class="C-slide-title C-slide-title--h1">Vertical carousel</h1><div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div></div> <div class="C-slide"><div class="C-slide-title">Slide 2</div><div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div></div> <div class="C-slide"><div class="C-slide-title">Slide 3</div><div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div></div> <div class="C-slide"><div class="C-slide-title">Slide 4</div><div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div></div> <div class="C-slide"><div class="C-slide-title">Slide 5</div><div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div></div> </div> <script type="text/javascript" src="script.js"></script> </body> </html>
CSS provides style to an HTML page. To form the page attractive create a CSS file with the name style.css and remember that you've got to make a file with a .css extension.


@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
* {
   box-sizing: border-box;
}
 html, body {
   margin: 0;
   padding: 0;
   font-family: "Roboto",sans-serif;
}
 .C-carousel {
   background: #212121;
   height: 100vh;
   width: 100vw;
   overflow: hidden;
   position: relative;
}
 .C-track {
   opacity: 1;
   transition: all 400ms ease;
}
 .C-track--reinit {
   opacity: 0;
   transition: all 0ms linear;
}
 .C-slide {
   height: 100vh;
   width: 100vw;
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: #fff;
   background: no-repeat center / cover;
   background-blend-mode: overlay;
   font-weight: bold;
   font-size: 22px;
   letter-spacing: 2px;
   text-transform: uppercase;
   overflow: hidden;
}
 .C-slide:nth-child(1) {
   background-image: url(https://cdn.pixabay.com/photo/2021/12/11/15/06/northern-lights-6862969__340.jpg);
}
 .C-slide:nth-child(2) {
   background-image: url(https://cdn.pixabay.com/photo/2017/01/19/23/46/church-1993645__340.jpg);
}
 .C-slide:nth-child(3) {
   background-image: url(https://cdn.pixabay.com/photo/2017/06/07/10/47/elephant-2380009__340.jpg);
}
 .C-slide:nth-child(4) {
   background-image: url(https://cdn.pixabay.com/photo/2014/08/01/00/08/pier-407252__340.jpg);
}
 .C-slide:nth-child(5) {
   background-image: url(https://cdn.pixabay.com/photo/2016/10/14/19/21/canyon-1740973__340.jpg);
}
 .C-navigation {
   position: absolute;
   bottom: 5px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 2;
}
 .C-carousel--vertical .C-navigation {
   bottom: auto;
   left: auto;
   right: 20px;
   top: 50%;
   transform: translateY(-50%);
   width: 20px;
}
 @media (max-width: 480px) {
   .C-navigation {
     bottom: 50px;
  }
}
 .C-navigation__dot {
   width: 12px;
   height: 12px;
   background: #fff;
   display: inline-block;
   margin: 4px;
   cursor: pointer;
   border-radius: 50%;
}
 .C-navigation__dot.active {
   background: #33f;
   transform: scale(1.3);
}

 .C-slide-title {
   padding: 1rem 2rem;
   font-size: 1.5rem;
   position: relative;
   transform: translateY(100%);
   opacity: 0;
   transition: all 300ms ease;
   transition-delay: 500ms;
}
 @media (min-width: 480px) {
   .C-slide-title {
     font-size: 2rem;
  }
}
 @media (min-width: 768px) {
   .C-slide-title {
     font-size: 42px;
  }
}
 .active .C-slide-title {
   transform: translateY(0) translateX(0);
   opacity: 1;
}
.credit{
    text-align: center;
    color: #fff;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.credit a{
    text-decoration: none;
    color:#fff;
    font-weight: bold;
} 
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.


class Carousel {
  constructor(el, options = {}) {
    const DEFAULTS = {
      infinite : true,
      slideSelector: '.C-slide',
      initialSlideIndex: 0,
      vertical: false,
    };
    this.carousel = el;
    this.settings = {
      ...DEFAULTS,
      ...options,
    };

    this.slides = document.querySelectorAll(
      this.settings.slideSelector
    );

    this.state = {
      currentSlide: this.settings.initialSlideIndex,
    };

    this.track = null;
    this.navigation = null;
    this.navigationButtons = [];
    this.init();
  }

  setState(newState, callback = () => undefined) {
    this.state = {
      ...this.state,
      ...newState,
    };
    this.updateCarousel();
    return callback();
  }
  
  getSettings = () => {
    return this.settings;
  }

  reInitWithOptions = (options = {}) => {
    this.carousel.classList.remove('initialized');
    this.track.classList.add('C-track--reinit');
    this.settings = {
      ...this.getSettings(),
      ...options,
    };
    
    this.init();
    this.onResizeActions();
    this.track.classList.remove('C-track--reinit');
  };

  init() {
    const {
      carousel,
      slides,
    } = this;

    const {
      vertical,
    } = this.settings;

    carousel.classList.remove('C-carousel--vertical');
    if (vertical) {
      carousel.classList.add('C-carousel--vertical');
    } else {
      slides.forEach(slide => {
        slide.style.float = 'left';
      });
    }

    this.onInitActions();

    window.addEventListener('resize', () => {
      setTimeout(() => { this.onResizeActions(); }, 100);
    });

  }

  onInitActions() {
    this.createSlideTrack();
    this.createNavigation();
    this.createNavigationButtons();
    this.updateCarousel();
    this.carousel.classList.add('initialized');
  }
  createSlideTrack() {
    const {
      slides,
      carousel,
      track,
    } = this;
    
    if(!track) {
      const track = document.createElement('div');
      track.classList.add('C-track');
      slides.forEach(slide => {
        track.appendChild(slide);
      });

      carousel.appendChild(track);
      this.track = track;
    }
    this.setSlideTrackDimensions();
  }

  setSlideTrackDimensions() {

    const {
      track,
      slides,
    } = this;
    slides.forEach(slide => {
      slide.style.transition = 'none';
    });
    const numberOfSlides = slides.length;

    if (!track) { return; }

    const {
      vertical,
    } = this.settings;

    const height = [...slides].reduce((acc, slide) => (
      acc + slide.offsetHeight
    ), 0);
    const width = [...slides].reduce((acc, slide) => (
      acc + slide.offsetWidth
    ), 0);
    
    track.style.transition = 'none';

    if (!!vertical) {
      track.style.width = width / numberOfSlides + 'px';
      track.style.height = height + 'px';
    } else {
      track.style.width = width + 'px';
      track.style.height = height / numberOfSlides + 'px';
    }

    track.style.transition = '';
    slides.forEach(slide => {
      slide.style.transition = '';
    });
  }

  updateTrackPosition() {
    const {
      slides,
      track,
    } = this;

    const numberOfSlides = slides.length;
    const basePercentage = 100 / numberOfSlides;

    const {
      vertical,
    } = this.settings;

    const {
      currentSlide,
    } = this.state;

    const translateValue = !!vertical
    ? `translateY(-${basePercentage * currentSlide}%)`
    : `translateX(-${basePercentage * currentSlide}%)`

    track.style.transform = translateValue;

  }

  createNavigation () {
    const {
      slides,
      carousel,
      navigation,
    } = this;
    
    if (!navigation) {
      const navigationContainer = document.createElement('div');
      navigationContainer.classList.add('C-navigation');
      [...slides].forEach((slide, index) => {
        navigationContainer.appendChild(this.createNavigationDot(index));
      });
      carousel.appendChild(navigationContainer);
      this.navigation = navigationContainer; 
    }
  }

  createNavigationDot(index) {
    const { currentSlide } = this.state;
    const navigationDot = document.createElement('div');
    navigationDot.classList.add('C-navigation__dot');
    navigationDot.setAttribute('data-slideIndex', index);
    navigationDot.addEventListener('click', () => {
      this.goTo(index);
    });

    return navigationDot;
  }

  
  updateNavigation() {
    const {
      navigation,
    } = this;

    const {
      currentSlide,
    } = this.state;

    const navigationDots = navigation.querySelectorAll('.C-navigation__dot');
    navigationDots.forEach(dot => {
      const dotIndex = parseInt(dot.getAttribute('data-slideIndex'), 10);
      if (dotIndex === currentSlide) {
        dot.classList.add('active');
      } else {
        dot.classList.remove('active');
      }
    });
  }

  updateSlides() {
    const {
      slides,
    } = this;

    const {
      currentSlide,
    } = this.state;

    slides.forEach((slide, index) => {
      if (index === currentSlide) {
        slide.classList.add('active');
      } else {
        slide.classList.remove('active');
      }
    });
  }

  goTo = (index) => {
    this.setState({
      currentSlide: index,
    }, () => {
    });
  }

  updateCarousel() {
    this.updateTrackPosition();
    this.updateNavigation();
    this.updateSlides();
  }

}

const registeredCarousels = [];
const carousels = document.querySelectorAll('.C-carousel');
carousels.forEach((carousel, index) => {
  registeredCarousels.push({  
    id: `C-carousel-${index}`,
    carousel: new Carousel(carousel, {
      vertical: true,
    }),
  })
});
We hope you would like this Vertical Image Slider using HTML, CSS & JavaScript.

Thank you for reading our blog. If you face any problem in creating this Vertical Image Slider using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome
OnlineEditor
HTMLTools