Slick Slider Tutorial Hindi (Add Slick Slider CDN In html 2022)

दोस्तों अगर आपने HTML Basic सिख लिया है तो आपके मन में एक इच्छा और भी होगी की अब html में advance Level की वेबसाइट केसे बनाई जाये, ये सवाल जायज भी है |

इस question का answer आपको आज मिलेगा Slick Slider Tutorial Hindi के इस आर्टिकल में, आप पूरा ब्लॉग पढ़े और step by step follow करे आपका काम 2 मिनट में आसानी से complete हो जायेगा |

हम आज इस आर्टिकल में पढ़ेगे की Slick Slider को CDN से केसे add करे और Slick Slider की फाइल्स को सेव करके केसे add करे अपनी वेबसाइट में |

इसलिए Slick slider का ये आर्टिकल अंत तक ज़रूर पढ़े ताकि कुछ नया सिख पाएँ |

Slick Slider क्या है ? (What is slick slider)

स्लिक slider को अपनी html की वेबसाइट में add करने से पहले यह जानना जरूरी है की स्लिक slider होता क्या है?, और इसका use क्यों करे और कहा पर करे ?

स्लिक slider एक प्रकार से स्लाइडर है जेसे आपने नाम सुना होगा owl carousal का जो हमने पिछले आर्टिकल में पढ़ा था | owl carousal की तरह ही स्लिक slider है |

आसान शब्दों में कहे तो, कोई भी इमेज हो या फिर कोई भी text हो जिसको other resource से left या right खिसकाया जाये उसे ही स्लाइडर कहते है |

उसी प्रकार स्लिक slider है, बस फर्क सिर्फ इतना ही है की कुछ स्लाइडर को control हम अपने तरीके से कर सकते है और कुछ स्लाइडर को हम अपने तरीके से control नही कर सकते है | अब आपके मन में ये सवाल आया होगा की स्लिक slider को ही क्यों use करे? और भी तो स्लाइडर है जिन्हें हम use कर सकते है |

स्लिक slider काफी बड़ी लाइब्रेरी है और इसका use हम html में तो करते ही है, लेकिन html के साथ-साथ magneto, shoplify और WordPress (wordpress में स्लिक slider की plugin का भी use कर सकते है ) में भी कर सकते हैं |

स्लिक slider का use हम कही भी कर सकते है और इसका सबसे बड़ा benefit यह है की इसको हम अपने हिसाब से control कर सकते है |

एक बोनस point और है इसको कोई भी device में responsive कर सकते है बड़े ही आसानी से, बस इसी कारण स्लिक slider आज की डेट में काफी popular हो गया है |

अब तक हमें ये तो मालूम है की स्लिक slider क्या है और इसको हम क्यों use करे | अब एक सवाल और है की स्लिक slider को कोनसी जगह पर लगाये ?

स्लाइडर को उसी जगह पर लगाना चाहिए जहा हमे वर्टीकल (top to bottom) scroll नही चाहिए हॉरिजॉन्टल (left to right) scroll चाहिए उस जगह पर स्लाइडर सबसे बढिया काम आएगा |

एक उदहारण से समझते है = मान लीजिये आपकी वेबसाइट में कोई पेज पर 5 या इससे भी ज्यादा इमेज है और आप चाहते है की एक के बाद एक इमेज दिखाई देनी चाहिए यूजर को तो उस जगह पर स्लाइडर का अहम रोल बन जाता है और वेबसाइट का look भी professional बन जाता है |

Slick Slider को कैसे use करे ?

How to use slick slider in a website

slick slider को use करने के 2 रास्ते है पहला है CDN source और दूसरा है की आप slick की फाइल्स को अपने लेपटोप या डेस्कटॉप में सेव करे और फिर सेव की गयी फाइल्स को आप अपने html में add करे | हम इस आर्टिकल में slick slider CDN के बारे में बात करेंगे |

सबसे पहले आपको slick slider की official वेबसाइट पर जाना होगा | वेबसाइट open होते ही आपको कुछ इस तरह से screen दिखाई देगी |

Slick slider

इसके बाद आपको scroll करते करते वेबसाइट के middle area में आना होगा और आपको कुछ इस तरह से कंटेंट देखने को मिलेगा,

Slick slider

आप इसके अलावा और भी आर्टिकल पढ़ सकते है जो आपके काफी ज्यादा काम आएँगे |

  1. HTML क्या है ?
  2. Programming language क्या है ?

इसमें साफ़ साफ़ लिखा हुवा है slick slider CDN use करने के लिए आपको slick की CSS और JS फाइल को add करना होगा आपके html मै, तोह आप इसकी CSS और JS फाइल को add करे अपने html में

// Add slick.css and slick-theme.css in your <head>

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet">

// Add slick.js before your closing <body> tag, after jQuery (requires jQuery library)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>

इस कोड में हमने सबसे पहले slick slider की CSS के CDN लिंक को add किया है और उसके बाद में हमने jQuery की library को add किया है, जो स्लाइडर के लिए जरूरी है | और लास्ट में हमने slick slider की JS add की है | अब इतना काम होने के बाद हमको html का फोर्मेट भी सेट करना होगा जो की हम इस तरह से सेट कर सकते है |

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

इस तरह से स्लाइडर का html सेट करना होगा | यानि आपको कोई भी image या कंटेंट slide करवाना हो तो उसके बाहर आपको एक कस्टम क्लास डालनी होगी और उस क्लास के अंदर अपना कंटेंट डालना होगा |

इतना काम करने के बाद script भी add करनी पड़ेगी | वेसे तोह script में थोड़े बहुत बदलाव होते रहते हैं स्लाइडर के अनुसार तो आप slick slider के डेमो और डेमो की script आप देख सकते हैं official वेबसाइट पर |

मैंने एक डेमो बनाया है जिसकी CSS और html व script सेव कर रहा हु आप चाहें तोह इसे try भी कर सकते है |

अगर आप ये html, css और js use करते है तो आपका आउटपुट कुछ इस तरह से आएगा | आप अपने तरीके से इसे बदल भी सकते है |

Slick Slider क्या है?

slick-slider-output

स्लिक slider एक jQuery की plugin है जो किसी भी html element को left to right या right to left move करवा सकती है |
स्लिक slider plugin मोबाइल friendly, full customizable है |

Slick Slider में column gap कैसे बढ़ाएँ?

column gap बढानें के लिए आपको slider की setting में centerPadding: ‘100px’ add करनीं होगी आप जितनीं padding add करेंगें उसके अनुसार कॉलम के बिच में gap बढ़ेगा |

Slick Slider में Arrow और Dot कैसे add करें?

Arrow add करनें के लिए आपको slider की setting में arrows: true, करना होगा और Dot add करनें के लिए आपको dots: true, करना होगा |

Slick Slider में center mode कैसे enable करें?

center mode enable करनें के लिए आपको slider setting में code लिखना है centerMode: true,
इस code को लिखनें के बाद slider में center mode की क्लास add हो जाएगी और आप उस क्लास पर CSS कर सकते हैं |

Conclusion

आज के आर्टिकल slick slider में आपनें सिखा की slick slider क्या है और इसे कैसे इस्तेमाल करें अपनीं वेबसाइट में, तो आशा करता हूँ दोस्तों आपको आज का आर्टिकल पसंद आया होगा और आपने कुछ नया सिखा होगा | अगर कुछ नया सिखा है तो इस आर्टिकल को अपनें दोस्तों के साथ share जरुर करें |

अगर इसके अलावा आपके ओर भी सवाल हैं तो आप नीचे कॉमेंट ज़रूर करें |

धन्यवाद…

Leave a Comment