फ्रेमवर्क 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	धीरे लोड हो रहा है इसका उपयोग मल्टीमीडिया फ़ाइल के लिए किया जा सकता है, जिसे लोड होने में समय लगता है।