HTML or CSS Se Simple Slider Kaise Banaye? आज इस Article में हम एक simple image slider design करना सीखेंगे सिर्फ HTML और CSS की Help से जिसको आप Easily अपनी Website पर लगा सकते है।
आपने देखा होगा बहुत से Website में Carousel Slider javascript से ही लगाए जाते है , जो कभी कभी बहुत परेशान कर देता है खासकर उन लोगों को जिनको Jquery नहीं आती है। पर आज हम आपको सिर्फ Html और Css की Help से Simple Image Slider Design करना सिखाएंगे।
तो चलिए देखते है की HTML or CSS Se Simple Slider Kaise Banaye?
HTML or CSS Se Simple Slider Kaise Banaye?
अब चलिए अब देखते हैं कि इस Slider को Design कैसे किया जाता है ? हम आपको Step-by-Step तरीके से आपकी वेबसाइट के लिए एक खूबसूरत और अच्छा सा Slider Design करना सिखांएगे।
- HTML Se Blinking Text Effect Kaise Banaye ? HTML Blink Tag
- React Native Kya Hai? | What is React Native In Hindi | React Native Tutorial In Hindi
- Flutter Kya Hai? | What is Flutter in Hindi | पूरी जानकारी 2021
- React JS Kya Hai? | React JS Tutorial In Hindi | React JS In Hindi
- Node JS Kya Hai? | Node JS Tutorial In Hindi | Node JS In Hindi
- React Bootstrap Kya Hai? | React Bootstrap Tutorial In Hindi
CSS Slider के लिए HTML Code
सबसे पहले आपको Slider के लिए html code ready करना होता है , तो उसके लिए आपको सबसे पहले एक <div> बनाना होता है और उसमे एक id slider नाम की रखनी होती है। जैसे की आप निचे दिए हुए Code में देख सकते है।
<div id="slider"><br /></div>Slideshow में Images Add
अब हमे Slider में Image Display करानी होती है तो Image add करने के लिए आपको Slider वाले के अंदर अलग अलग <img> tag देके Image देनी होती है। आप जितनी चाहे उतनी Image Add कर सकते है।
<div id="slider"> <br />
<div><br />
<img src="image4.jpg"><br />
</div><br /><div><br />
<img src="image3.jpg"><br />
</div><br />
<div><br />
<img src="image2.jpg"><br />
</div><br /><div><br />
<img src="image1.jpg"><br />
</div> <br />
</div>CSS Code for Image Slider
सारे Images को Add करने के बाद इन Pictures को Slider Effect भी देना होता है जो की हम CSS Code की Help से देते है। आप निचे दिए हुए Code को Use कर सकते है।
div#slider {
overflow: hidden;
margin: auto;
width: 50%;
max-width:700px;
max-height: 400px;
}
div#slider div {
position: relative;
width: 500%;
margin: 0;
left: 0;
font-size: 0;
animation: 20s slider infinite;
}
div#slider div img {
width: 20%;
float: left;
}
@keyframes slider {
0% { left: 0%;}
20% { left: 0%;}
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%;}
75% { left: -300%;}
95% { left: -300%;}
}जरूरत के According Customize
इस Slider की Height और Width Set की जाती है , हमने भी Slider की Height और Width को Set किया हुआ है। हर Website की अलग अलग Requirement होती है तो उसके हिसाब से आप Slider की Height Width Set कर सकते है। और तो और उसकी Speed भी आप अपने हिसाब से Adjust कर सकते है।
Set Height and Width
इसके लिए हम आपको CSS में div#slider Selector की कुछ Properties बता रहे है जिनका Use करके आप Changes कर सकते है।
- width: 50%; – सबसे पहले आपको इसकी percentage में changes करना होगा।
- max-width: 700px; – इस बात का ध्यान रखे हम यहाँ पर maximum width set करते है जिससे की Slider की width को जरुरत से ज्यादा न हो वरना image की quality भी खराब हो जाती है।
- max-height: 400px; – इसी तरह maximum height भी Set करनी होती है।
Set Animation Speed
आप अपने Slider की Speed को भी Change कर सकते है। तो इसके लिए आपको CSS में div#slider div Selector की Animation Property में Changes करना होगा।
animation: 20s slider infinite;Conclusion
इस Tutorial में, हमने आपको बताया है html और css से Simple Slider बनाना सिखाया है। एक एक Step की Help से हमने आपको बताया है उम्मीद है यह लेख आपके लिए Helpful रहा होगा । अगर आपको मन में Slider से Related किसी भी तरह के कोई भी Question है तो आप हमें नीचे Comment कर पूछ सकते है।
