fadein fadeout slider

by oktaviardi pratama

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="slider-container">
    <div class="slider">
      <div class="slide active">
        <img src="slide1.jpg" alt="Slide 1">
      </div>
      <div class="slide">
        <img src="slide2.jpg" alt="Slide 2">
      </div>
      <div class="slide">
        <img src="slide3.jpg" alt="Slide 3">
      </div>
    </div>
    <div class="thumbnails">
      <div class="thumbnail active">
        <img src="thumb1.jpg" alt="Thumbnail 1">
      </div>
      <div class="thumbnail">
        <img src="thumb2.jpg" alt="Thumbnail 2">
      </div>
      <div class="thumbnail">
        <img src="thumb3.jpg" alt="Thumbnail 3">
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

CSS

/* styles.css */

.slider-container {
  position: relative;
}

.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  height:100px;
  background-color:red;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s;
}

.slide.active {
  opacity: 1;
}

.thumbnails {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.thumbnail {
  margin: 0 10px;
  cursor: pointer;
  background-color:#ccc;align-content;
  padding:5px;
}

.thumbnail img {
  width: 100px;
  height: auto;
  opacity: 0.5;
  transition: opacity 0.5s;
}

.thumbnail.active img {
  opacity: 1;
}

JavaScript

// script.js

$(document).ready(function () {
  const slides = $('.slide');
  const thumbnails = $('.thumbnail');

  thumbnails.click(function () {
    const index = $(this).index();
    slides.removeClass('active');
    thumbnails.removeClass('active');
    slides.eq(index).addClass('active');
    thumbnails.eq(index).addClass('active');
  });

  function autoSlide() {
    const activeSlide = $('.slide.active');
    const activeThumbnail = $('.thumbnail.active');
    const nextSlide = activeSlide.next().length ? activeSlide.next() : slides.first();
    const nextThumbnail = activeThumbnail.next().length ? activeThumbnail.next() : thumbnails.first();

    activeSlide.removeClass('active');
    activeThumbnail.removeClass('active');
    nextSlide.addClass('active');
    nextThumbnail.addClass('active');
  }

  setInterval(autoSlide, 3000); // Auto slide every 3 seconds
});