Background for Sideshow in CSS

<div class="progress-bar">
  <div class="progress"></div>
</div>

<div class="slideshow">
  <div class="slide slide-1">
    <div class="content">
      <div class="content-box">
        <div class="slide-number">Slide 1 of 8</div>
        <h1>Gradient Waves</h1>
        <p>Beautiful flowing gradients that create a smooth, dynamic background perfect for modern presentations.</p>
        <a href="#" class="btn">Learn More</a>
      </div>
    </div>
  </div>

  <div class="slide slide-2">
    <div class="content">
      <div class="content-box">
        <div class="slide-number">Slide 2 of 8</div>
        <h1>Geometric Patterns</h1>
        <p>Sharp, modern geometric shapes that add visual interest and professionalism to your slides.</p>
        <a href="#" class="btn">Discover</a>
      </div>
    </div>
  </div>

  <div class="slide slide-3">
    <div class="content">
      <div class="content-box">
        <div class="slide-number">Slide 3 of 8</div>
        <h1>Radial Burst</h1>
        <p>Eye-catching radial gradients that draw focus to your central message with pulsing energy.</p>
        <a href="#" class="btn">Explore</a>
      </div>
    </div>
  </div>

  <div class="slide slide-4">
    <div class="content">
      <div class="content-box">
        <div class="slide-number">Slide 4 of 8</div>
        <h1>Diagonal Stripes</h1>
        <p>Clean diagonal patterns that add movement and direction to your presentation design.</p>
        <a href="#" class="btn">View More</a>
      </div>
    </div>
  </div>

  <div class="slide slide-5">
    <div class="content">
      <div class="content-box">
        <div class="slide-number">Slide 5 of 8</div>
        <h1>Polka Dots</h1>
        <p>Playful dotted patterns that bring a friendly, approachable feel to your slides.</p>
        <a href="#" class="btn">Get Started</a>
      </div>
    </div>
  </div>

  <div class="slide slide-6">
    <div class="content">
      <div class="content-box">
        <div class="slide-number">Slide 6 of 8</div>
        <h1>Circular Gradient</h1>
        <p>Sophisticated multi-layered gradients that create depth and visual harmony.</p>
        <a href="#" class="btn">See Details</a>
      </div>
    </div>
  </div>

  <div class="slide slide-7">
    <div class="content">
      <div class="content-box">
        <div class="slide-number">Slide 7 of 8</div>
        <h1>Wave Lines</h1>
        <p>Organic wave patterns that add fluidity and natural movement to your presentation.</p>
        <a href="#" class="btn">Learn More</a>
      </div>
    </div>
  </div>

  <div class="slide slide-8">
    <div class="content">
      <div class="content-box">
        <div class="slide-number">Slide 8 of 8</div>
        <h1>Mesh Gradient</h1>
        <p>Complex multi-point gradients that create stunning, colorful backgrounds with depth.</p>
        <a href="#" class="btn">Finish</a>
      </div>
    </div>
  </div>
</div>

<div class="controls">
  <div class="dot active" data-slide="1"></div>
  <div class="dot" data-slide="2"></div>
  <div class="dot" data-slide="3"></div>
  <div class="dot" data-slide="4"></div>
  <div class="dot" data-slide="5"></div>
  <div class="dot" data-slide="6"></div>
  <div class="dot" data-slide="7"></div>
  <div class="dot" data-slide="8"></div>
