JavaScript कस्टम इमेज स्लाइडर बनाएं: पूर्ण कोड

एक कस्टम इमेज स्लाइडर (कैरोसेल) वेबसाइटों पर छवियों को प्रदर्शित करने का एक लोकप्रिय UI घटक है। यह CSS एनिमेशन और JavaScript लॉजिक को जोड़ता है।

पूर्ण कार्यान्वयन

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> 
    * { box-sizing: border-box; } 
    .slide { display: none; } 
    img { vertical-align: middle; width: 100%; height: 400px; object-fit: cover; } 
    .slideContainer { max-width: 800px; position: relative; margin: auto; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } 
    .prevBtn, .nextBtn { position: absolute; top: 50%; transform: translateY(-50%); width: auto; padding: 16px; background-color: rgba(255,255,0,0.8); color: #320074; font-weight: bold; font-size: 24px; border: none; cursor: pointer; user-select: none; z-index: 10; } 
    .nextBtn { right: 0; } 
    .prevBtn:hover, .nextBtn:hover { background-color: rgba(255,255,0,1); } 
    .caption { color: #fbff09; font-weight: bold; font-family: "Segoe UI", sans-serif; font-size: 25px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; text-shadow: 1px 1px 2px black; } 
    .navDot { cursor: pointer; height: 15px; width: 15px; margin: 0 5px; background-color: #360575; border-radius: 50%; display: inline-block; transition: background-color 0.3s; } 
    .selected, .navDot:hover { background-color: #d9ff00; } 
    .fade { animation: fadeEffect 1s; } 
    @keyframes fadeEffect { from {opacity: 0.4} to {opacity: 1} } 
    @media only screen and (max-width: 450px) { .prevBtn, .nextBtn, .caption { font-size: 16px; } } 
</style> </head> <body> 
<div class="slideContainer"> 
    <div class="slide fade"> 
        <img src="https://images.pexels.com/photos/3540375/pexels-photo-3540375.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" /> 
        <div class="caption">फोटो 1: सुंदर परिदृश्य</div> 
    </div> 
    <div class="slide fade"> 
        <img src="https://images.unsplash.com/photo-1558981001-5864b3250a69?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" /> 
        <div class="caption">फोटो 2: पहाड़</div> 
    </div> 
    <div class="slide fade"> 
        <img src="https://images.unsplash.com/photo-1584910758141-f7993f9e203d?ixlib=rb-1.2.1&auto=format&fit=crop&w=667&q=80" /> 
        <div class="caption">फोटो 3: समुद्र तट</div> 
    </div> 
    <a class="prevBtn" onclick="changeSlides(-1)">❮</a> 
    <a class="nextBtn" onclick="changeSlides(1)">❯</a> 
</div> 
<br /> 
<div style="text-align:center"> 
    <span class="navDot" onclick="currentSlide(1)"></span> 
    <span class="navDot" onclick="currentSlide(2)"></span> 
    <span class="navDot" onclick="currentSlide(3)"></span> 
</div> 
<script> 
    let slideIndex = 1; 
    showSlides(slideIndex); 
    
    function changeSlides(n) { showSlides(slideIndex += n); } 
    function currentSlide(n) { showSlides(slideIndex = n); } 
    
    function showSlides(n) { 
        const slides = document.getElementsByClassName("slide"); 
        const dots = document.getElementsByClassName("navDot"); 
        if (n > slides.length) slideIndex = 1; 
        if (n < 1) slideIndex = slides.length; 
        
        Array.from(slides).forEach(slide => slide.style.display = "none"); 
        Array.from(dots).forEach(dot => dot.className = dot.className.replace(" selected", "")); 
        
        slides[slideIndex - 1].style.display = "block"; 
        dots[slideIndex - 1].className += " selected"; 
    } 
    
    // ऑटो-स्लाइड (वैकल्पिक)
    setInterval(() => changeSlides(1), 5000); 
</script> </body> </html>

विशेषताएं

• पिछला/अगला नेविगेशन तीर बटनों के साथ
• नेविगेशन डॉट्स सीधे स्लाइड पर जाने के लिए
• फेड एनिमेशन CSS के साथ
• कैप्शन सपोर्ट प्रत्येक छवि के लिए
• रिस्पॉन्सिव डिज़ाइन मोबाइल फ्रेंडली
• ऑटो-प्ले वैकल्पिक (5 सेकंड अंतराल)

संवर्द्धन: टच स्वाइप सपोर्ट, कीबोर्ड नेविगेशन (← → कुंजियाँ), लेजी लोडिंग, और थंबनेल नेविगेशन जोड़ें।