होमCodeScrolling/slider HTML-CSS code...

Scrolling/slider HTML-CSS code for images and texts in hindi

WhatsApp Channel Join Now
Telegram Group Join Now

Namaste dosto kya aap chahate hain, ki aapki website me Image slider ho. taki aap bahut si photos/images ko horizontal scrolling kiya ja sake. so chaliye iske liye hum ynha css code or html code ko kaise use karna hain, ye bataunga.

CSS code scrolling or slider photos in hindi

इससे पहले आपको अपनी website में के कोड में <style> के ठीक आगे नीचे दिया गया css code copy करके पेस्ट कर दीजिए। यदि आपको सीएसएस का अच्छा ज्ञान है तो इसमें कुछ बदलाव भी कर सकते हैं अगर आपको थोड़ा भी सी एस एस के बारे में नहीं पता तो इसको बिना बदले ही अपने site के code में जाकर पेस्ट कर दें।

CSS code  for scrolling or slider of photos in hindi
image scroller with photo number

Note: wordpress ke liye bahut safe Lagane Hote Hain Jin ki madad se CSS code ko ham Hamari website Mein Dal sakte hain. .


.slider {
  width: 300px;
  text-align: center;
  overflow: hidden;
}

.slides {
  display: flex;
  
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  
  
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  
  /*
  scroll-snap-points-x: repeat(300px);
  scroll-snap-type: mandatory;
  */
}
.slides::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.slides::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
  background: transparent;
}
.slides > div {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 300px;
  height: 300px;
  margin-right: 50px;
  border-radius: 10px;
  background: #eee;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.5s;
  position: relative;
  
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 100px;
}
.slides > div:target {
/*   transform: scale(0.8); */
}
.author-info {
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 0.75rem;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
}
.author-info a {
  color: white;
}
img {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slider > a {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 0 0.5rem 0;
  position: relative;
}
.slider > a:active {
  top: 1px;
}
.slider > a:focus {
  background: #000;
}

/* Don't need button navigation */
@supports (scroll-snap-type) {
  .slider > a {
    display: none;
  }
}

अब, आप जहां पर भी कुछ फोटोस या कुछ टेक्स्ट का स्लाइड बनाना चाहते हैं। जिन्हें horizontal swipe ya scroll करके ही next or previous किया जा सके। नीचे दिए गए अनुसार HTML Code तैयार करें

फोटोज का स्लाइड कैसे बनाये html से?

  • सबसे पहले एक div बनाये जिसमे class=”slider” लगाए
  • इसी div में जितनी फ़ोटो हैं उतनई ही id बनाये कुछ इस प्रकार <a href=”#slide-1“>1</a>
  • अगर आपकी 5 फ़ोटो हैं तो लगातार 5 ऐसी id बनानी हैं जिसमे 1 की जगह फ़ोटो का नंबर रखे।
  • सभी id के बाद फिर एक div सेक्शन चालू करें इसका बजी class= “slider” ही रखे।
  • दूसरे वाले div में आपको अपनी सभी image का div तैयार करना हैं। ओर जिस इमेज को जिस नम्बर पर रखना हैं उसकी div को उसी नबर वाली id लगा दे।
  • जैसे no 2 वाली photo के लिए div कुछ इस प्रकार होगा : <div id=”slide-2“> <img src=”https://-your-image-url.jpg” style=”width:100%”> </div>
  • अब आप भी इसी तरीके से सभी फोटो के लिए स्लाइडबार वाला सेक्शन तैयार हो जाएगा जिसमें आपकी सभी फोटो को स्क्रॉल करके देखा जा सकेगा।

यदि आपको ऊपरवाला तरीका समझ नहीं आ रहा तो नीचे दिए गए एचटीएमएल कोड को देखकर समझने की कोशिश करें। आप चाहो तो इसे कॉपी करके इसमें दिए गए इमेज लिंक को हटाकर खुद का इमेज की लिंक पेस्ट कर दें। और फिर उस कोड को अपनी वेबसाइट के किसी भी पोस्ट या html section में इस्तेमाल करें।

<div class="slider">
  
  <a href="#slide-1">1</a>
  <a href="#slide-2">2</a>
  <a href="#slide-3">3</a>
  <a href="#slide-4">4</a>
  <a href="#slide-5">5</a>

  <div class="slides">


    <div id="slide-1">
// replace your image URL below 
     <img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%">
</div>


    <div id="slide-2">
      <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%">
    </div>


    <div id="slide-3">
      Your text
    </div>
    <div id="slide-4">
      4
    </div>
    <div id="slide-5">
      5
    </div>
  </div>
</div>
Explore topic:
WhatsApp Channel Join Now
Telegram Group Join Now
Google News google News Follow

Related Post

What is java Applet in hindi? (जावा एपलेट क्या हैं)

नमस्कार दोस्तों टेक्निकल परिवार में आपका स्वागत है हिंदी में जावा प्रोग्रामिंग लैंग्वेज सीखने के लिए हमारे बहुत सारे पेज बनाए हैं हुए हैं...

Java I/O (Input/Output) in Hindi

Java I/O (Input/Output) in Hindi (Java Input Output) जावा प्रोग्रामिंग भाषा में प्रयोग किए जाने वाले एक तरह का डेटा है जो प्रोग्राम से...

HTML मे Image Add कैसे करे? How to Insert Images with HTML in hindi

आपने कभी भी वेबसाइट देखा होगा तो उसने पाया होगा कि उस वेबसाइट में फोटो लगा है जो फोटो उस website को और भी...

जावा कीवर्ड इन हिंदी | Reserved keywords in java in hindi

जावा प्रोग्रामिंग का यह "keyword" टॉपिक को समझना बहुत जरूरी होता है इसके बिना हमारी कोडिंग बिल्कुल अधूरी है। इस पेज पर हम जानेंगे...

special links

क्या आप भारतीय हैं?