फ्रेमवर्क 7 - स्विपर स्लाइडर

विवरण

Swiper स्लाइडर सबसे शक्तिशाली और आधुनिक टच स्लाइडर है और बहुत सारी विशेषताओं के साथ फ्रेमवर्क 7 में आता है।

निम्नलिखित एचटीएमएल लेआउट में स्विपर स्लाइडर दिखाया गया है -

<!-- Container class for slider -->
<div class = "swiper-container">
   <!-- Wrapper class for slider -->
   <div class = "swiper-wrapper">
      <!-- Slides -->
      <div class = "swiper-slide">Slide 1</div>
      <div class = "swiper-slide">Slide 2</div>
      <div class = "swiper-slide">Slide 3</div>
      ... other slides ...
   </div>
   
   <!-- Define pagination, if it is required -->
   <div class = "swiper-pagination"></div>
</div>

निम्न वर्ग का उपयोग स्विपर स्लाइडर के लिए किया जाता है -

  • swiper-container - यह मुख्य स्लाइडर कंटेनर के लिए एक आवश्यक तत्व है और इसका उपयोग स्लाइड और पृष्ठांकन के लिए किया जाता है।

  • Swiper-wrapper - यह अतिरिक्त आवरण स्लाइड के लिए एक आवश्यक तत्व है।

  • swiper-slide - यह एक एकल स्लाइड तत्व है और इसमें कोई भी HTML शामिल हो सकता है।

  • swiper-pagination - यह पैगमेंट की गोलियों के लिए वैकल्पिक है और ये अपने आप बन जाते हैं।

आप अपने संबंधित तरीकों का उपयोग करके जावास्क्रिप्ट के साथ स्वीपर को इनिशियलाइज़ कर सकते हैं -

myApp.swiper(swiperContainer,parameters)

या

new Swiper(swiperContainer, parameters)

दोनों विधियों का उपयोग स्लाइडर को विकल्पों के साथ आरंभ करने के लिए किया जाता है।

ऊपर दिए गए तरीकों में निम्नलिखित पैरामीटर हैं -

  • swiperContainer- यह एक स्विपर कंटेनर का HTMLElement या स्ट्रिंग है और इसकी आवश्यकता है।

  • parameters - ये वैकल्पिक तत्व होते हैं जिनमें स्विपर पैरामीटर के साथ ऑब्जेक्ट होता है।

उदाहरण के लिए -

var mySwiper = app.swiper('.swiper-container', {
   speed: 400,
   spaceBetween: 100
});

यह संभव है कि एक swiper की आवृत्ति तक पहुँच सके और स्लाइडर के कंटेनर की swiper संपत्ति में निम्न HTML तत्व हो -

var mySwiper = $$('.swiper-container')[0].swiper;

// Here you can use all slider methods like:
mySwiper.slideNext();

आप निम्न तालिका में अलग-अलग तरीकों और प्रकारों को देख सकते हैं -

S.No Swiper प्रकार और विवरण
1 पृष्ठन के साथ डिफ़ॉल्ट स्विपर

यह एक आधुनिक टच स्लाइडर है और डिफ़ॉल्ट रूप से स्विपर क्षैतिज रूप से स्वाइप करता है।

2 ऊर्ध्वाधर स्विपर

यह एक डिफ़ॉल्ट स्वीपर के रूप में भी काम करता है लेकिन यह लंबवत रूप से स्वाइप करता है।

3 स्लाइड्स के बीच अंतरिक्ष के साथ

इस स्विपर का उपयोग दो स्लाइड के बीच स्थान देने के लिए किया जाता है।

4 एकाधिक स्वाइपर्स

यह स्वीपर एक पृष्ठ पर एक से अधिक स्वाइपर्स का उपयोग करता है।

5 नेस्टेड स्वीपर

यह ऊर्ध्वाधर और क्षैतिज स्लाइड का संयोजन है।

6 कस्टम नियंत्रण

यह किसी भी स्लाइड को चुनने या स्वाइप करने के लिए कस्टम नियंत्रण के लिए उपयोग किया जाता है।

7 धीरे लोड हो रहा है

इसका उपयोग मल्टीमीडिया फ़ाइल के लिए किया जा सकता है, जिसे लोड होने में समय लगता है।