Advance Custom Image Slider

January 15, 2022

Advance Custom Image Slider


Advance Custom Image Slider in JavaScript

Advance custom image slider has multiple features like on/off autoplay, toggle full width, customize width and height, show/hide controls, show/hide caption using HTML, CSS and JavaScript.

Watch Video Tutorial

Part-1 (HTML and CSS)
https://youtu.be/_WmyNLzlAMc


Part-2 (JavaScript)
https://youtu.be/ukiyidyKwcE



CSS Code

.slider {
      width: 500px;
      height: 300px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border: 3px solid rgba(0,0,0,0.5);
      text-align: center;
      overflow: hidden;
  }
  .slider .slide{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      opacity: 0;
      visibility: hidden;
      z-index: -1;
      overflow: hidden;
      transition: 0.5s ease-out;
  }
  .slider .slide img{
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  .slider .slide h3{
      width: 100%;
      display: block;
      color: #fff;
      font-weight: normal;
      background-color: rgba(0, 0, 0, 0.6);
      padding: 10px;
      position: absolute;
      bottom: -25px;
      margin: 0;
      transition: 0.5s ease 0.5s;
  }
  .slider .slide.current{
      opacity: 1;
      visibility: visible;
      z-index: 1;
  }
  .slider .slide.current h3{
      bottom: 0px;
  }
  .slider-control .next,
  .slider-control .prev{
      font-size: 20px;
      color: #000;
      background-color: rgba(255,255,255,0.5);
      padding: 2px 5px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      cursor: pointer;
      box-shadow: 0 0 5px rgba(0,0,0,0.3);
  }
  .slider-control .next{
      right: 5px;
  }
  .slider-control .next:before{
      content: "↠";
  }
  .slider-control .prev{
      left: 5px;
  }
  .slider-control .prev:before{
      content: "↞";
  }
  .slider-control .next:hover,
  .slider-control .prev:hover{
      background-color: rgba(255,255,255,1);
  }

HTML Code

<div class="slider">
  <img alt="Image One" src="" />
  <img alt="Image Two" src="" />
  <img alt="Image Three" src="" />
  <!--you can add more images as you want--> 
</div>

JavaScript Code

let width = ''; //put value for custom width
let height = ''; //put value for custom height
let fullWidth = false; // true / false for full width
let border = true; // true / false for border
const auto = true; // true / false for autoplay
const controls = true; // true / false for controls
const caption = true; // true / false for image caption
const interval = 5000; // autoplay speed control
let initSlide;

const slider = document.querySelector('.slider');
const images = document.querySelectorAll('.slider img');			

var slides = [];
images.forEach((image, i)=>{
    // create a inner slide element
    let slide = document.createElement('div');
    slide.classList.add('slide');

    if (caption == true) {
        // create caption for a slide
        let caption = document.createElement('h3');
        caption.innerText = image.getAttribute('alt');
        slide.appendChild(caption);
    }		

    // Append child to a slide
    slide.appendChild(image);
    // Set each slide into an array
    slides.push(slide);
});

slider.innerHTML = ''; //initially slider will be empty			
// Now get all slides from slides array and put into slider
slides.forEach((image, i) => {
    slider.append(image); //slider
});

// Set custom width / Height
if(width != '' || height != ''){
    fullWidth = false;
    slider.style.cssText = `width:${width} !important;height:${height} !important;`;
}
// Border Enable / Disable
if(border != true){
    slider.style.border = '0';
}
// Full Width Enable / Disable
if (fullWidth == true) {
    slider.style.width = '100%';
    slider.style.height = '100vh';
    slider.style.border = 'none';
}

// Controls Enable / Disable
if (controls == true){
    // Create Controls Container
    let controlContainer = document.createElement('div');
    controlContainer.classList.add('slider-control');
    // Create Next Control Button
    let nextControl = document.createElement('div');
    nextControl.classList.add('next');
    // Create Previous Control Button
    let prevControl = document.createElement('div');
    prevControl.classList.add('prev');				
    // Append childs to controls container
    controlContainer.appendChild(nextControl);
    controlContainer.appendChild(prevControl);
    // Append Controls to slider
    slider.append(controlContainer);

    // Select Controls
    const next = document.querySelector('.next');
    const prev = document.querySelector('.prev');

    next.addEventListener('click', function(){
        nextSlide();
        if (auto) {
            clearInterval(initSlide);
            initSlide = setInterval(nextSlide, interval);
        }
    });

    prev.addEventListener('click', function(){
        prevSlide();
        if (auto) {
            clearInterval(initSlide);
            initSlide = setInterval(nextSlide, interval);
        }				
    });
}

// add current class in very first slide
if (slides[0]) {
    slides[0].classList.add('current');
}

const nextSlide = () => {
    const current = document.querySelector('.current');
    current.classList.remove('current');

    if (current.nextElementSibling && (slides.length-1) > slides.indexOf(current)) {
        current.nextElementSibling.classList.add('current');
    }
    else{
        slides[0].classList.add('current');
    }
    setTimeout(() => current.classList.remove('current'));
}

const prevSlide = () => {
    const current = document.querySelector('.current');
    current.classList.remove('current');

    if (current.previousElementSibling) {
        current.previousElementSibling.classList.add('current');
    }
    else{
        slides[slides.length - 1].classList.add('current');
    }
    setTimeout(() => current.classList.remove('current'));
}

if (auto) {
    initSlide = setInterval(nextSlide, interval);
}

Tags

Post a Comment

0 Comments