5 मिनट में बनायें अपने Website के लिए Simple Image Slider using Pure CSS
आज हम इस article में एक simple image slider design करेंगे जिसे आप अपनी website पर बड़ी आसानी से लगा सकते हैं|
वैसे तो ज्यादातर carousel slider javascript से बनाये जाते हैं लेकिन इस slideshow की सबसे खास बात यह है की इसे बनाने के लिए pure CSS यानि की केवल CSS का उपयोग किया गया है इसमें किसी भी प्रकार की javascript की coding use नही की गयी है|
कई सारे users अपने browser में javascript disable करके रखते हैं ऐसे में pure CSS slider का उपयोग करना काफी फायदेमंद हो सकता है|
Pure CSS Image Slider Demo
इस image slideshow का एक live example आप नीचे देख सकते हैं|
Pure CSS से Image Slider कैसे बनायें
अब चलिए देखते हैं कि इस slider को design कैसे किया जाये | नीचे आप step-by-step तरीके से अपने वेबसाइट के लिए एक खूबसूरत सा slideshow design करना सीखेंगे|
अगर आपको कहीं परेशानी हो तो सबसे नीचे comment box में अपना सवाल पूछ सकते हैं|
तो चलिए शुरू करते हैं इस tutorial को:
Step 1: CSS Slider के लिए HTML Code लिखें
सबसे पहले हमें जिस पेज पर इस CSS slideshow को दिखाना है वहां एक <div> बनाना होगा जिसकी id हमें slider रखनी होगी|
नीचे दिया गया HTML code देखें:
<div id="slider">
</div>Step 2: Slideshow में Images Add करें
अब हमें जिन images को CSS carousel slider में display करना है उन्हें नीचे दिए गये तरीके से slider वाले <div> के अंदर अलग-अलग <div> बना कर <img> tag के जरिये add करना होगा|
<div id="slider">
<div>
<img src="image4.jpg">
</div>
<div>
<img src="image3.jpg">
</div>
<div>
<img src="image2.jpg">
</div>
<div>
<img src="image1.jpg">
</div>
</div>Step 3: CSS Code for Image Slider
हमने सारे images add कर दिए हैं अब हमें इन pictures को slider effect देना है जो की CSS code से किया जा सकता है|
नीचे दिया गया CSS code आप copy करके अपने HTML page के <head> tag के अंदर paste कर दें|
<style type="text/css">
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%;}
}
</style>Step 4: जरूरत के अनुसार Customize करें
हमने पहले से ही इस slider की height और width set किया हुआ है लेकिन जाहिर सी बात है हर वेबसाइट की अलग-अलग requirements होती हैं और आपके website के लिए यदि इसकी size सही न हो तो आप आवश्यकतानुसार इसकी height width में बदलाव कर सकते हैं इसके अलावा आप slideshow की speed भी कम-ज्यादा कर सकते हैं |
Set Height and Width:
इसके लिए आपको CSS में div#slider selector की कुछ properties में नीचे दिए गये अनुसार बदलाव करने होंगे:
- width: 50%; – सबसे पहले इसके percentage में changes करें
- max-width: 700px; – ध्यान रहे हम यहाँ पर maximum width set करेंगे जिससे की इसकी width आवश्यकता से ज्यादा न हो नही तो image की quality भी खराब हो सकती है |
- max-height: 400px; – उसी प्रकार maximum height भी तय करना होगा|
Set Animation Speed:
Slider की speed को भी बदला जा सकता है| इसके लिए CSS में div#slider div selector के animation property में changes करने होंगे|
नीचे आप animation property का code देख सकते हैं जहाँ इसकी value में हमने speed को 20s में specify किया है आप चाहें तो इसे बदल भी सकते हैं|
animation: 20s slider infinite;आज आपने इस tutorial में एक simple pure CSS slider बनाना सीखा आप चाहें तो इसमें कुछ और भी add कर सकते हैं जैसे की image में link डाल सकते हैं, नीचे caption add कर सकते हैं इसके अलावा इसके animation effect को भी बदल सकते हैं|
आगे पढ़ें:
- CSS से Simple Dropdown Navigation Menu कैसे बनायें
- Media Queries से Responsive Website कैसे बनायें
- सिर्फ 7 Steps में सीखें jQuery में Coding करना?
यदि आपको हमारा यह article पसंद आया हो तो आप हमें subscribe जरूर करें, subscribe करने के लिए नीचे newsletter box में अपना email enter करें और submit button press करें|
Website के लिए Popular Post Slider कैसे बनाये,,,इसके बारे में पोस्ट लिखिए Sir
बहुत अच्छी जानकारी दी sir आपने
image ka url kese banaye
Vijesh ji aapko is post me poori jankari mil jayegi – HTML Tutorial in Hindi