Image Slider html or css

Image Slider with Font Awesome Arrows - Complete Hindi Tutorial

प्रोजेक्ट का परिचय (Project Introduction) यह एक responsive image slider है जो pure CSS और Font Awesome icons का उपयोग करके बनाया गया है। इसमें JavaScript का बिल्कुल भी उपयोग नहीं किया गया है। यह slider radio buttons और CSS selectors के combination से काम करता है।

🔹 Universal Selector (*)

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

• * → सब elements पर लागू होगा।
• margin: 0; → सभी डिफॉल्ट बाहर की स्पेस हटा दी।
• padding: 0; → सभी डिफॉल्ट अंदर की स्पेस हटा दी।
• box-sizing: border-box; → जब भी width/height देंगे तो padding और border उसी में गिने जाएंगे (extra नहीं जुड़ेंगे)।

🔹 Slider Container

.slider-container {
  width: 100%;
  max-width: 800px;
  margin: 50px auto;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

• width: 100% → container पूरी स्क्रीन जितना चौड़ा हो सकता है।
• max-width: 800px; → लेकिन 800px से ज़्यादा नहीं।
• margin: 50px auto; → ऊपर-नीचे 50px space और auto से बीच में center।
• position: relative; → इसके अंदर absolute वाले elements (arrows, dots) इसी को reference मानेंगे।
• overflow: hidden; → स्लाइड्स बाहर निकलें तो दिखें नहीं।
• border-radius: 10px; → कोनों को गोल कर दिया।
• box-shadow: ... → हल्की shadow effect दी।

🔹 Slides Wrapper

.slides {
  display: flex;
  width: 300%;
  transition: transform 0.5s ease-in-out;
}

• display: flex; → सारे slides एक लाइन में side-by-side।
• width: 300%; → 3 slides हैं, इसलिए कुल width = 3 गुना।
• transition: transform 0.5s ease-in-out; → स्लाइड बदलते समय smooth animation।

🔹 Individual Slide

.slide {
  width: 33.333%;
  flex-shrink: 0;
}

• width: 33.333% → हर slide का size = container का 1/3 (क्योंकि 3 slides हैं)।
• flex-shrink: 0; → flexbox shrink नहीं करेगा, size fix रहेगा।

🔹 Slide Images

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

• width: 100%; → image slide की पूरी चौड़ाई ले।
• height: 400px; → fix height।
• object-fit: cover; → image को कट-छांटकर भी पूरा भरेगा, खिंचाव नहीं होगा।

🔹 Dots Navigation

.dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

• position: absolute; → container के अंदर fix हो जाएगा।
• bottom: 15px; left: 50%; transform: translateX(-50%) → बीच में center में dots।
• display: flex; gap: 10px; → dots को side by side रखा और बीच में space दी।

.dot {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}
.dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

• width, height → छोटा circle।
• background-color: ...0.5 → हल्का सफेद।
• border-radius: 50% → पूरा गोल।
• cursor: pointer; → hover करने पर pointer बने।
• transition → hover पर smooth color change।

🔹 Arrows

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  cursor: pointer;
  user-select: none;
  border-radius: 5px;
  transition: background-color 0.3s;
  text-decoration: none;
}
.arrow:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

• position: absolute; top: 50%; transform: translateY(-50%) → arrows vertically center।
• font-size: 30px; → बड़ा arrow।
• background-color: rgba(0,0,0,0.5); → पीछे हल्का काला बैकग्राउंड।
• padding: 10px; border-radius: 5px; → अंदर space और गोल कोने।
• cursor: pointer; → क्लिक करने जैसा लगे।
• user-select: none; → text select न हो।

.left-arrow {
  left: 10px;
}
.right-arrow {
  right: 10px;
}

• Left वाला बाएं रहेगा, Right वाला दाएं।

🔹 Radio Buttons (Logic)

input[type="radio"] {
  display: none;
}

• Radio buttons छुपा दिए गए (लेकिन काम कर रहे हैं)।

🔹 Slide Switching Logic

#slide1:checked ~ .slides {
  transform: translateX(0);
}
#slide2:checked ~ .slides {
  transform: translateX(-33.333%);
}
#slide3:checked ~ .slides {
  transform: translateX(-66.666%);
}

👉 जब कोई radio button select होता है तो .slides container को translateX किया जाता है, जिससे सही slide दिखे।

🔹 Active Dot

