kodepilot/slider.html

<div class="slider-container">
  <div class="slider-wrapper">
    <div class="slider-track" id="sliderTrack">
      <div class="slide"></div>
      <div class="slide"></div>
      <div class="slide"></div>
      <div class="slide"></div>
    </div>
  </div>

  <button class="nav-button prev-btn" id="prevBtn"></button>
  <button class="nav-button next-btn" id="nextBtn"></button>

  <div class="dots-container" id="dotsContainer"></div>
</div>

<style>
    .slider-container {
        margin: 0 auto; 
        max-width: 800px;
        width: 100%;
        position: relative;
    }

    .slider-wrapper {
        overflow: hidden;
        border-radius: 16px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }

    .slider-track {
        display: flex;
        transition: transform 0.5s ease;
    }

    .slide {
        min-width: 100%;
        height: 400px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .slide:nth-child(1) {
        background-image: url('https://images.unsplash.com/photo-1557804506-669a67965ba0?w=800&h=400&fit=crop&crop=entropy&cs=tinysrgb');
    }

    .slide:nth-child(2) {
        background-image: url('https://images.unsplash.com/photo-1542744094-24638eff58bb?w=800&h=400&fit=crop&crop=entropy&cs=tinysrgb');
    }

    .slide:nth-child(3) {
        background-image: url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=400&fit=crop&crop=entropy&cs=tinysrgb');
    }

    .slide:nth-child(4) {
        background-image: url('https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=400&fit=crop&crop=entropy&cs=tinysrgb');
    }

    /* Navigation buttons */
    .nav-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: white;
        border: none;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #333;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
        z-index: 10;
    }

    .nav-button:hover {
        background: #f8f9fa;
        transform: translateY(-50%) scale(1.1);
    }

    .prev-btn {
        left: 20px;
    }

    .next-btn {
        right: 20px;
    }

    .nav-button::before {
        content: '';
        width: 8px;
        height: 8px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
    }

    .prev-btn::before {
        transform: rotate(-135deg);
        margin-left: 2px;
    }

    .next-btn::before {
        transform: rotate(45deg);
        margin-right: 2px;
    }

    /* Dots indicator */
    .dots-container {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 30px;
    }

    .dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #ccc;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .dot.active {
        background: #667eea;
        transform: scale(1.2);
    }

    .dot:hover {
        background: #999;
    }

    @media (max-width: 768px) {
        .slide {
            height: 300px;
        }

        .nav-button {
            width: 40px;
            height: 40px;
            font-size: 16px;
        }

        .prev-btn {
            left: 10px;
        }

        .next-btn {
            right: 10px;
        }
    }
</style>


<script>
  function initSlider() {
    class SimpleSlider {
      constructor() {
        this.track = document.getElementById('sliderTrack');
        this.slides = document.querySelectorAll('.slide');
        this.prevBtn = document.getElementById('prevBtn');
        this.nextBtn = document.getElementById('nextBtn');
        this.dotsContainer = document.getElementById('dotsContainer');

        this.currentIndex = 0;
        this.totalSlides = this.slides.length;

        this.init();
      }

      init() {
        this.createDots();
        this.updateSlider();
        this.bindEvents();
        this.startAutoPlay();
      }

      createDots() {
        for (let i = 0; i < this.totalSlides; i++) {
          const dot = document.createElement('div');
          dot.classList.add('dot');
          if (i === 0) dot.classList.add('active');
          dot.addEventListener('click', () => this.goToSlide(i));
          this.dotsContainer.appendChild(dot);
        }
      }

      updateSlider() {
        const translateX = -this.currentIndex * 100;
        this.track.style.transform = `translateX(${translateX}%)`;

        const dots = this.dotsContainer.querySelectorAll('.dot');
        dots.forEach((dot, index) => {
          dot.classList.toggle('active', index === this.currentIndex);
        });
      }

      nextSlide() {
        this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
        this.updateSlider();
      }

      prevSlide() {
        this.currentIndex = this.currentIndex === 0 ? this.totalSlides - 1 : this.currentIndex - 1;
        this.updateSlider();
      }

      goToSlide(index) {
        this.currentIndex = index;
        this.updateSlider();
      }

      startAutoPlay() {
        setInterval(() => {
          this.nextSlide();
        }, 4000);
      }

      bindEvents() {
        this.nextBtn.addEventListener('click', () => this.nextSlide());
        this.prevBtn.addEventListener('click', () => this.prevSlide());

        let startX = 0;
        this.track.addEventListener('touchstart', (e) => {
          startX = e.touches[0].clientX;
        });

        this.track.addEventListener('touchend', (e) => {
          const endX = e.changedTouches[0].clientX;
          const diff = startX - endX;

          if (Math.abs(diff) > 50) {
            if (diff > 0) this.nextSlide();
            else this.prevSlide();
          }
        });
      }
    }

    new SimpleSlider();
  }
</script>