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 में जाकर पेस्ट कर दें।
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>