Search by Queries/Bugs/Errors

Custom slider js

Created at 01-Aug-2023 , By samar

A custom slider is a JavaScript plugin that allows you to create and control a dynamic slideshow of images or content on a webpage. Unlike pre-built slider libraries, a custom slider gives you the flexibility to design and tailor the slider's behavior according to your specific needs and design preferences.

Creating a custom slider requires a combination of HTML, CSS, and JavaScript knowledge. Simply copy paste code to see the result in your browser.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Title</title>
  <style>
  	.slider-container {
  position: relative;
  overflow: hidden;
  width: 400px; /* Adjust the width as needed */
  height: 200px; /* Adjust the height as needed */
}

.slider {
  display: flex;
  width: 300%; /* Adjust the width to accommodate all slides */
  transition: transform 0.3s ease-in-out;
}

.slide {
  flex: 0 0 33.33%; /* Adjust this to distribute slides equally */
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prev-btn,
.next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 12px;
  background-color: #333;
  color: #fff;
  border: none;
  cursor: pointer;
}

.prev-btn {
  left: 0;
}

.next-btn {
  right: 0;
}
  </style>
</head>
<body>

  <div class="slider-container">
  <div class="slider">
    <div class="slide">
       <img src="https://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/splash.png" alt="Image 1">
    </div>
    <div class="slide">
      <img src="https://commondatastorage.googleapis.com/codeskulptor-demos/riceracer_assets/img/start.png" alt="Image 2">
    </div>
    <div class="slide">
      <img src="https://codeskulptor-demos.commondatastorage.googleapis.com/descent/background.png" alt="Image 3">
    </div>
  </div>
  <button class="prev-btn">Previous</button>
  <button class="next-btn">Next</button>
</div>
  
  <script>
  	(function() {
  const sliderContainer = document.querySelector('.slider-container');
  const slider = document.querySelector('.slider');
  const prevBtn = document.querySelector('.prev-btn');
  const nextBtn = document.querySelector('.next-btn');
  const slides = document.querySelectorAll('.slide');
  
  let currentIndex = 0;
  const totalSlides = slides.length;
  const slideWidth = sliderContainer.clientWidth;
  const autoSlideInterval = 3000; // Change auto slide interval (in milliseconds) as needed
  const secondSlideDuration = 2000; // Duration of the second slide (in milliseconds)
  let autoSlideTimer;
  
  function showSlide(index) {
    const position = `translateX(-${index * slideWidth}px)`;
    slider.style.transform = position;
  }
  
  function showNextSlide() {
    currentIndex = (currentIndex + 1) % totalSlides;
    showSlide(currentIndex);
  }
  
  function showPrevSlide() {
    currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
    showSlide(currentIndex);
  }
  
  function autoSlide() {
    autoSlideTimer = setInterval(() => {
      if (currentIndex === 1) {
        // For the second slide, wait for the secondSlideDuration
        setTimeout(() => {
          showNextSlide();
        }, secondSlideDuration);
      } else {
        showNextSlide();
      }
    }, autoSlideInterval);
  }
  
  function stopAutoSlide() {
    clearInterval(autoSlideTimer);
  }
  
  function initializeSlider() {
    slider.style.width = `${totalSlides * slideWidth}px`;
    showSlide(currentIndex);
    autoSlide();
  }
  
  prevBtn.addEventListener('click', () => {
    stopAutoSlide();
    showPrevSlide();
    autoSlide();
  });
  
  nextBtn.addEventListener('click', () => {
    stopAutoSlide();
    showNextSlide();
    autoSlide();
  });
  
  initializeSlider();
})();
  </script>
      

</body>
</html>

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Don't forget to share this article! Help us spread the word by clicking the share button below.

We appreciate your support and are committed to providing you valuable and informative content.

We are thankful for your never ending support.

Bootstrap C C++ Cmd CodeIgniter Css Drupal Git Html Java Javascript Jquery Laravel Mongodb Nodejs Php Python React Sql Typescript Wordpress

Custom slider js

Random Code Snippet Queries: Javascript

Latest Code Snippets