</div>

    * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            overflow: hidden;
            height: 100vh;
        }

        .slideshow {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            animation: slideshow 40s infinite;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .slide:nth-child(1) { animation-delay: 0s; }
        .slide:nth-child(2) { animation-delay: 5s; }
        .slide:nth-child(3) { animation-delay: 10s; }
        .slide:nth-child(4) { animation-delay: 15s; }
        .slide:nth-child(5) { animation-delay: 20s; }
        .slide:nth-child(6) { animation-delay: 25s; }
        .slide:nth-child(7) { animation-delay: 30s; }
        .slide:nth-child(8) { animation-delay: 35s; }

        @keyframes slideshow {
            0% { opacity: 0; transform: scale(1); }
            6.25% { opacity: 1; transform: scale(1.05); }
            12.5% { opacity: 1; transform: scale(1); }
            18.75% { opacity: 0; transform: scale(0.95); }
            100% { opacity: 0; }
        }

        /* Slide 1: Gradient Waves */
        .slide-1 {
            background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
            animation: gradientShift 15s ease infinite;
        }

        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        /* Slide 2: Geometric Shapes */
        .slide-2 {
            background: #f093fb;
            background-image: 
                linear-gradient(30deg, #f5576c 12%, transparent 12.5%, transparent 87%, #f5576c 87.5%),
                linear-gradient(150deg, #f5576c 12%, transparent 12.5%, transparent 87%, #f5576c 87.5%),
                linear-gradient(30deg, #f5576c 12%, transparent 12.5%, transparent 87%, #f5576c 87.5%),
                linear-gradient(150deg, #f5576c 12%, transparent 12.5%, transparent 87%, #f5576c 87.5%);
            background-size: 80px 140px;
            background-position: 0 0, 0 0, 40px 70px, 40px 70px;
        }

        /* Slide 3: Radial Burst */
        .slide-3 {
            background: radial-gradient(circle at center, #4facfe 0%, #00f2fe 50%, #0093E9 100%);
            animation: radialPulse 8s ease-in-out infinite;
        }

        @keyframes radialPulse {
            0%, 100% { background-size: 100% 100%; }
            50% { background-size: 150% 150%; }
        }

        /* Slide 4: Diagonal Stripes */
        .slide-4 {
            background: repeating-linear-gradient(
                45deg,
                #43e97b,
                #43e97b 40px,
                #38f9d7 40px,
                #38f9d7 80px
            );
        }

        /* Slide 5: Dots Pattern */
        .slide-5 {
            background-color: #fa709a;
            background-image: radial-gradient(circle, #fee140 15%, transparent 15%);
            background-size: 60px 60px;
        }

        /* Slide 6: Circular Gradient */
        .slide-6 {
            background: 
                radial-gradient(circle at 20% 50%, rgba(48, 207, 208, 0.5) 0%, transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(51, 8, 103, 0.5) 0%, transparent 50%),
                linear-gradient(135deg, #30cfd0 0%, #330867 100%);
        }

        /* Slide 7: Wave Lines */
        .slide-7 {
            background: #ff6b6b;
            background-image: 
                repeating-radial-gradient(circle at 0 0, transparent 0, #ff6b6b 40px, transparent 80px),
                repeating-linear-gradient(#4ecdc455, #4ecdc4);
        }

        /* Slide 8: Mesh Gradient */
        .slide-8 {
            background: 
                radial-gradient(at 40% 20%, #a8edea 0%, transparent 50%),
                radial-gradient(at 80% 0%, #fed6e3 0%, transparent 50%),
                radial-gradient(at 0% 50%, #ffeaa7 0%, transparent 50%),
                radial-gradient(at 80% 50%, #fd79a8 0%, transparent 50%),
                radial-gradient(at 0% 100%, #6a11cb 0%, transparent 50%),
                radial-gradient(at 80% 100%, #2575fc 0%, transparent 50%);
        }

        .content {
            position: relative;
            z-index: 10;
            text-align: center;
            padding: clamp(20px, 5vw, 60px);
            max-width: 1200px;
            animation: contentFade 2s ease-out;
        }

        @keyframes contentFade {
            0% { opacity: 0; transform: translateY(30px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .content-box {
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(20px);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 24px;
            padding: clamp(30px, 5vw, 60px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        h1 {
            font-size: clamp(32px, 8vw, 72px);
            font-weight: 900;
            color: #fff;
            margin-bottom: clamp(12px, 2vw, 20px);
            text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
            line-height: 1.1;
        }

        .slide-number {
            display: inline-block;
            font-size: clamp(18px, 3vw, 24px);
            background: rgba(255, 255, 255, 0.2);
            padding: clamp(8px, 1.5vw, 12px) clamp(16px, 2.5vw, 24px);
            border-radius: 50px;
            color: #fff;
            font-weight: 700;
            margin-bottom: clamp(16px, 3vw, 24px);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.3);
        }

        p {
            font-size: clamp(16px, 2.5vw, 22px);
            color: #fff;
            line-height: 1.8;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            margin-bottom: clamp(20px, 3vw, 30px);
        }

        .btn {
            display: inline-block;
            padding: clamp(12px, 2vw, 16px) clamp(24px, 4vw, 40px);
            background: rgba(255, 255, 255, 0.9);
            color: #000;
            text-decoration: none;
            border-radius: 50px;
            font-weight: 700;
            font-size: clamp(14px, 2vw, 18px);
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .btn:hover {
            background: #fff;
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        }

        .controls {
            position: fixed;
            bottom: clamp(20px, 4vw, 40px);
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: clamp(8px, 1.5vw, 12px);
            z-index: 100;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            padding: clamp(10px, 2vw, 16px);
            border-radius: 50px;
            border: 2px solid rgba(255, 255, 255, 0.2);
        }

        .dot {
            width: clamp(10px, 2vw, 14px);
            height: clamp(10px, 2vw, 14px);
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid transparent;
        }

        .dot:hover {
            background: rgba(255, 255, 255, 0.8);
            transform: scale(1.2);
        }

        .dot.active {
            background: #fff;
            transform: scale(1.3);
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
        }

        .progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: rgba(255, 255, 255, 0.2);
            z-index: 1000;
        }

        .progress {
            height: 100%;
            background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
            width: 0%;
            animation: progress 40s linear infinite;
        }

        @keyframes progress {
            0% { width: 0%; }
            100% { width: 100%; }
        }

        @media (max-width: 768px) {
            .content-box {
                padding: clamp(20px, 5vw, 30px);
            }
        }

     const dots = document.querySelectorAll('.dot');
        const totalSlides = 8;
        const slideDuration = 5000; // 5 seconds per slide
        let currentSlide = 0;

        function updateActiveDot() {
            dots.forEach((dot, index) => {
                if (index === currentSlide) {
                    dot.classList.add('active');
                } else {
                    dot.classList.remove('active');
                }
            });
        }

        function autoPlay() {
            currentSlide = (currentSlide + 1) % totalSlides;
            updateActiveDot();
        }

        // Auto-advance slides
        setInterval(autoPlay, slideDuration);

        // Manual navigation
        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                currentSlide = index;
                updateActiveDot();
            });
        });