swiper slider एक ऐसा tool बन गया है जो की आजकल लगभग वेब application में देखने को मिल जाएगा जिसका सबसे बड़ा कारण है कि यह लगभग वो सभी functionality देता है जो की एक developer को चाहिए |
आज के इस आर्टिकल में हम बात करने वाले हैं swiper slider की डिटेल में और साथ में आपको यह भी बताया जाएगा कि आप इसे HTML से लेकर react project में कैसे add कर सकते हैं |
Swiper Slider क्या है?
Swiper Slider एक लाइब्रेरी है जैसे की आपने पहले कभी नाम सुना होगा Slick Slider या Owl carousal का उसी प्रकार की यह लाइब्रेरी है लेकिन उनसे काफ़ी advance feature आपको देखने को मिल जाएँगे जो कि एक यूजर और डेवलपर के लिए काफ़ी frindely हैं |
Swiper को एक मॉडर्न और Mobile Touch स्लाइडर कहा जाता है जो कि एक javascript की लाइब्रेरी है, यह अभी के समय में काफ़ी पॉपुलर, lightweight, और flexible mobile-friendly स्लाइडर की library मानी जा रही है, जो की अलग-अलग स्क्रीन में भी अच्छे से काम करती है जिससे responsive की समस्या दूर हो जाती है |
Swiper Slider के feature
दोस्तों काफ़ी feature हैं जो की एक डेवलपर की समस्या और टाइम को बचाने के लिए बनाए गए है इनके बारे में डिटेल में आप नीचे पढ़ सकते हैं |
| Feature | Detail |
|---|---|
| Touch Support | मोबाइल और टेबलेट के लिए इसका इस्तेमाल किया जाता है | |
| Mouse Drag Support | Desktop के लिए यह काफ़ी useful feature है | |
| Autoplay | स्लाइडर अपने आप चलाने के लिए |
| Loop | अगर slider last slide तक पहुँचता है तो फिर से यह पहली slide से start हो जाएगा | |
| Responsive | अलग-अलग devices के लिए slide को सेट कर सकते हैं | |
| Layouts | इसमें अलग-अलग प्रकार के layout मिलते हैं जैसे की Multiple slides, Centered slides और Vertical slides |
| Effects | अलग-अलग प्रकार के effect मिलते हैं जैसे की Slide effect, Fade effect, Cube effect, Coverflow effect और Flip effect |
| Controls | Pagination ओर Navigation के Controls काफ़ी अच्छे मिलते हैं जिसमें customizable चीजें भी आप कर सकते हैं | |
| Loading | Slider में images पर आप lazy loading लगा सकते है जिससे पेज स्पीड में improvement काफ़ी होता है | |
| Accessibility | इसमें screen reader के लिए बेहतर सपोर्ट और keyboard navigation होता है | |
| Mode | कई options मिलते हैं जैसे की free mode और grab cursor |
| Nested | इसमें आप एक slider के अंदर दूसरा slider लगा सकते है आसानी से | |
| Styles | swiper slider में आप अपने design के अनुसार ख़ुद की custom style add कर सकते हैं काफ़ी आसानी से | |
Swiper Slider का इस्तेमाल
swiper slider का इस्तेमाल करना काफ़ी आसान है लेकिन कुछ बातें आपको ध्यान में रखनी होती हैं तो आइए सबसे पहले हम जानते हैं कि HTML में Swiper Slider का इस्तेमाल कैसे करते हैं |
इसके लिए सबसे पहले आपके HTML का layout कुछ ऐसा होना चाहिए की आपको जो content slider करवाना है उस content का parent element एक होना चाहिए |
<div class="swiper-parent">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
<div class="slide">Slide 4</div>
<div class="slide">Slide 5</div>
</div>
इसके बाद आपको jQuery add करनी है अपने पेज में जिसके लिए आप CDN का इस्तेमाल कर सकते हैं |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
jQuery add करने के बाद आपको swiper slider की library add करनी है उसके लिए भी आप CDN का इस्तेमाल कर सकते हैं और ध्यान रहे की पहले jQuery add करनी है और उसके नीचे swiper slider की library add करनी है |
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
swiper slider की library add करने के बाद आपको head tag में इसकी CSS भी add करनी होगी |
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
इतना सब करने के बाद आपको slider चलाने के लिए थोड़ी jQuery लिखनी होगी जो की सबसे library के CDN के नीचे लिखनी हैं |
<script>
const swiper = new Swiper('.swiper-parent', {
// Slider Setting
loop: true,
navigation: true,
});
</script>
इतना अगर आप करते हैं तो आपका slider बड़े ही smooth तरीक़े से चलेगा बाक़ी आप इसके official website पर demo देखकर अपनी ज़रूरत की हिसाब से slider लगा सकते हैं |