#slide1:checked ~ .dots label[for="slide1"],
#slide2:checked ~ .dots label[for="slide2"],
#slide3:checked ~ .dots label[for="slide3"] {
  background-color: #fff;
}

👉 जिस slide पर हो वही dot सफेद दिखेगा (active indicator)।

🔹 Arrow Visibility Logic

#slide1:checked ~ .arrow.left-arrow[for="slide3"],
#slide1:checked ~ .arrow.right-arrow[for="slide2"],
#slide2:checked ~ .arrow.left-arrow[for="slide1"],
#slide2:checked ~ .arrow.right-arrow[for="slide3"],
#slide3:checked ~ .arrow.left-arrow[for="slide2"],
#slide3:checked ~ .arrow.right-arrow[for="slide1"] {
  display: block;
}

.arrow {
  display: none;
}

👉 Default में सभी arrows hidden रहते हैं (display: none;) 👉 लेकिन जब कोई slide select हो तो उससे related arrow visible कर दिए जाते हैं।

✅ इस तरह पूरा slider pure CSS से काम करता है।

FUll Code Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Slider with Font Awesome Arrows</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .slider-container {
        width: 100%;
        max-width: 800px;
        margin: 50px auto;
        position: relative;
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }

      .slides {
        display: flex;
        width: 300%;
        transition: transform 0.5s ease-in-out;
      }

      .slide {
        width: 33.333%;
        flex-shrink: 0;
      }

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

      .dots {
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 10px;
      }

      .dot {
        width: 12px;
        height: 12px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.3s;
      }

      .dot:hover {
        background-color: rgba(255, 255, 255, 0.8);
      }

      .arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 30px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 10px;
        cursor: pointer;
        user-select: none;
        border-radius: 5px;
        transition: background-color 0.3s;
        text-decoration: none;
      }

      .arrow:hover {
        background-color: rgba(0, 0, 0, 0.8);
      }

      .left-arrow {
        left: 10px;
      }

      .right-arrow {
        right: 10px;
      }

      input[type="radio"] {
        display: none;
      }

      #slide1:checked ~ .slides {
        transform: translateX(0);
      }

      #slide2:checked ~ .slides {
        transform: translateX(-33.333%);
      }

      #slide3:checked ~ .slides {
        transform: translateX(-66.666%);
      }

      #slide1:checked ~ .dots label[for="slide1"],
      #slide2:checked ~ .dots label[for="slide2"],
      #slide3:checked ~ .dots label[for="slide3"] {
        background-color: #fff;
      }

      #slide1:checked ~ .arrow.left-arrow[for="slide3"],
      #slide1:checked ~ .arrow.right-arrow[for="slide2"],
      #slide2:checked ~ .arrow.left-arrow[for="slide1"],
      #slide2:checked ~ .arrow.right-arrow[for="slide3"],
      #slide3:checked ~ .arrow.left-arrow[for="slide2"],
      #slide3:checked ~ .arrow.right-arrow[for="slide1"] {
        display: block;
      }

      .arrow {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="slider-container">
      <input type="radio" name="slider" id="slide1" checked />
      <input type="radio" name="slider" id="slide2" />
      <input type="radio" name="slider" id="slide3" />

      <div class="slides">
        <div class="slide">
          <img src="https://picsum.photos/800/400?random=1" alt="Slide 1" />
        </div>
        <div class="slide">
          <img src="https://picsum.photos/800/400?random=2" alt="Slide 2" />
        </div>
        <div class="slide">
          <img src="https://picsum.photos/800/400?random=3" alt="Slide 3" />
        </div>
      </div>

      <label for="slide3" class="arrow left-arrow"
        ><i class="fas fa-chevron-left"></i
      ></label>
      <label for="slide1" class="arrow left-arrow"
        ><i class="fas fa-chevron-left"></i
      ></label>
      <label for="slide2" class="arrow left-arrow"
        ><i class="fas fa-chevron-left"></i
      ></label>
      <label for="slide2" class="arrow right-arrow"
        ><i class="fas fa-chevron-right"></i
      ></label>
      <label for="slide3" class="arrow right-arrow"
        ><i class="fas fa-chevron-right"></i
      ></label>
      <label for="slide1" class="arrow right-arrow"
        ><i class="fas fa-chevron-right"></i
      ></label>

      <div class="dots">
        <label for="slide1" class="dot"></label>
        <label for="slide2" class="dot"></label>
        <label for="slide3" class="dot"></label>
      </div>
    </div>
  </body>
</html>