Jquery समाचार स्लाइडर। उत्तरदायी स्लाइडर्स का चयन। बहुत बढ़िया jQuery "स्किटर" स्लाइड शो
समय स्थिर नहीं रहता है, और इसके साथ प्रगति होती है। इससे इंटरनेट की विशालता भी प्रभावित हुई। आप पहले से ही देख सकते हैं कि यह कैसे बदलता है दिखावट साइटों और विशेष रूप से लोकप्रिय है अनुकूली डिजाइन... इस संबंध में, अनुकूली साइट स्लाइडर्स बहुत लोकप्रिय और प्रासंगिक हो गए हैं। कई नए हैं उत्तरदायी jquery स्लाइडर्स, दीर्घाओं और हिंडोला।
यदि आप सार्वभौमिक स्थापित करना चाहते हैं स्लाइडर या हिंडोला अपनी वेबसाइट पर आप जा सकते हैं
साइट स्लाइडर्स
1. उत्तरदायी क्षैतिज पोस्ट स्लाइडर
उत्तरदायी क्षैतिज हिंडोला के साथ विस्तृत निर्देश स्थापना पर। यह एक साधारण शैली में बनाया गया है, लेकिन आप इसे अपनी इच्छानुसार स्टाइल कर सकते हैं।
2. Glide.js पर स्लाइडर
यह स्लाइडर किसी भी साइट के लिए उपयुक्त है। यह ओपन सोर्स Glide.js का उपयोग करता है। स्लाइडर के रंग आसानी से बदले जा सकते हैं।
एक सामग्री साइट के लिए उत्तरदायी स्लाइडर्स। इस स्लाइडर का मुख्य आकर्षण छवियों का 3 डी प्रभाव है, साथ ही यादृच्छिक क्रम में उपस्थिति के विभिन्न एनीमेशन हैं।
4. HTML5 कैनवास का उपयोग करके स्लाइडर
इंटरैक्टिव कणों के साथ एक बहुत अच्छा और प्रभावशाली स्लाइडर। यह HTML5 कैनवास का उपयोग करके निष्पादित किया जाता है,
5. स्लाइडर "Morphing छवियाँ"
मोर्फ प्रभाव के साथ स्लाइडर। इस उदाहरण में, स्लाइडर वेब डेवलपर के पोर्टफोलियो या पोर्टफोलियो के रूप में वेब स्टूडियो के लिए अच्छा काम करता है।
6. परिपत्र स्लाइडर
एक फ्लिप प्रभाव के साथ एक सर्कल के रूप में एक स्लाइडर।
7. धुंधला पृष्ठभूमि स्लाइडर
स्विचिंग और पृष्ठभूमि धुंधला के साथ अनुकूली स्लाइडर।
8. अनुकूली फैशन स्लाइडर
सरल, हल्के और उत्तरदायी वेबसाइट स्लाइडर।
9. स्लाइसबॉक्स - jQuery 3 डी छवि स्लाइडर (अपडेट)
स्लाइसबॉक्स का एक अद्यतन संस्करण फ़िक्सेस और नई सुविधाओं के साथ स्लाइडर।
एक लचीली छवि ग्रिड बनाने के लिए एक jQuery प्लगइन जो विभिन्न एनिमेशन और समय का उपयोग करके शॉट्स को स्विच करेगा।
साइट के लिए स्लाइडर्स दूसरा भाग।
11. फ्लेक्सलाइडर
आपकी वेबसाइट के लिए यूनिवर्सल फ्री प्लगइन। यह प्लगइन कई स्लाइडर और हिंडोला विकल्पों के साथ आता है।
12. फोटो फ्रेम
Fotorama- यह यूनिवर्सल प्लगइन... इसकी बहुत सारी सेटिंग्स हैं। सब कुछ जल्दी और आसानी से काम करता है, और पूर्ण स्क्रीन में स्लाइड देखने का विकल्प भी है। स्लाइडर का उपयोग निश्चित आकार और उत्तरदायी दोनों के साथ, थंबनेल के साथ या बिना, परिपत्र स्क्रॉलिंग के साथ, और बहुत कुछ किया जा सकता है। फोटो फ्रेम के आधार पर, आप साइट के लिए दिलचस्प अनुकूली स्लाइडर्स बना सकते हैं।
अनुलेखमैंने कई बार स्लाइडर डाला और मुझे लगता है कि यह सर्वश्रेष्ठ में से एक है
13. थंबनेल के साथ मुफ्त और उत्तरदायी 3 डी गैलरी स्लाइडर।
प्रायोगिक गैलरी स्लाइडर 3DPanelLayout मेष और दिलचस्प एनीमेशन प्रभावों के साथ।
14. css3 पर स्लाइडर
उत्तरदायी स्लाइडर को चिकनी सामग्री प्रवाह और प्रकाश एनीमेशन के साथ css3 का उपयोग करके बनाया गया है।
अद्भुत के साथ एक छवि स्लाइडर है दृश्यात्मक प्रभाव और एनिमेशन।
17. लोचदार
स्लाइड थंबनेल के साथ पूरी तरह उत्तरदायी लोचदार स्लाइडर।
18. भट्ठा
यह css3 एनीमेशन का उपयोग करके एक पूर्ण स्क्रीन उत्तरदायी स्लाइडर है। स्लाइडर दो संस्करणों में बना है और एनीमेशन काफी असामान्य है।
19. अनुकूली फोटो गैलरी प्लस
मैदान मुफ्त स्लाइडरछवियों को अपलोड करने के साथ -गैलरी।
20. वर्डप्रेस के लिए उत्तरदायी स्लाइडर
WP के लिए उत्तरदायी और मुफ्त स्लाइडर।
21. लंबन सामग्री स्लाइडर
लंबन प्रभाव और CSS3 के साथ प्रत्येक तत्व के नियंत्रण के साथ स्लाइडर।
22. संगीत लिंक स्लाइडर
के साथ स्लाइडर खुले स्रोत JPlayer का उपयोग करना। यह स्लाइडर संगीत के साथ एक प्रस्तुति जैसा दिखता है।
साइट के लिए स्लाइडर तीसरा भाग।
23. jmpress.js के साथ स्लाइडर
उत्तरदायी स्लाइडर पर आधारित है jmpress.js और इसलिए कुछ शांत 3 डी स्लाइड प्रभाव के लिए अनुमति देगा।
24. फास्ट हॉवर स्लाइड शो
तेज स्लाइड स्विचिंग के साथ स्लाइड शो। स्लाइड्स होवर पर स्विच करते हैं।
Css3 का उपयोग करके छवियों का संयोजन।
यह उत्तरदायी गैलरी जो स्पर्श उपकरणों के लिए अनुकूलित है।
29. jQuery के साथ मोंटाज
स्क्रीन की चौड़ाई के आधार पर स्वचालित रूप से छवियों की स्थिति। पोर्टफोलियो साइट विकसित करते समय एक बहुत ही उपयोगी और दिलचस्प बात।
33. बहुस्तरीय फोटो-कार्ड।
यह एक स्तरित नक्शा है - एक छवि गैलरी आपको उनके स्थान से संबंधित छवियों को प्रदर्शित करने की अनुमति देती है। यह गूगल मैप्स पर आधारित है। दाईं ओर एक थंबनेल छवि दिखाई देती है जिसे प्रकाश बॉक्स में क्लिक करके देखा जा सकता है।
34. पूर्ण स्क्रीन गैलरी थंबनेल के साथ
थंबनेल और स्लाइड विवरण के साथ उत्तरदायी गैलरी स्लाइडर।
साइट के लिए स्लाइडर लगातार अपडेट किए जाते हैं और उनकी संख्या हर दिन अधिक से अधिक होती जा रही है। यदि आपके पास अपने पसंदीदा स्लाइडर्स हैं या शायद आपको वह नहीं मिला जो आप ढूंढ रहे थे तो टिप्पणियों में लिखें और मैं आपकी मदद करने की कोशिश करूंगा।
हमें स्वचालित स्क्रॉलिंग के साथ एक सरल स्लाइडर की आवश्यकता है। आएँ शुरू करें ...
स्लाइडर ऑपरेशन का विवरण।
स्लाइड्स को लाइन में खड़ा किया जाएगा निश्चित समय स्क्रॉल करेंगे।
लाल फ्रेम स्लाइडर का दृश्यमान हिस्सा दिखाता है।
स्लाइडर के अंत में, आपको पहली स्लाइड को डुप्लिकेट करने की आवश्यकता है। तीसरी स्लाइड से पहली तक स्क्रॉलिंग सुनिश्चित करने के लिए यह आवश्यक है। आपको पिछली स्लाइड को शुरुआत में जोड़ने की आवश्यकता है जो पहली स्लाइड से तीसरी तक पीछे की ओर स्क्रॉल करने में सक्षम है। नीचे दिखाया गया है कि आगे की दिशा में स्लाइडर कैसे काम करता है।
जब स्लाइडर अंतिम छोर पर पहुंच जाता है, तो स्लाइडर की शुरुआत से एक कॉपी तुरंत अंतिम स्लाइड के स्थान पर रखी जाती है। फिर चक्र फिर से दोहराता है। यह एक अंतहीन स्लाइडर का भ्रम पैदा करता है।
HTML मार्कअप
सबसे पहले, चलो स्वचालित स्क्रॉलिंग के साथ एक सरल स्लाइडर बनाते हैं। इसे काम करने के लिए दो कंटेनरों की जरूरत है। पहला स्लाइडर के दृश्यमान क्षेत्र का आकार निर्धारित करेगा, और दूसरा इसमें स्लाइडर को रखने के लिए आवश्यक है। स्लाइडर मार्कअप इस तरह दिखेगा:
स्लाइडर शैलियों
। स्लाइडर-बॉक्स (चौड़ाई: 320px; ऊंचाई: 210px; अतिप्रवाह: छिपा हुआ;)। स्लाइडर (स्थिति: सापेक्ष; चौड़ाई: 10000px; ऊँचाई: 210px;);। स्लाइडर img (फ्लोट: बाएँ; z- सूचकांक: 0;)।। स्लाइडर-बॉक्स कंटेनर स्लाइडर के आयाम सेट करता है। अतिप्रवाह: छिपी हुई संपत्ति उन सभी तत्वों को छिपाती है जो तत्व के अंदर के क्षेत्र में नहीं हैं।
स्लाइडर कंटेनर एक बड़ी चौड़ाई पर सेट है। यह आवश्यक है ताकि सभी स्लाइड इसमें फिट हो जाएं।
स्लाइड्स को फ्लोट का उपयोग करके संरेखित किया जाता है: बाईं संपत्ति।
नीचे स्लाइडर ब्लॉकों का एक योजनाबद्ध लेआउट है।
लिपि
कंटेनर के स्लाइडर मार्जिन-वाम संपत्ति को सुचारू रूप से बदलकर स्लाइड का आंदोलन किया जाएगा।
$ (फ़ंक्शन () (var चौड़ाई \u003d $ ("। स्लाइडर-बॉक्स") .width (); // स्लाइडर की चौड़ाई। अंतराल \u003d 4000; // स्लाइड परिवर्तन अंतराल। $ ("स्लाइडर img: अंतिम") .clone () .prependTo (".slider"); // अंतिम स्लाइड की एक प्रति शुरुआत में लगाई गई है। $ () .eq (1) .clone () .appendTo (".slider"); // पहली स्लाइड की एक कॉपी अंत में रखी गई है। // कंटेनर.स्लाइडर को बाईं ओर एक स्लाइड चौड़ाई में स्थानांतरित किया गया है। setInterval ("एनीमेशन ()", अंतराल); // एनीमेशन () फ़ंक्शन स्लाइड बदलने के लिए चलाया जाता है। )); फ़ंक्शन एनीमेशन () (var मार्जिन \u003d parseInt ($ ("। स्लाइडर") .cs ("मार्जिनलफ्ट")); // ब्लॉक की वर्तमान ऑफसेट। स्लाइडर चौड़ाई \u003d $ ("। स्लाइडर-बॉक्स")। रिचार्ज (), // स्लाइडर की चौड़ाई। slidersAmount \u003d $ ("स्लाइडर") .children () .length; // स्लाइडर में स्लाइड की संख्या। अगर (मार्जिन! \u003d (- चौड़ाई * (slidersAmount- 1))) // यदि वर्तमान स्लाइड अंतिम नहीं है, (मार्जिन \u003d मार्जिन- चौड़ाई; // तब मार्जिन मान स्लाइड की चौड़ाई से कम हो जाता है। ) अन्य ( // यदि अंतिम स्लाइड दिखाई जाती है, $ ("स्लाइडर") .cs ("मार्जिन-बाएं", - चौड़ाई); // फिर स्लाइडर ब्लॉक अपनी मूल स्थिति में लौटता है, मार्जिन \u003d - चौड़ाई * 2; ) $ ("स्लाइडर") .animate ((मार्जिनल: मार्जिन), 1000); // स्लाइडर ब्लॉक को 1 स्लाइड द्वारा बाईं ओर स्थानांतरित कर दिया गया है। } ;परिणाम अनंत ऑटो स्क्रॉलिंग के साथ एक साधारण स्लाइडर है।
1. उत्कृष्ट jQuery स्लाइड शो
बड़े शानदार स्लाइड शो jQuery प्रौद्योगिकियों का उपयोग करना।
2. jQuery प्लगइन "स्केल हिंडोला"
JQuery का उपयोग करके स्केलेबल स्लाइड शो। आप स्लाइड शो के लिए आयाम सेट करने में सक्षम होंगे जो आपको सबसे अच्छा लगता है।
3. jQuery प्लगइन "SlideJS"
पाठ विवरण के साथ छवि स्लाइडर।
4. प्लगइन "JSliderNews"
5.CSS3 jQuery स्लाइडर
जब आप नेविगेशन तीर पर होवर करते हैं, तो अगली स्लाइड का एक गोलाकार थंबनेल दिखाई देता है।
6. अच्छा jQuery प्रस्तुति साइकिल स्लाइडर
छवि लोडिंग संकेतक के साथ jQuery स्लाइडर। स्वचालित स्लाइड परिवर्तन है।
7. jQuery लंबन स्लाइडर प्लगइन
तीन आयामी पृष्ठभूमि प्रभाव के साथ एक स्लाइडर। इस स्लाइडर का मुख्य आकर्षण पृष्ठभूमि गति है, जो कई परतों से बना है, जिनमें से प्रत्येक एक अलग गति से स्क्रॉल करता है। नतीजा वॉल्यूमेट्रिक प्रभाव की नकल है। यह बहुत अच्छा लग रहा है, आप अपने लिए देख सकते हैं। प्रभाव ब्राउज़र में अधिक आसानी से प्रदर्शित होता है जैसे: ओपेरा, गूगल क्रोम, अर्थात।
8. ताजा, हल्के jQuery के स्लाइडर "bxSlider 3.0"
"उदाहरण" अनुभाग में डेमो पृष्ठ पर आप सभी के लिंक पा सकते हैं संभव विकल्प इस प्लगइन का उपयोग कर।
9.jQuery छवि स्लाइडर, "SlideJS" प्लगइन
स्टाइलिश jQuery का स्लाइडर निश्चित रूप से आपकी परियोजना को सजाने में सक्षम होगा।
10. jQuery प्लगइन स्लाइड शो "ईजी स्लाइड" v1.1
प्रयोग करने में आसान JQuery प्लगइन स्लाइड शो बनाने के लिए।
11. प्लगइन "jQuery Slidy"
विभिन्न डिजाइनों में लाइटवेट jQuery प्लगइन। स्वचालित स्लाइड परिवर्तन है।
स्वचालित स्लाइड परिवर्तक के साथ 12.jQuery सीएसएस गैलरी
यदि आगंतुक एक निश्चित समय के भीतर "फ़ॉरवर्ड" या "बैक" तीर पर क्लिक नहीं करता है, तो गैलरी स्वचालित रूप से स्क्रॉल करना शुरू कर देगी।
13. jQuery Nivo स्लाइडर
मान्य कोड के साथ बहुत ही पेशेवर उच्च गुणवत्ता वाले हल्के प्लगइन। कई अलग-अलग स्लाइड संक्रमण प्रभाव हैं।
14. jQuery "MobilySlider" स्लाइडर
ताजा स्लाइडर। विभिन्न छवि परिवर्तन प्रभावों के साथ jQuery स्लाइडर।
15. jQuery Slider j प्लगइन
स्वचालित स्लाइड परिवर्तन के साथ हल्के स्लाइडर।
16. ताजा जावास्क्रिप्ट स्लाइडर
स्वचालित छवि परिवर्तन के साथ स्लाइडर।
स्वचालित स्लाइड परिवर्तन के साथ स्लाइड शो को लागू करने के लिए प्लगइन। थंबनेल छवियों का उपयोग करके प्रदर्शन को नियंत्रित करना संभव है।
jQuery सीएसएस स्लाइडर NivoSlider प्लगइन का उपयोग करके छवियां।
19. jQuery के "jShowOff" स्लाइडर
सामग्री के रोटेशन के लिए प्लगइन। तीन उपयोग के मामले: कोई नेविगेशन (स्लाइड शो प्रारूप में स्वत: परिवर्तन के साथ), बटन के रूप में नेविगेशन, थंबनेल के रूप में नेविगेशन के साथ।
20. प्लगइन "शटर प्रभाव पोर्टफोलियो"
फोटोग्राफी पोर्टफोलियो के लिए ताजा jQuery प्लगइन। गैलरी ने लागू किया दिलचस्प प्रभाव छवियों को बदलें। तस्वीरें एक लेंस शटर के संचालन के समान प्रभाव के साथ एक दूसरे का पालन करती हैं।
21. लाइटवेट जावास्क्रिप्ट सीएसएस स्लाइडर "टाइनीस्लाइडर 2"
जावास्क्रिप्ट और सीएसएस का उपयोग करके एक छवि स्लाइडर का कार्यान्वयन।
22. विस्मयकारी स्लाइडर "Tinycircleslider"
स्टाइलिश गोल स्लाइडर। लाल वृत्त के रूप में स्लाइडर की परिधि के साथ खींचकर छवियों के बीच संक्रमण किया जाता है। यदि आप अपने डिजाइन में गोल तत्वों का उपयोग करते हैं तो पूरी तरह से आपकी साइट में फिट होंगे।
23. jQuery की छवि स्लाइडर
लाइटवेट स्लाइडर किट। स्लाइडर को विभिन्न संस्करणों में प्रस्तुत किया गया है: ऊर्ध्वाधर और क्षैतिज। इसके अलावा, छवियों के बीच विभिन्न प्रकार के नेविगेशन कार्यान्वित किए जाते हैं: "फॉरवर्ड" और "बैक" बटन का उपयोग करके, माउस व्हील का उपयोग करके, स्लाइड पर माउस क्लिक का उपयोग करके।
24. लघुचित्रों वाली गैलरी "स्लाइडर किट"
गैलरी "स्लाइडर किट"। थंबनेल स्क्रॉलिंग को लंबवत और क्षैतिज दोनों तरीके से किया जाता है। छवियों के बीच संक्रमण का उपयोग किया जाता है: माउस व्हील, माउस क्लिक या थंबनेल पर होवर करना।
25. jQuery स्लाइडर किट सामग्री स्लाइडर
JQuery के ऊर्ध्वाधर और क्षैतिज सामग्री स्लाइडर।
26. jQuery स्लाइडर किट
स्वचालित स्लाइड परिवर्तन के साथ स्लाइड शो।
27. हल्के पेशेवर जावास्क्रिप्ट CSS3 स्लाइडर
एक साफ jQuery और CSS3 स्लाइडर 2011 में बनाया गया।
थंबनेल के साथ jQuery स्लाइड शो।
29. एक साधारण jQuery स्लाइड शो
नेविगेशन बटन के साथ स्लाइड शो।
30. बहुत बढ़िया jQuery के "स्किटर" स्लाइड शो
तेजस्वी स्लाइड शो बनाने के लिए jQuery "स्किटर" प्लगइन। प्लगइन 22 (!) छवियों को बदलते समय विभिन्न एनीमेशन प्रभावों का समर्थन करता है। दो स्लाइड नेविगेशन विकल्पों के साथ काम कर सकते हैं: स्लाइड संख्या और थंबनेल। डेमो देखना सुनिश्चित करें, एक बहुत ही उच्च गुणवत्ता का पता लगाएं। उपयोग की गई तकनीकें: CSS, HTML, jQuery, PHP।
31. स्लाइड शो "अजीब"
कार्यात्मक स्लाइड शो। स्लाइड्स हो सकते हैं: सरल चित्र, कैप्शन के साथ चित्र, टूलटिप्स के साथ चित्र, वीडियो क्लिप। आप अपने कीबोर्ड पर तीर, स्लाइड नंबर लिंक और बाएँ / दाएँ कुंजी का उपयोग करके नेविगेट कर सकते हैं। स्लाइड शो को कई संस्करणों में बनाया गया है: लघुचित्रों के साथ और बिना। सभी विकल्पों को देखने के लिए, डेमो पेज के शीर्ष पर स्थित डेमो # 1 - डेमो # 6 लिंक का पालन करें।
छवि स्लाइडर का बहुत मूल डिजाइन, एक प्रशंसक की याद दिलाता है। एनिमेटेड स्लाइड परिवर्तन। तीरों का उपयोग करके छवियों के बीच नेविगेशन किया जाता है। एक स्वचालित बदलाव भी है जो शीर्ष पर स्थित प्ले / पॉज़ बटन का उपयोग करके चालू और बंद किया जा सकता है।
एनिमेटेड jQuery स्लाइडर। ब्राउज़र विंडो के आकार बदलने पर पृष्ठभूमि की छवियां अपने आप बढ़ जाती हैं। विवरण के साथ एक ब्लॉक प्रत्येक छवि के लिए पॉप अप होता है।
34. jQuery और CSS3 में "फ्लक्स स्लाइडर" स्लाइडर
नया jQuery का स्लाइडर। स्लाइड बदलते समय कई शांत एनिमेटेड प्रभाव।
35. jQuery प्लगइन "jSwitch"
एनिमेटेड jQuery गैलरी।
स्वचालित स्लाइड परिवर्तन के साथ jQuery पर आसान स्लाइड शो।
37. प्लगइन का नया संस्करण "स्लाइडडेक 1.2.2"
पेशेवर सामग्री स्लाइडर। स्वचालित स्लाइड परिवर्तन के साथ विकल्प हैं, साथ ही स्लाइड के बीच स्थानांतरित करने के लिए माउस व्हील का उपयोग करने वाला एक विकल्प है।
38. jQuery के सूडो स्लाइडर
JQuery में लाइटवेट इमेज स्लाइडर। बहुत सारे कार्यान्वयन विकल्प हैं: स्लाइड संख्या के संदर्भ के साथ और बिना, छवि के कैप्शन के साथ और बिना छवि परिवर्तन के क्षैतिज और ऊर्ध्वाधर छवि परिवर्तन, विभिन्न छवि परिवर्तन प्रभाव। एक समारोह है स्वचालित परिवर्तन स्लाइड। सभी कार्यान्वयन उदाहरणों के लिंक डेमो पेज पर पाए जा सकते हैं।
39 jQuery CSS3 स्लाइड शो
थंबनेल स्लाइड शो स्वचालित स्लाइड परिवर्तन मोड का समर्थन करता है।
40. jQuery फ्लक्स स्लाइडर
छवियों को बदलने के लिए कई प्रभावों के साथ स्लाइडर।
41. सरल jQuery स्लाइडर
स्टाइलिश jQuery की छवि स्लाइडर।
आपको आगे और पीछे बटन जोड़ने की आवश्यकता है।
ऐसा करने के लिए, आपको पहले लिखे गए कोड को पूरक करना होगा।
नए स्लाइडर के लिए HTML कोड
पूरी स्लाइडर संरचना समान रहेगी। मार्कअप में दो कंटेनर जोड़े जाएंगे, जो बटन की तरह काम करेंगे।
स्लाइडर शैलियों
कंटेनर के सापेक्ष पूर्ण स्थिति के कारण बटन उनकी जगह ले लेंगे।
स्लाइडर-बॉक्स (स्थिति: सापेक्ष: चौड़ाई; 320px; ऊँचाई: 210px; अतिप्रवाह: छिपा हुआ;)। स्लाइडर (स्थिति: सापेक्ष; चौड़ाई: 10000px; ऊँचाई: 210px;) .lider img (float: left); .slider-box .prev, .slider-box .next (स्थिति: निरपेक्ष; शीर्ष: 100px; प्रदर्शन: ब्लॉक; चौड़ाई: 29px; ऊंचाई: 29px; कर्सर: सूचक;) .slider-box .prev (बाएं: 10px; पृष्ठभूमि: url () ../images/slider_controls.png) no-repeat 0 0;) .slider-box .next (दाएं: 10px; पृष्ठभूमि: url (../images/slider_controls.png) no-repeat -29px 0;)
लिपि
स्लाइडर स्वचालित रूप से स्क्रॉल करता है। डिफ़ॉल्ट रूप से, आंदोलन बाएं से दाएं जाता है, लेकिन यदि आवश्यक हो, तो आप पाठ्यक्रम चर का उपयोग करके इसके आंदोलन की दिशा बदल सकते हैं। 1 से -1 तक चर के मूल्य को बदलते समय, स्लाइडर की गति की दिशा बदल जाएगी।
जब स्लाइडर स्लाइडर के भीतर होता है, तो स्लाइडर में छवियां नहीं बदलनी चाहिए। ऐसा क्यों किया जाता है? यह आसान है। यदि माउस कर्सर स्लाइडर पर स्थित है, तो इसका मतलब है कि साइट आगंतुक इसकी सामग्री में रुचि रखता है। इस समय, स्लाइड को स्वचालित रूप से न बदलें।
$ (फ़ंक्शन () (var स्लाइडर \u003d $ ("। स्लाइडर"), स्लाइडरकंटेंट \u003d स्लाइडर.html () // स्लाइडर की सामग्री स्लाइडविथ \u003d $ ("। स्लाइडर-बॉक्स")। रूटर वॉर्थ (), // स्लाइडर की चौड़ाई स्लाइडकाउंट \u003d $ ("। स्लाइडर img") .length // स्लाइड की संख्या prev \u003d $ ("। स्लाइडर-बॉक्स .prev"), // पिछला बटन अगला \u003d $ ("। स्लाइडर-बॉक्स बॉक्स .nev"),। // फॉरवर्ड बटन स्लाइडरइंटरवल \u003d 3300, // स्लाइड परिवर्तन अंतराल चेतन \u003d 1000, // स्लाइड बदलने का समय पाठ्यक्रम \u003d 1, // स्लाइडर आंदोलन की दिशा (1 या -1) मार्जिन \u003d - स्लाइडविदथ; // स्लाइड्स की प्रारंभिक ऑफसेट $ ("स्लाइडर img: अंतिम") .clone () .prependTo (".slider"); // अंतिम स्लाइड की एक प्रति शुरुआत में लगाई गई है। $ ("। स्लाइडर img") .eq (1) .clone () .appendTo (".slider"); // पहली स्लाइड की एक कॉपी अंत में रखी गई है। $ ("स्लाइडर") .cs ("मार्जिन-लेफ्ट", - स्लाइडविथ); // कंटेनर.स्लाइडर को बाईं ओर एक स्लाइड चौड़ाई में स्थानांतरित किया गया है। फंक्शन नेक्लाइड () // एनीमेशन () फ़ंक्शन स्लाइड बदलने के लिए चलाया जाता है। अंतराल \u003d window.setInterval (चेतन, स्लाइडरइंटरवाल); ) फ़ंक्शन चेतन () (यदि (मार्जिन \u003d\u003d - स्लाइडकाउंट * स्लाइडविंड- स्लाइडविथ) () // यदि स्लाइडर अंत तक पहुंच गया है स्लाइडर। एसके (("मार्जिनलफ्ट": - स्लाइडविद)); // तब स्लाइडर ब्लॉक अपनी प्रारंभिक स्थिति में लौटता है मार्जिन \u003d - स्लाइडविद * 2; ) और यदि (मार्जिन \u003d\u003d 0 && पाठ्यक्रम \u003d\u003d - 1) ( // यदि स्लाइडर शुरुआत में है और पीछे बटन दबाया गया है स्लाइडर.केन्स (("मार्जिनलफ्ट": - स्लाइडविद * स्लाइडकाउंट)); // तब स्लाइडर ब्लॉक को उसकी अंतिम स्थिति में ले जाया जाता है मार्जिन \u003d - स्लाइडविंड * स्लाइडकाउंट + स्लाइडविदथ; ) अन्य ( // यदि उपरोक्त स्थितियां काम नहीं करती हैं, मार्जिन \u003d मार्जिन - स्लाइडविद * (कोर्स); // अगली स्लाइड दिखाने के लिए मार्जिन मान सेट किया गया है ) स्लाइडर.अनंत (("मार्जिनलफ्ट": मार्जिन), चेतन समय); // स्लाइडर ब्लॉक को 1 स्लाइड द्वारा बाईं ओर स्थानांतरित कर दिया गया है। ) फंक्शन स्लाइडरटॉप () ( // स्लाइडर को रोकने के लिए कार्य window.clearInterval (अंतराल); ) prev.click (फंक्शन ()) // बैक बटन दबाया var course2 \u003d कोर्स; पाठ्यक्रम \u003d - 1; चेतन (); // कॉल चेतन () फ़ंक्शन पाठ्यक्रम \u003d कोर्स 2; )); next.click (फ़ंक्शन ()) // बैक बटन दबाया अगर (स्लाइडर.आईएस (": एनिमेटेड")) (झूठे लौटें;) // अगर कोई एनीमेशन नहीं होता है var course2 \u003d कोर्स; // अस्थाई चर कोर्स वैल्यू को स्टोर करने के लिए पाठ्यक्रम \u003d 1; // स्लाइडर की दिशा को दाईं से बाईं ओर सेट करता है चेतन (); // कॉल चेतन () फ़ंक्शन पाठ्यक्रम \u003d कोर्स 2; // पाठ्यक्रम चर आरंभिक है )); स्लाइडर .add (अगला) .add (प्रचलित) .हॉवर (फ़ंक्शन ()) // यदि माउस कर्सर स्लाइडर के भीतर है स्लाइडरस्टॉप (); // स्लाइडर को निलंबित करने के लिए स्लाइडरस्टॉप () फ़ंक्शन को कहा जाता है ), अगली स्लाइड); // जब कर्सर स्लाइडर को छोड़ देता है, तो एनीमेशन फिर से शुरू होता है। अगली स्लाइड (); // अगलीस्लाइड () फ़ंक्शन को कॉल करें } ) ;यह बटन "आगे" और "वापस" के साथ इस तरह के एक स्लाइडर निकला।
वर्तमान में, स्लाइडर - हिंडोला - कार्यक्षमता जो आपको बस एक व्यवसाय के लिए एक वेबसाइट, एक वेबसाइट - पोर्टफोलियो या किसी अन्य संसाधन पर होना चाहिए। फुल-स्क्रीन छवि स्लाइडर्स के साथ, क्षैतिज हिंडोला स्लाइडर्स किसी भी वेब डिज़ाइन में अच्छी तरह से फिट होते हैं।
कभी-कभी स्लाइडर को साइट पृष्ठ का एक तिहाई हिस्सा लेना चाहिए। यहाँ हिंडोला स्लाइडर का उपयोग संक्रमण प्रभाव और उत्तरदायी लेआउट के साथ किया जाता है। ई-कॉमर्स साइट व्यक्तिगत पोस्ट या पेज में कई तस्वीरों को दिखाने के लिए एक स्लाइडर हिंडोला का उपयोग करती हैं। स्लाइडर कोड का आपकी आवश्यकताओं के अनुसार स्वतंत्र रूप से उपयोग और बदला जा सकता है।
HTML5 और CSS3 के साथ संयोजन में jQuery का उपयोग करके, आप अपने पृष्ठों को अद्वितीय प्रभाव प्रदान करके और साइट के एक विशिष्ट क्षेत्र में आगंतुकों का ध्यान आकर्षित कर सकते हैं।
चालाक - आधुनिक स्लाइडर प्लगइन - हिंडोला
स्लिक एक फ्रीवेयर jquery प्लगइन है, जिसके डेवलपर्स का दावा है कि उनका समाधान आपके सभी स्लाइडर आवश्यकताओं को पूरा करेगा। उत्तरदायी स्लाइडर - हिंडोला मोबाइल उपकरणों के लिए टाइल मोड में, और डेस्कटॉप संस्करण के लिए ड्रैग और ड्रॉप मोड में काम कर सकता है।
इसमें संक्रमण प्रभाव "फीका", एक दिलचस्प विशेषता "केंद्र में मोड" है, ऑटोस्कोलिंग के साथ छवियों का आलसी लोडिंग है। अद्यतन कार्यक्षमता में स्लाइड और स्लाइड फ़िल्टर जोड़ना शामिल है। सब कुछ ताकि आप अपनी आवश्यकताओं के अनुसार प्लगइन को अनुकूलित कर सकें।
डेमो मोड | डाउनलोड
उल्लू हिंडोला 2.0 - jQuery - स्पर्श के अनुकूल प्लगइन
यह प्लगइन अपने शस्त्रागार में सुविधाओं की एक विस्तृत श्रृंखला है, दोनों शुरुआती और अनुभवी डेवलपर्स के लिए उपयुक्त है। यह हिंडोला स्लाइडर का एक अद्यतन संस्करण है। उनके पूर्ववर्ती का नाम बिल्कुल वही था।
स्लाइडर में समग्र कार्यक्षमता में सुधार करने के लिए कुछ अंतर्निहित प्लगइन्स शामिल हैं। एनीमेशन, वीडियो प्लेबैक, स्लाइडर ऑटोप्ले, आलसी लोडिंग, स्वचालित ऊंचाई समायोजन उल्लू हिंडोला 2.0 की मुख्य विशेषताएं हैं।
प्लगइन पर अधिक सुविधाजनक उपयोग के लिए ड्रैग एंड ड्रॉप सपोर्ट को शामिल किया गया है मोबाइल उपकरण.
प्लगइन मोबाइल उपकरणों के छोटे स्क्रीन पर भी बड़ी छवियों को प्रदर्शित करने के लिए एकदम सही है।
उदाहरण | डाउनलोड
jQuery रजत ट्रैक प्लगइन
काफी छोटा, लेकिन कार्यक्षमता में समृद्ध jquery प्लगइन जो आपको पृष्ठ पर एक स्लाइडर रखने की अनुमति देता है - एक हिंडोला जिसमें एक छोटा कोर होता है और साइट संसाधनों का बहुत अधिक उपभोग नहीं करता है। प्लगइन का उपयोग ऊर्ध्वाधर और क्षैतिज स्लाइडर्स, एनिमेशन प्रदर्शित करने और गैलरी से छवियों के सेट बनाने के लिए किया जा सकता है।
उदाहरण | डाउनलोड
AnoSlide - अल्ट्रा कॉम्पैक्ट उत्तरदायी jQuery स्लाइडर
एक अल्ट्रा कॉम्पैक्ट jQuery स्लाइडर - एक नियमित स्लाइडर की तुलना में बहुत अधिक कार्यक्षमता के साथ एक हिंडोला। इनमें एकल छवि पूर्वावलोकन, बहु-छवि हिंडोला प्रदर्शन और शीर्षक-आधारित स्लाइडर शामिल हैं।
उदाहरण | डाउनलोड
उल्लू हिंडोला - जेकरी स्लाइडर - हिंडोला
उल्लू हिंडोला टच स्क्रीन के लिए समर्थन के साथ खींचें और ड्रॉप स्लाइडर है, आसानी से HTML कोड में एम्बेड किया जा सकता है। प्लगइन सबसे अच्छे स्लाइडर्स में से एक है जो आपको किसी भी विशेष रूप से तैयार मार्कअप के बिना सुंदर हिंडोला बनाने की अनुमति देता है।
उदाहरण | डाउनलोड
3 डी गैलरी - हिंडोला
सीएसएस शैलियों और कुछ जावास्क्रिप्ट कोड के आधार पर 3 डी संक्रमण का उपयोग करता है।
उदाहरण | डाउनलोड
3 डी हिंडोला TweenMax.js और jQuery का उपयोग कर
भव्य 3 डी हिंडोला। ऐसा लगता है कि यह अभी भी एक बीटा संस्करण है, क्योंकि मैंने अभी इसके साथ कुछ समस्याओं की खोज की है। यदि आप अपने स्वयं के स्लाइडर्स के परीक्षण और निर्माण में रुचि रखते हैं, तो यह हिंडोला बहुत मदद करेगा।
उदाहरण | डाउनलोड
बूटस्ट्रैप का उपयोग कर हिंडोला
उत्तरदायी हिंडोला स्लाइडर अपनी नई वेबसाइट के लिए सही बूटस्ट्रैप तकनीक का उपयोग कर।
उदाहरण | डाउनलोड
बूटस्ट्रैप पर आधारित - मूविंग बॉक्स हिंडोला स्लाइडर फ्रेमवर्क
सबसे अधिक पोर्टफोलियो और व्यावसायिक साइटों पर मांग की गई। इस प्रकार के हिंडोला स्लाइडर अक्सर किसी भी प्रकार की साइट पर पाए जाते हैं।
उदाहरण | डाउनलोड
टिनी सर्कल्सलाइडर
यह छोटा स्लाइडर किसी भी स्क्रीन रिज़ॉल्यूशन वाले उपकरणों पर काम करने के लिए तैयार है। स्लाइडर परिपत्र और हिंडोला दोनों मोड में काम कर सकता है। टिनी सर्कल को अन्य समान स्लाइडर्स के विकल्प के रूप में प्रस्तुत किया गया है। बिल्ट-इन सपोर्ट है ऑपरेटिंग सिस्टम IOS और Android।
सर्कुलर मोड में स्लाइडर काफी दिलचस्प लगता है। ड्रैग एंड ड्रॉप सपोर्ट और ऑटोमैटिक स्लाइड स्क्रॉलिंग सिस्टम को उत्कृष्ट रूप से लागू किया गया है।
उदाहरण | डाउनलोड
थम्बेलिना कंटेंट स्लाइडर
शक्तिशाली, उत्तरदायी, हिंडोला स्लाइडर एक आधुनिक वेबसाइट के लिए एकदम सही है। किसी भी उपकरण पर सही ढंग से काम करता है। क्षैतिज और ऊर्ध्वाधर मोड है। इसका आकार केवल 1 KB तक कम कर दिया गया है। अल्ट्रा कॉम्पेक्ट प्लग-इन में उत्कृष्ट चिकनी बदलाव भी हैं।
उदाहरण | डाउनलोड
वाह - स्लाइडर - हिंडोला
50 से अधिक प्रभाव शामिल हैं जो आपकी वेबसाइट के लिए एक मूल स्लाइडर बनाने में आपकी सहायता कर सकते हैं।
उदाहरण | डाउनलोड
BxSlider उत्तरदायी jQuery सामग्री स्लाइडर
यह देखने के लिए ब्राउज़र विंडो का आकार बदलें कि स्लाइडर किस तरह से चलता है। Bxslider 50 से अधिक अनुकूलन विकल्पों के साथ आता है और विभिन्न संक्रमण प्रभावों के साथ इसकी विशेषताओं को दिखाता है।
उदाहरण | डाउनलोड
jCarousel
jCarousel एक jQuery प्लगइन है जो आपकी छवि पूर्वावलोकन को व्यवस्थित करने में आपकी सहायता करेगा। आप उदाहरण में दिखाए गए ढांचे से आसानी से कस्टम हिंडोला चित्र बना सकते हैं। स्लाइडर मोबाइल प्लेटफॉर्म पर काम करने के लिए उत्तरदायी और अनुकूलित है।
उदाहरण | डाउनलोड
स्क्रॉलबॉक्स - jQuery प्लगइन
स्क्रॉलबॉक्स एक स्लाइडर बनाने के लिए एक कॉम्पैक्ट प्लगइन है - हिंडोला या पाठ स्क्रॉलिंग लाइन। मुख्य विशेषताओं में माउस के ऊपर विराम के साथ ऊर्ध्वाधर और क्षैतिज स्क्रॉलिंग शामिल है।
उदाहरण | डाउनलोड
dbpasCarousel
सरल स्लाइडर - हिंडोला। यदि आप एक तेज़ प्लगइन चाहते हैं, तो यह 100% अच्छा है। केवल स्लाइडर के काम करने के लिए आवश्यक बुनियादी कार्यों के साथ आता है।
उदाहरण | डाउनलोड
Flexisel: उत्तरदायी JQuery स्लाइडर प्लगइन - हिंडोला
Flexisel के रचनाकारों ने पुराने स्कूल jCarousel प्लगइन से प्रेरणा ली, जिससे मोबाइल और टैबलेट उपकरणों पर स्लाइडर के सही संचालन पर ध्यान केंद्रित किया गया।
फ़्लेक्सिसेल का उत्तरदायी लेआउट, जब मोबाइल उपकरणों पर काम कर रहा है, तो लेआउट से ब्राउज़र विंडो के आकार में भिन्न होता है। फ्लेक्सीसेल कम और उच्च रिज़ॉल्यूशन स्क्रीन दोनों पर काम करने के लिए पूरी तरह से अनुकूलित है।
उदाहरण | डाउनलोड
इलास्टीसाइड - उत्तरदायी स्लाइडर - हिंडोला
Elastislide डिवाइस के स्क्रीन आकार के लिए पूरी तरह से अनुकूल है। आप किसी विशिष्ट रिज़ॉल्यूशन पर प्रदर्शित करने के लिए न्यूनतम संख्या में चित्र सेट कर सकते हैं। वर्टिकल स्क्रॉलिंग इफ़ेक्ट के साथ एक निश्चित रैपर का उपयोग करके एक छवि गैलरी हिंडोला स्लाइडर के रूप में अच्छी तरह से काम करता है।
उदाहरण | डाउनलोड
FlexSlider 2
Woothemes से स्वतंत्र रूप से पुनर्वितरण स्लाइडर। यह सबसे अच्छा उत्तरदायी स्लाइडर में से एक माना जाता है। प्लगइन में कई टेम्पलेट हैं और नौसिखिए उपयोगकर्ताओं और विशेषज्ञों दोनों के लिए उपयोगी होगा।
उदाहरण | डाउनलोड
कमाल का हिंडोला
कमाल का हिंडोला एक उत्तरदायी jQuery छवि स्लाइडर है। वर्डप्रेस, ड्रुपल और जुमला जैसी कई साइट प्रबंधन प्रणालियों का समर्थन करता है। बिना किसी अनुकूलता के समस्या के Android और IOS और डेस्कटॉप ऑपरेटिंग सिस्टम का भी समर्थन करता है। अंतर्निहित अद्भुत हिंडोला टेम्पलेट आपको ऊर्ध्वाधर, क्षैतिज और परिपत्र मोड में स्लाइडर का उपयोग करने की अनुमति देता है।
उदाहरण | डाउनलोड