क्षैतिज सामग्री स्लाइडर. स्क्रॉलिंग स्लाइडर (हिंडोला)

18 जनवरी 2013 से ठीक करें:
टैब स्विच करते समय या ब्राउज़र विंडो को छोटा करते समय ऑटो-स्क्रॉलिंग के साथ एक बग को ठीक किया गया। आगे/पीछे के लिंक पर नाम विशेषता की उपस्थिति के लिए चेक हटा दिया गया।
स्रोत संग्रह अद्यतन कर दिया गया है.
19 जून 2013 से ठीक करें:
ऑटोस्क्रॉलिंग समर्थन के बिना, एक पेज पर कई स्लाइडर्स का उपयोग करने की क्षमता जोड़ी गई, इसलिए स्रोत संग्रह और डेमो पेज अपडेट नहीं किए गए थे।
उस बग को ठीक किया गया जहां चित्र तीरों के नीचे दिखाई देते थे
मैंने उत्तर दिया कि प्ले बटन दबाए बिना ऑटोस्क्रॉलिंग कैसे शुरू करें।

स्लाइडर (सामग्री [छवि, पाठ, वीडियो] रोटेटर) हर प्रोजेक्ट में मौजूद होते हैं। वास्तव में इंटरनेट पर बहुत सारे प्रोजेक्ट हैं जहां आप अपनी पसंद के अनुसार लगभग किसी भी स्लाइडर प्लगइन को डाउनलोड और चुन सकते हैं। हालाँकि, ऐसी स्थितियाँ होती हैं जब किसी प्रोजेक्ट से स्लाइडर को कनेक्ट करना, जिसका न्यूनतम संस्करण 10Kb या अधिक होता है, अव्यावहारिक होता है।

मान लीजिए कि आपको एक स्लाइडर बनाने की ज़रूरत है जिसमें कैप्शन के साथ 15-20 तस्वीरें या कुछ वीडियो हों। ऐसे मामलों के लिए यह पाठ आपके लिए उपयोगी होगा, जहां आप सीखेंगे कि क्षैतिज स्क्रॉलिंग के साथ स्लाइडर कैसे बनाया जाए, और एक गैर-अनुकूलित स्क्रिप्ट का वजन 2Kb से कम होगा। नीचे दिए गए "डेमो" बटन पर क्लिक करके, आप पाठ का प्रदर्शन देख सकते हैं, और "स्रोत" बटन पर क्लिक करके, आपको पाठ का एक संग्रह (टिप्पणियों के साथ) प्राप्त होगा, वैसे, यह जानने के लिए कि इसे कैसे बनाया जाए थंबनेल पर एक सरल स्लाइडर, पढ़ें।

सार को समझने के लिए, मैं कहूंगा कि पाठ के अंत में हमें निम्नलिखित कार्यों के साथ एक स्लाइडर मिलेगा:

• स्लाइड को बाएँ-दाएँ स्विच करना
• स्लाइडर स्वचालित संचालन मोड, स्टार्ट-पॉज़ बटन
• स्लाइडों की असीमित संख्या

स्लाइडर लेआउट

स्लाइडर मार्कअप बहुत सरल है, हमें चाहिए:

• सामान्य कंटेनर (स्लाइडर),
• नेविगेशन के लिए तीन कंटेनर (पिछली/अगली स्लाइड (नेवी) के लिए दो बटन और स्टार्ट/पॉज़ बटन के लिए एक बटन (ऑटो)),
• सभी स्लाइडों के लिए कंटेनर (स्लाइड-सूची),
• सभी स्लाइडों का आवरण (स्लाइड-रैप)।

...स्लाइड-आइटम कंटेनर में स्लाइडें होंगी पहली स्लाइड स्लाइडर शैलियाँ

स्लाइडर को स्टाइल करने के लिए, आइए स्टाइल फ़ाइल में कुछ नियम जोड़ें।

/* रैपिंग रीसेट सेट करें */ .क्लियर (मार्जिन-टॉप: -1px; ऊंचाई: 1px; क्लियर:दोनों; ज़ूम: 1; ) /* स्लाइडर */ .स्लाइडर ( /* कंटेनर चौड़ाई */ चौड़ाई: 900px; / * ऊपर और नीचे बाहरी मार्जिन */ मार्जिन: 50px ऑटो; /* नेवी लिंक के लिए आंतरिक मार्जिन */ पैडिंग: 0 30px; /* पोजिशनिंग */ स्थिति: सापेक्ष /* फॉरवर्ड/बैक बटन पर डबल-क्लिक करने से सभी स्लाइडर का चयन हो जाता है तत्व। , इसलिए हम इसे रोकते हैं */ .स्लाइडर::-मोज़-चयन (पृष्ठभूमि: पारदर्शी; रंग: #fff; पाठ-छाया: कोई नहीं; ) .स्लाइडर::चयन (पृष्ठभूमि: पारदर्शी; रंग: #fff; पाठ)। -छाया: कोई नहीं; ) .स्लाइड-सूची (स्थिति: सापेक्ष; मार्जिन: 0; पैडिंग: 0; /* सीमाओं से परे जो जाता है उसे छिपाएं */ अतिप्रवाह: छिपा हुआ; ) .स्लाइड-रैप (स्थिति: सापेक्ष; बायां: 0पीएक्स) ; शीर्ष: 0; /* स्लाइडर रैपर की अधिकतम संभव चौड़ाई */ चौड़ाई: 10000000px; .स्लाइड-आइटम ( /* स्लाइड चौड़ाई */ चौड़ाई: 280px; /* पैडिंग */ पैडिंग: 10px; /* रैपिंग */ फ़्लोट: बाएँ; .स्लाइड-शीर्षक (/* फ़ॉन्ट */फ़ॉन्ट: बोल्ड 16पीएक्स मोनोस्पेस;

/* इंगित करें कि तत्व एक ब्लॉक तत्व है */ डिस्प्ले: ब्लॉक; )

और आगे/पीछे तथा प्रारंभ/रोकने वाले नेविगेशन बटनों के लिए शैलियाँ भी महत्वहीन नहीं हैं

/* आगे/पीछे नेविगेशन */ .नेवी (/* पूर्ण स्थिति */ स्थिति: पूर्ण; शीर्ष: 0; z-सूचकांक: 1; ऊंचाई: 100%; /* तत्व की चौड़ाई */ चौड़ाई: 30px; कर्सर: सूचक; ) .पिछली-स्लाइड (बाएं: 0; पृष्ठभूमि: #dbdbdb url(bg/left-arrow.png) 11px 40% नो-रिपीट; ) .अगली-स्लाइड (दाएं: 0; पृष्ठभूमि: #dbdbdb url(bg/दाएं) -एरो.png) 13px 40% नो-रिपीट; ) .navy.disable (पृष्ठभूमि: #dbdbdb; ) /* नेविगेशन प्रारंभ/रोकें */ .auto (चौड़ाई: 7px; ऊंचाई: 11px; कर्सर: सूचक; मार्जिन: 10px ऑटो; ) .प्ले ( बैकग्राउंड: यूआरएल(बीजी/प्ले.पीएनजी) सेंटर नो-रिपीट; ) .पॉज़ ( बैकग्राउंड: यूआरएल(बीजी/पॉज.पीएनजी) सेंटर नो-रिपीट; )

याद रखें कि स्लाइडों के प्रदर्शन को ओवरलैप करने के लिए बटनों की पृष्ठभूमि सामान्य पृष्ठभूमि के समान ही सेट की गई है। अब बारी है jQuery स्क्रिप्ट की, जो हम करेंगे।

एक स्क्रिप्ट लिखना

jQuery(document).ready(function())( function htmSlider())( /* निम्नलिखित पैरामीटर सेट करें */ /* स्लाइडर रैपर */ var स्लाइडरैप = ​​jQuery("।स्लाइड-रैप"); /* आगे/पीछे और प्रारंभ बटन /रोकें */ var अगलालिंक = jQuery("।अगली-स्लाइड"); var prevLink = jQuery("।prev-slide"); पैडिंग के साथ चौड़ाई */ var स्लाइडविड्थ = jQuery("।slide-item").outerWidth(); /* स्लाइडर ऑफसेट */ var स्क्रॉलस्लाइडर = स्लाइडरैप.पोजीशन().बाएं - स्लाइडविड्थ अगली स्लाइड के लिंक द्वारा .क्लिक(फ़ंक्शन())( if(!slideWrap.is(":animated")) ( स्लाइडरैप.एनिमेट((बाएं: स्क्रॉलस्लाइडर), 500, फ़ंक्शन())( स्लाइडरैप .फाइंड(" .स्लाइड-आइटम:पहला ") .appendTo(slideWrap) .parent() .css(("left": 0)); )); ) )); /* पिछली स्लाइड के लिंक पर क्लिक करें */ prevLink.click( function()) ( if(!slideWrap.is(":animated")) ( स्लाइडरैप .css(("left": स्क्रॉलस्लाइडर)) .find("।slide-item:last") .prependTo(slideWrap) .parent() .animate ((बाएं: 0), 500);

) ));

/* स्लाइडर को स्वचालित रूप से स्क्रॉल करने के लिए फ़ंक्शन */ फ़ंक्शन ऑटोप्ले())( if(!is_animate)( is_animate = true; स्लाइडरैप.एनिमेट((बाएं: स्क्रॉलस्लाइडर), 500, फ़ंक्शन())( स्लाइडरैप .फाइंड("।स्लाइड -item:first ") .appendTo(slideWrap) .parent() .css(("left": 0)); is_animate = false; )); ) ) /* लिंक पर क्लिक प्रारंभ/रोकें */ playLink.click( function())( if(playLink.hasClass("play"))( /* बटन की क्लास को पॉज क्लास में बदलें */ playLink.removeClass("play").addClass("pause"); /* जोड़ें आगे/पीछे बटनों के लिए एक वर्ग जो उन्हें छुपाता है */ jQuery('navy').addClass('disable'); /* एक वेरिएबल के माध्यम से ऑटोप्ले() फ़ंक्शन को प्रारंभ करें ताकि आप इसे बाद में अक्षम कर सकें */ टाइमर = सेटइंटरवल(ऑटोप्ले, 1000) अन्यथा ( playLink.removeClass( "pause").addClass("play"); /* फॉरवर्ड/बैक बटन दिखाएँ */ jQuery("।navy").removeClass("अक्षम"); / * ऑटोप्ले() फ़ंक्शन को अक्षम करें */ क्लियरइंटरवल (टाइमर));

• ) /* स्लाइडर फ़ंक्शन प्रारंभ करें */ htmSlider(); ));
• स्पष्टीकरण:
• सबसे पहले, हम कोड के साथ काम करना आसान बनाने के लिए आवश्यक वेरिएबल बनाते हैं:
• स्लाइडर आवरण

स्लाइड की चौड़ाई

सबसे पहले, मैं बस नेक्स्टलिंक बटन पर क्लिक को एनिमेटेड करता हूं: एनिमेट() फ़ंक्शन का उपयोग करके, हम स्क्रॉलस्लाइडर मान द्वारा बाईं ओर जाने वाले स्लाइडर रैपर को एनिमेट करते हैं। इस घटना के घटित होने के बाद, स्लाइडों की सूची में पहली स्लाइड को सूची के अंत में ले जाएँ, और स्लाइड सूची रैपर की बाईं स्थिति को 0 पर सेट करें। लेकिन यह पता चला कि यदि आप जल्दी से इस पर 10 बार क्लिक करते हैं, तो 10 हलचलें होंगी, और यह एक वास्तविक बग है।

पिछली स्लाइड बटन पर क्लिक करने पर स्लाइडर एनीमेशन इवेंट थोड़ा अलग होता है:

पहला कदम बाएं स्क्रॉलस्लाइडर पर स्लाइड रैपर की स्थिति निर्धारित करना और रैपर में अंतिम स्लाइड को सूची की शुरुआत में ले जाना है, लेकिन एनीमेशन के बिना ध्यान दें; दूसरा चरण स्लाइडर रैपर की स्थिति को 0 के मान में बदलने के लिए चेतन करना है।

यह इतना आसान है)

स्लाइडर का ऑटो-स्क्रॉल फ़ंक्शन उस एनीमेशन के समान है जो तब होता है जब आप अगली स्लाइड बटन पर क्लिक करते हैं, कुछ खास नहीं, मैंने इसे jQuery फ़ंक्शंस - सेटइंटरवल और क्लियरइंटरवल का सही ढंग से उपयोग करने के लिए जोड़ा है - वे वास्तव में अच्छे हैं)

जब आप स्वचालित स्लाइडर बटन पर क्लिक करते हैं, तो निम्नलिखित घटनाएँ घटित होती हैं:

यदि बटन में प्ले क्लास सेट है, तो इस क्लास को पॉज़ में बदलें, आगे/पीछे बटन छुपाएं [ताकि वे स्लाइडर के संचालन में हस्तक्षेप न करें], और टाइमर वेरिएबल का उपयोग करके ऑटोस्क्रॉलिंग शुरू करें।

यदि बटन में पॉज़ क्लास है, तो हम इस क्लास को प्रारंभ में बदलते हैं, आगे/पीछे बटन दिखाते हैं और टाइमर वेरिएबल को रोकते हैं, जो ऑटोस्क्रॉलिंग शुरू करता है।

अंतिम चरण स्लाइडर फ़ंक्शन htmSlider() को प्रारंभ करना है;

एक पृष्ठ पर दो या दो से अधिक स्लाइडर

दुर्भाग्य से, एक पृष्ठ पर कई स्लाइडर्स की ऑटो-स्क्रॉलिंग को लागू करना अभी तक संभव नहीं हो पाया है, लेकिन बाकी सब कुछ धमाके के साथ काम करता है। तो, प्रिय पाठकों, आपके अनुरोध पर, मैं कई चक्रीय स्लाइडर्स के लिए एक स्क्रिप्ट पोस्ट कर रहा हूं:

JQuery(document).ready(function())( //// ---> जाँच कर रहा है कि पेज पर कोई तत्व मौजूद है या नहीं jQuery.fn.exists = function() ( return jQuery(this).length; ) /// / -- -> स्लाइडर $(function())( if($(".slider").exists()) ( $("।slider").each(function())( var स्लाइडर = $(this) ; var स्लाइडरैप = ​​स्लाइडर .फाइंड("।स्लाइड-रैप"), नेक्स्टलिंक = स्लाइडर.फाइंड("।नेक्स्ट-स्लाइड"), प्रीवलिंक = स्लाइडर.फाइंड("।प्रिव-स्लाइड"), स्लाइडविड्थ = स्लाइडर.फाइंड( ".स्लाइड-आइटम ").आउटरविड्थ(), स्क्रॉलस्लाइडर = स्लाइडरैप.पोजिशन()बाएं - स्लाइडविड्थ; /* अगली स्लाइड के लिंक पर क्लिक करें */ नेक्स्टलिंक.क्लिक(फंक्शन())( यदि(!स्लाइडरैप। है(":एनिमेटेड")) ( स्लाइडरैप.एनिमेट((बाएं: स्क्रॉलस्लाइडर), 500, फ़ंक्शन())( स्लाइडरैप .खोज("।स्लाइड-आइटम:पहला") .appendTo(slideWrap) .parent() .css (("left": 0)) ; ) )); /* पिछली स्लाइड के लिंक पर क्लिक करें */ prevLink.click(function())( if(!slideWrap.is(":animated") ) ( स्लाइडरैप .css(("left": स्क्रॉलस्लाइडर )) .find("।slide-item:last") .prependTo(slideWrap) .parent() .animate((left: 0), 500);

) ));

...

));

) )); ));

दूसरे स्लाइडर का मार्कअप पहले से केवल इस मायने में भिन्न है कि हम कंटेनर.स्लाइडर में एक और वर्ग जोड़ते हैं, जो हमें दूसरे (तीसरे, nवें) स्लाइडर को आवश्यकतानुसार स्टाइल करने की अनुमति देगा:

आइए स्लाइडर के कुछ तत्वों को अलग तरीके से डिज़ाइन करें (स्लाइडर, स्लाइड की चौड़ाई कम करें, स्लाइड कैप्शन के लिए एक अलग रंग और फ़ॉन्ट सेट करें):

स्लाइडर.स्लाइडर2 (चौड़ाई: 400पीएक्स; ) .स्लाइडर2 .स्लाइड-आइटम (चौड़ाई: 180पीएक्स; ) .स्लाइडर2 .स्लाइड-शीर्षक (फ़ॉन्ट: बोल्ड 12पीएक्स एरियल; रंग: #ed0000; ) .स्लाइडर2 .नेवी (पैडिंग-टॉप: 30पीएक्स ; ) .slider2 .slide-आइटम img (प्रदर्शन: ब्लॉक; चौड़ाई: 100%; )

निष्कर्ष

• आज आपने देखा और सीखा कि प्लगइन्स का उपयोग किए बिना अपने हाथों से क्षैतिज स्क्रॉलिंग के साथ एक बुनियादी एनिमेटेड स्लाइडर कैसे बनाया जाता है। अपने प्रश्न, शुभकामनाएँ और धन्यवाद टिप्पणियों में छोड़ें, शुभकामनाएँ!
jQuery सीखना

उपयोगी साबित हो सकता है:

मॉस्को क्षेत्र में किशोरों के लिए शिविर, मॉस्को क्षेत्र में सबसे अच्छे बच्चों के शिविर।

इस बार हम html मार्कअप को थोड़ा जटिल करेंगे - हम न केवल चित्रों को स्क्रॉल करेंगे, बल्कि उन ब्लॉकों को भी स्क्रॉल करेंगे जिनमें छवियों के अलावा टेक्स्ट भी शामिल है। खैर, एक और बदलाव स्क्रॉल बटन को प्रभावित करेगा। हम उन्हें सीधे मार्कअप में जोड़ देंगे, और जेएस का उपयोग नहीं करेंगे, जैसा कि हमने पिछले उदाहरण में किया था। यहाँ आपको अंत में क्या मिलता है:

पिछला अगला

• फोटो 1 के लिए कैप्शन
• फोटो 2 के लिए कैप्शन
• फोटो 3 के लिए कैप्शन

हम पूरी संरचना को कैरोसेल_रैप क्लास के साथ एक सामान्य कंटेनर में रखते हैं। हम स्पैन तत्वों का उपयोग करके बटन डिज़ाइन करते हैं। विज़ुअल_ब्लॉक क्लास वाला एक कंटेनर एक विंडो के रूप में काम करेगा जिसमें स्लाइड की सामग्री प्रदर्शित की जाएगी, और स्लाइड्स को स्वयं (हम उन्हें एक अनगिनत सूची के रूप में व्यवस्थित करेंगे) को एक के बाद एक स्थित करना होगा। बेशक, एलआई तत्वों की संख्या पर कोई प्रतिबंध नहीं है।

आइए सीएसएस का उपयोग करके स्वरूप डिज़ाइन करें:

हिंडोला_रैप (मार्जिन: 50पीएक्स ऑटो; चौड़ाई:700पीएक्स; स्थिति:सापेक्ष; ) .विजुअल_ब्लॉक (मार्जिन: 0 ऑटो; स्थिति: सापेक्ष; अतिप्रवाह: छिपा हुआ; ) .विजुअल_ब्लॉक उल (स्थिति: सापेक्ष; ) .विजुअल_ब्लॉक उल, .विजुअल_ब्लॉक ली ( फ्लोट: बाएं; ) .carousel_wrap स्पैन.नेक्स्ट, .carousel_wrap स्पैन.prev (मार्जिन-टॉप:-20px; चौड़ाई:15px; ऊंचाई:26px; डिस्प्ले:ब्लॉक; टेक्स्ट-इंडेंट:-9999px; ओवरफ्लो:हिडन; कर्सर:पॉइंटर ; बैकग्राउंड:यूआरएल(स्लाइडर2_एरो.पीएनजी) नो-रिपीट; टॉप:50%; ) .कैरोसेल_रैप स्पैन.नेक्स्ट (राइट:0; बैकग्राउंड-पोजीशन:-15पीएक्स 0; ) .कैरोसेल_रैप स्पैन.नेक्स्ट:होवर (बैकग्राउंड-पोजिशन: -15px -26px; .carousel_wrap स्पैन.पिछला: होवर (पृष्ठभूमि-स्थिति:0 -26px;)

आप जेएस कोड लिखना शुरू कर सकते हैं। आइए विचार करें कि यह कैसे किया जा सकता है।

अब सभी LI तत्व एक के नीचे एक स्थित हैं। इसे पूरा करने के लिए, हमें उन्हें एक पंक्ति में पंक्तिबद्ध करना होगा, विज़ुअल_ब्लॉक की चौड़ाई को एक स्लाइड की चौड़ाई के बराबर सेट करना होगा (तब केवल एक तत्व प्रदर्शित किया जाएगा - बाकी सभी काट दिए जाएंगे) और स्लाइड्स को शिफ्ट कर दें निश्चित अंतराल पर समान चौड़ाई। यदि सभी ब्लॉकों के आकार की गणना गतिशील रूप से की जाए तो यह सबसे सुविधाजनक होगा। jQuery इसे कई तरीकों से करता है। हमारे मामले के लिए, हम आउटरविड्थ() और आउटरहाइट() विधियों का उपयोग करेंगे। ये विधियां सभी पैडिंग के साथ चयनित तत्व के आयाम लौटाएंगी। और निश्चित रूप से, मूल्यों के साथ काम करना सुविधाजनक बनाने के लिए, हम उन्हें चर में सहेजेंगे। आएँ शुरू करें।

सबसे पहले, आइए रैपर ब्लॉक के लिए वेरिएबल घोषित करें।

वर एलरैप = ​​$("div.carousel_wrap"), विज़ुअल = $("div.visual_block") हिंडोला = विज़ुअल.चिल्ड्रेन("ul");

इसके बाद, हम दृश्यमान वेरिएबल जोड़ देंगे (हम इसमें प्रदर्शित ब्लॉकों की संख्या संग्रहीत करेंगे - हमारे मामले में यह 1 है), आइटमविड्थ, आइटमहाइट और आइटमटोटल (यहां हम एक स्लाइड की चौड़ाई और ऊंचाई के मान डालेंगे) , साथ ही उनकी कुल संख्या)।

वर एलरैप = ​​$('कैरोसेल_रैप'), दृश्य = $('विजुअल_ब्लॉक'), कैरोसेल = दृश्य.चिल्ड्रन('उल'), दृश्यमान = 1, आइटमविड्थ = कैरोसेल.चिल्ड्रेन().आउटरविड्थ(), आइटमहाइट = हिंडोला.बच्चों().बाहरी ऊंचाई(), आइटम कुल = हिंडोला.बच्चों().लंबाई;

अब हम आसानी से विज़ुअल_ब्लॉक और विज़ुअल_ब्लॉक उल कंटेनरों के आवश्यक आकारों की गणना कर सकते हैं और उन्हें आवश्यक मान निर्दिष्ट कर सकते हैं:

विजुअल.सीएसएस(("चौड़ाई": दृश्यमान * आइटमविड्थ + "पीएक्स", "ऊंचाई": आइटमहाइट)); कैरोसेल.सीएसएस(("चौड़ाई": आइटमकुल * आइटमविड्थ, "बाएं": 0));

डिज़ाइन ने आवश्यक रूप प्राप्त कर लिया है, लेकिन अभी भी काम नहीं करता है। आपको स्लाइडों को (मान लीजिए बाईं ओर) घुमाना होगा। हम इसे चेतन विधि का उपयोग करके करेंगे, जो UL तत्व को बाईं ओर ले जाएगा।

Carousel.animate((बाएं: -आइटमविड्थ), 500);

यहां हमने यूएल ब्लॉक में एनिमेट विधि लागू की और मापदंडों में निर्दिष्ट किया कि ब्लॉक को 500 मिलीलीटर एस की समयावधि में आइटमविड्थ चर के मूल्य के बराबर दूरी तक विजुअल_ब्लॉक के बाएं किनारे के सापेक्ष स्थानांतरित किया जाना चाहिए। यह सुनिश्चित करने के लिए कि ब्लॉक वांछित दिशा में चलता है, आइटमविड्थ वैरिएबल को नकारात्मक मान पर सेट किया गया है। दुर्भाग्य से, यह रिकॉर्डिंग वांछित परिणाम प्राप्त करने में विफल रही। हमने जो कुछ हासिल किया वह सिर्फ एक बार विजुअल_ब्लॉक के सापेक्ष यूएल को ऑफसेट करना था। इससे कोई फर्क नहीं पड़ता, हम पहले ही एक ही क्रिया को कई बार दोहराने की तरकीबें अपना चुके हैं (पिछला उदाहरण याद रखें)। आइए इस बार भी ऐसा ही करें. आइए एक फ़ंक्शन बनाएं जिसमें हम अपने रिकॉर्ड को "पैक" करेंगे और इसे सेटइंटरवल विधि का उपयोग करके कॉल करेंगे, मान लीजिए, हर तीन सेकंड में।

फ़ंक्शन चेंजलेफ्ट () ( कैरोसेल.एनिमेट((बाएं: -आइटमविड्थ), 500); ) सेटइंटरवल(चेंजलेफ्ट, 3000);

एक और विफलता - यूएल ऑफ़सेट अभी भी एक बार होता है। ये बात समझ में आती है. हमने संकेत दिया कि तत्व को आइटमविड्थ द्वारा स्थानांतरित करने की आवश्यकता है, कार्य पूरा हो गया है और कुछ नहीं होता है। फ़ंक्शन के बाद की कॉलें खाली हो जाती हैं। यदि आप यूएल को वापस जाने के लिए मजबूर करेंगे तो क्या होगा? फिर हर बार जब फ़ंक्शन को कॉल किया जाता है, तो तत्व अपनी प्रारंभिक स्थिति में होगा। आओ कोशिश करते हैं। एनिमेट पूरा होने के बाद हमें तत्व को वापस लौटाना होगा। इसलिए हम इसे तीसरे पैरामीटर के रूप में तथाकथित कॉलबैक फ़ंक्शन देंगे, जो यूएल को उसकी मूल स्थिति में लौटा देगा।

फ़ंक्शन चेंजलेफ्ट () ( कैरोसेल.एनिमेट((बाएं: -आइटमविड्थ), 500, फ़ंक्शन() ( कैरोसेल.सीएसएस(("बाएं": 0 )); )); ) सेटइंटरवल(चेंजलेफ्ट, 3000);

आइये परिणाम पर नजर डालते हैं. पहली नज़र में ऐसा लग सकता है कि इससे फिर कुछ अच्छा नहीं हुआ। हर तीन सेकंड में पहली स्लाइड बाईं ओर जाती है, दूसरी को रास्ता देती है और फिर तुरंत वापस आ जाती है... पूरी तरह से विफलता।

वास्तव में यह सच नहीं है। हमें बस कॉलबैक फ़ंक्शन में कुछ और क्रियाएं करने की आवश्यकता है, अर्थात्, पहले तत्व को क्लोन करें (जो छिपा हुआ है) और क्लोन को हिंडोला के बिल्कुल अंत में रखें, फिर इस तत्व को हिंडोला की शुरुआत में हटा दें और उसके बाद ही UL को उसके स्थान पर लौटाएँ। आइए अपनी योजनाओं को क्रियान्वित करें।

फ़ंक्शन चेंजलेफ्ट () (var आइटम = कैरोसेल.चिल्ड्रन().eq(0); कैरोसेल.एनिमेट((बाएं: -आइटमविड्थ), 500, फ़ंक्शन() ( आइटम.क्लोन().appendTo(कैरोसेल); आइटम.निकालें (); कैरोसेल.सीएसएस(("बाएं": 0 )); सेटइंटरवल(चेंजलेफ्ट, 3000);

चेंजलेफ्ट फ़ंक्शन में हम एक वेरिएबल आइटम घोषित करते हैं जिसमें हम पहली स्लाइड को स्टोर करेंगे। फिर कॉलबैक फ़ंक्शन में हम स्लाइड को क्लोन करते हैं, क्लोन को कैरोसेल के अंत में ले जाते हैं और तत्व को स्वयं हटा देते हैं। परिणामस्वरूप, पूर्ण सफलता हमारा इंतजार कर रही है। हमने स्वचालित स्क्रॉलिंग लॉन्च की है। अब सारा कोड इस तरह दिखता है:

$(document).ready(function())( var elWrap = $("।carousel_wrap"), विज़ुअल = $("।visual_block"), हिंडोला = विज़ुअल.चिल्ड्रेन("ul"), दृश्यमान = 1, आइटमविड्थ = कैरोसेल .चिल्ड्रेन().आउटरविड्थ(), आइटमहाइट = कैरोसेल.चिल्ड्रेन().आउटरहाइट(), आइटमटोटल = कैरोसेल.चिल्ड्रन().लेंथ; विज़ुअल.सीएसएस(("चौड़ाई": दृश्य * आइटमविड्थ + "पीएक्स", " ऊंचाई " : आइटम ऊंचाई)); कैरोसेल.सीएसएस(("चौड़ाई": आइटमकुल * आइटमविड्थ, "बाएं": 0)); फ़ंक्शन चेंजलेफ्ट () ( var आइटम = कैरोसेल.चिल्ड्रन().eq(0); कैरोसेल.एनिमेट ((बाएं: -आइटमविड्थ), 500, फ़ंक्शन() (आइटम.क्लोन().एपेंडटू(कैरोसेल); आइटम.रिमूव(); कैरोसेल.सीएसएस(('लेफ्ट': 0 )); ) ) सेटइंटरवल(चेंजलेफ्ट) , 3000);

तैयार कोड डाउनलोड करें

अगले लेख में हम नेविगेशन बटनों को चालू करके हिंडोला स्लाइडर पर काम समाप्त करेंगे।

वर्तमान में, एक स्लाइडर - हिंडोला - एक ऐसी कार्यक्षमता है जो किसी व्यावसायिक वेबसाइट, पोर्टफोलियो वेबसाइट या किसी अन्य संसाधन पर होना आवश्यक है। पूर्ण-स्क्रीन छवि स्लाइडर के साथ, क्षैतिज हिंडोला स्लाइडर किसी भी वेब डिज़ाइन में अच्छी तरह से फिट होते हैं।

कभी-कभी स्लाइडर को साइट पेज के एक तिहाई हिस्से पर कब्जा करना चाहिए। यहां हिंडोला स्लाइडर का उपयोग संक्रमण प्रभावों और उत्तरदायी लेआउट के साथ किया जाता है। ई-कॉमर्स साइटें अलग-अलग पोस्ट या पेज में एकाधिक फ़ोटो प्रदर्शित करने के लिए कैरोसेल स्लाइडर का उपयोग करती हैं। स्लाइडर कोड को आपकी आवश्यकताओं के अनुसार स्वतंत्र रूप से उपयोग और संशोधित किया जा सकता है।

HTML5 और CSS3 के संयोजन में JQuery का उपयोग करके, आप अपने पृष्ठों को अधिक रोचक बना सकते हैं, उन्हें अद्वितीय प्रभाव प्रदान कर सकते हैं, और साइट के एक विशिष्ट क्षेत्र पर आगंतुकों का ध्यान आकर्षित कर सकते हैं।

स्लिक - आधुनिक हिंडोला स्लाइडर प्लगइन

स्लिक एक स्वतंत्र रूप से उपलब्ध jquery प्लगइन है जिसके डेवलपर्स का दावा है कि उनका समाधान आपकी सभी स्लाइडर आवश्यकताओं को पूरा करेगा। अनुकूली स्लाइडर - हिंडोला मोबाइल उपकरणों के लिए "टाइल" मोड में और डेस्कटॉप संस्करण के लिए "ड्रैग एंड ड्रॉप" मोड में काम कर सकता है।

इसमें एक "फीका" संक्रमण प्रभाव, एक दिलचस्प "केंद्र मोड" सुविधा, ऑटो-स्क्रॉलिंग के साथ छवियों की आलसी लोडिंग शामिल है। अद्यतन कार्यक्षमता में स्लाइड और एक स्लाइड फ़िल्टर जोड़ना शामिल है। यह सुनिश्चित करने के लिए कि आप प्लगइन को अपनी आवश्यकताओं के अनुसार कॉन्फ़िगर करें।

डेमो मोड | डाउनलोड करना

आउल कैरोसेल 2.0 - jQuery - स्पर्श उपकरणों पर उपयोग के लिए प्लगइन

इस प्लगइन में कार्यों का एक बड़ा सेट है, जो शुरुआती और अनुभवी डेवलपर्स दोनों के लिए उपयुक्त है। यह हिंडोला स्लाइडर का एक अद्यतन संस्करण है. उनके पूर्ववर्ती का भी यही नाम था।

समग्र कार्यक्षमता को बेहतर बनाने के लिए स्लाइडर में कुछ अंतर्निहित प्लगइन्स हैं। एनीमेशन, वीडियो प्लेबैक, स्लाइडर ऑटोप्ले, आलसी लोडिंग, स्वचालित ऊंचाई समायोजन - ये उल्लू कैरोसेल 2.0 की मुख्य विशेषताएं हैं।

मोबाइल उपकरणों पर प्लगइन के अधिक सुविधाजनक उपयोग के लिए ड्रैग एंड ड्रॉप समर्थन शामिल है।
प्लगइन मोबाइल उपकरणों की छोटी स्क्रीन पर भी बड़ी छवियां प्रदर्शित करने के लिए एकदम सही है।

उदाहरण | डाउनलोड करना

jQuery प्लगइन सिल्वर ट्रैक

एक काफी छोटा, लेकिन कार्यात्मक रूप से समृद्ध jquery प्लगइन जो आपको एक पृष्ठ पर एक स्लाइडर रखने की अनुमति देता है - एक हिंडोला, जिसमें एक छोटा कोर होता है और बहुत सारे साइट संसाधनों का उपभोग नहीं करता है। प्लगइन का उपयोग ऊर्ध्वाधर और क्षैतिज स्लाइडर्स को एनीमेशन के साथ प्रदर्शित करने और गैलरी से छवियों के सेट बनाने के लिए किया जा सकता है।

उदाहरण | डाउनलोड करना

एनोस्लाइड - अल्ट्रा कॉम्पैक्ट रिस्पॉन्सिव jQuery स्लाइडर

अल्ट्रा कॉम्पैक्ट jQuery स्लाइडर - हिंडोला, जिसकी कार्यक्षमता नियमित स्लाइडर की तुलना में बहुत अधिक है। इनमें एकल छवि पूर्वावलोकन, एकाधिक छवि कैरोसेल डिस्प्ले और शीर्षक-आधारित स्लाइडर डिस्प्ले शामिल हैं।

उदाहरण | डाउनलोड करना

उल्लू हिंडोला - जेक्वेरी स्लाइडर - हिंडोला

उल्लू हिंडोला एक स्लाइडर है जो टच स्क्रीन और ड्रैग एंड ड्रॉप तकनीक का समर्थन करता है, आसानी से HTML कोड में एकीकृत होता है। प्लगइन सबसे अच्छे स्लाइडर्स में से एक है जो आपको बिना किसी विशेष रूप से तैयार मार्कअप के सुंदर हिंडोला बनाने की अनुमति देता है।

उदाहरण | डाउनलोड करना

3डी गैलरी - हिंडोला

सीएसएस शैलियों और थोड़े जावास्क्रिप्ट कोड के आधार पर 3डी ट्रांज़िशन का उपयोग करता है।

उदाहरण | डाउनलोड करना

TweenMax.js और jQuery का उपयोग करके 3D हिंडोला

शानदार 3डी हिंडोला. ऐसा लगता है कि यह अभी भी बीटा संस्करण है, क्योंकि अभी मुझे इसमें कुछ समस्याओं का पता चला है। यदि आप अपने स्वयं के स्लाइडर का परीक्षण करने और बनाने में रुचि रखते हैं, तो यह हिंडोला एक बड़ी मदद होगी।

उदाहरण | डाउनलोड करना

बूटस्ट्रैप का उपयोग कर हिंडोला

रिस्पॉन्सिव स्लाइडर - आपकी नई वेबसाइट के लिए बूटस्ट्रैप तकनीक का उपयोग करने वाला हिंडोला।

उदाहरण | डाउनलोड करना

बूटस्ट्रैप फ्रेमवर्क पर आधारित मूविंग बॉक्स हिंडोला स्लाइडर

पोर्टफ़ोलियो और व्यावसायिक वेबसाइटों पर सर्वाधिक लोकप्रिय। इस प्रकार का स्लाइडर - हिंडोला - अक्सर किसी भी प्रकार की साइटों पर पाया जाता है।

उदाहरण | डाउनलोड करना

छोटे सर्किलस्लाइडर

यह छोटे आकार का स्लाइडर किसी भी स्क्रीन रिज़ॉल्यूशन वाले डिवाइस पर काम करने के लिए तैयार है। स्लाइडर गोलाकार और हिंडोला दोनों मोड में काम कर सकता है। टिनी सर्कल को इस प्रकार के अन्य स्लाइडर्स के विकल्प के रूप में प्रस्तुत किया गया है। IOS और Android ऑपरेटिंग सिस्टम के लिए अंतर्निहित समर्थन है।

सर्कुलर मोड में, स्लाइडर काफी दिलचस्प दिखता है। ड्रैग एंड ड्रॉप विधि और स्वचालित स्लाइड स्क्रॉलिंग सिस्टम के लिए उत्कृष्ट समर्थन।

उदाहरण | डाउनलोड करना

थम्बेलिना सामग्री स्लाइडर

एक शक्तिशाली, अनुकूली, हिंडोला स्लाइडर एक आधुनिक वेबसाइट के लिए बिल्कुल उपयुक्त है। किसी भी डिवाइस पर सही ढंग से काम करता है। क्षैतिज और ऊर्ध्वाधर मोड हैं। इसका आकार घटाकर मात्र 1 KB कर दिया गया है। अल्ट्रा कॉम्पैक्ट प्लगइन में उत्कृष्ट सहज बदलाव भी हैं।

उदाहरण | डाउनलोड करना

वाह - स्लाइडर - हिंडोला

इसमें 50 से अधिक प्रभाव शामिल हैं, जो आपकी वेबसाइट के लिए एक मूल स्लाइडर बनाने में आपकी सहायता कर सकते हैं।

उदाहरण | डाउनलोड करना

उत्तरदायी jQuery सामग्री स्लाइडर bxSlider

यह देखने के लिए कि स्लाइडर कैसे अनुकूलित होता है, अपनी ब्राउज़र विंडो का आकार बदलें। Bxslider 50 से अधिक अनुकूलन विकल्पों के साथ आता है और विभिन्न संक्रमण प्रभावों के साथ अपनी विशेषताओं को प्रदर्शित करता है।

उदाहरण | डाउनलोड करना

jकैरोसेल

jCarousel एक jQuery प्लगइन है जो आपकी छवियों को देखने को व्यवस्थित करने में मदद करेगा। आप उदाहरण में दिखाए गए आधार से आसानी से कस्टम छवि हिंडोला बना सकते हैं। स्लाइडर मोबाइल प्लेटफ़ॉर्म पर काम करने के लिए अनुकूली और अनुकूलित है।

उदाहरण | डाउनलोड करना

स्क्रॉलबॉक्स - jQuery प्लगइन

स्क्रॉलबॉक्स एक स्लाइडर बनाने के लिए एक कॉम्पैक्ट प्लगइन है - एक हिंडोला या एक टेक्स्ट क्रॉल। मुख्य विशेषताओं में माउसओवर पर विराम के साथ ऊर्ध्वाधर और क्षैतिज स्क्रॉलिंग प्रभाव शामिल हैं।

उदाहरण | डाउनलोड करना

dbpas हिंडोला

एक साधारण हिंडोला स्लाइडर. यदि आपको तेज़ प्लगइन की आवश्यकता है, तो यह 100% उपयुक्त है। स्लाइडर के काम करने के लिए आवश्यक केवल बुनियादी सुविधाओं के साथ आता है।

उदाहरण | डाउनलोड करना

फ्लेक्सीसेल: रिस्पॉन्सिव JQuery स्लाइडर प्लगइन - हिंडोला

फ्लेक्सीसेल के निर्माता पुराने स्कूल जेकैरोसेल प्लगइन से प्रेरित थे, उन्होंने मोबाइल और टैबलेट उपकरणों पर स्लाइडर के सही संचालन को सुनिश्चित करने के उद्देश्य से इसकी एक प्रति बनाई।

मोबाइल डिवाइस पर चलने पर फ्लेक्सीसेल का रिस्पॉन्सिव लेआउट, ब्राउज़र-विंडो-आकार वाले लेआउट से भिन्न होता है। फ्लेक्सीसेल कम और उच्च रिज़ॉल्यूशन दोनों स्क्रीन पर काम करने के लिए पूरी तरह से अनुकूलित है।

उदाहरण | डाउनलोड करना

इलास्टिस्लाइड - अनुकूली स्लाइडर - हिंडोला

इलास्टिस्लाइड आपके डिवाइस की स्क्रीन के आकार के लिए पूरी तरह से अनुकूल हो जाता है। आप किसी विशिष्ट रिज़ॉल्यूशन पर प्रदर्शित करने के लिए छवियों की न्यूनतम संख्या निर्धारित कर सकते हैं। ऊर्ध्वाधर स्क्रॉलिंग प्रभाव के साथ एक निश्चित आवरण का उपयोग करके, छवि दीर्घाओं के साथ हिंडोला स्लाइडर के रूप में अच्छी तरह से काम करता है।

उदाहरण | डाउनलोड करना

फ्लेक्सस्लाइडर 2

वूथेम्स से फ्रीवेयर स्लाइडर। इसे सर्वोत्तम अनुकूली स्लाइडर्स में से एक माना जाता है। प्लगइन में कई टेम्पलेट हैं और यह नौसिखिए उपयोगकर्ताओं और विशेषज्ञों दोनों के लिए उपयोगी होगा।

उदाहरण | डाउनलोड करना

अद्भुत हिंडोला

अद्भुत हिंडोला - jQuery का उपयोग कर प्रतिक्रियाशील छवि स्लाइडर। वर्डप्रेस, ड्रुपल और जूमला जैसी कई सामग्री प्रबंधन प्रणालियों का समर्थन करता है। बिना किसी संगतता समस्या के एंड्रॉइड और आईओएस और डेस्कटॉप ऑपरेटिंग सिस्टम का भी समर्थन करता है। अंतर्निहित अद्भुत हिंडोला टेम्पलेट आपको स्लाइडर को ऊर्ध्वाधर, क्षैतिज और गोलाकार मोड में उपयोग करने की अनुमति देते हैं।

उदाहरण | डाउनलोड करना

समय स्थिर नहीं रहता और उसके साथ प्रगति करता रहता है। इसका असर इंटरनेट पर भी पड़ा. आप पहले से ही देख सकते हैं कि वेबसाइटों का स्वरूप कैसे बदल रहा है; अनुकूली डिज़ाइन विशेष रूप से लोकप्रिय है। और इसके संबंध में, कई नए अनुकूली jquery स्लाइडर, गैलरी, हिंडोला या इसी तरह के प्लगइन सामने आए हैं।
1. उत्तरदायी क्षैतिज पोस्ट स्लाइडर

विस्तृत स्थापना निर्देशों के साथ अनुकूली क्षैतिज हिंडोला। इसे सिंपल स्टाइल में बनाया गया है, लेकिन आप इसे अपने हिसाब से स्टाइल कर सकते हैं।

2. Glide.js पर स्लाइडर

यह स्लाइडर किसी भी वेबसाइट के लिए उपयुक्त है। यह ओपन सोर्स Glide.js का उपयोग करता है। स्लाइडर के रंग आसानी से बदले जा सकते हैं।

3. झुका हुआ सामग्री स्लाइड शो

सामग्री के साथ उत्तरदायी स्लाइडर. इस स्लाइडर का मुख्य आकर्षण छवियों का 3डी प्रभाव है, साथ ही यादृच्छिक उपस्थिति के विभिन्न एनिमेशन भी हैं।

4. HTML5 कैनवास का उपयोग कर स्लाइडर

इंटरैक्टिव कणों के साथ एक बहुत ही सुंदर और प्रभावशाली स्लाइडर। इसे HTML5 कैनवास का उपयोग करके बनाया गया था,

5. इमेज मॉर्फिंग स्लाइडर

मॉर्फिंग प्रभाव वाला स्लाइडर (एक वस्तु से दूसरी वस्तु में सहज परिवर्तन)। इस उदाहरण में, पोर्टफोलियो के रूप में स्लाइडर वेब डेवलपर या वेब स्टूडियो के पोर्टफोलियो के लिए उपयुक्त है।

6. गोलाकार स्लाइडर

छवि को पलटने के प्रभाव के साथ एक वृत्त के रूप में स्लाइडर।

7. धुंधली पृष्ठभूमि वाला स्लाइडर

स्विचिंग और बैकग्राउंड ब्लर के साथ अनुकूली स्लाइडर।

8. उत्तरदायी फैशन स्लाइडर

सरल, हल्का और प्रतिक्रियाशील वेबसाइट स्लाइडर।

9. स्लाइसबॉक्स - jQuery 3D छवि स्लाइडर (अद्यतन)

सुधारों और नई सुविधाओं के साथ स्लाइसबॉक्स स्लाइडर का अद्यतन संस्करण।

10. निःशुल्क एनिमेटेड उत्तरदायी छवि ग्रिड

एक लचीली छवि ग्रिड बनाने के लिए JQuery प्लगइन जो विभिन्न एनिमेशन और समय का उपयोग करके शॉट्स को स्विच करेगा। यह किसी वेबसाइट पर पृष्ठभूमि या सजावटी तत्व के रूप में अच्छा लग सकता है, क्योंकि हम चुनिंदा रूप से नई छवियां और उनके बदलाव प्रदर्शित कर सकते हैं। प्लगइन कई संस्करणों में आता है।

11.फ्लेक्स स्लाइडर

आपकी वेबसाइट के लिए एक सार्वभौमिक निःशुल्क प्लगइन। यह प्लगइन कई स्लाइडर और कैरोसेल विकल्पों में आता है।

12. फोटो फ्रेम

फ़ोटोरामा एक सार्वभौमिक प्लगइन है। इसमें कई सेटिंग्स हैं, सब कुछ जल्दी और आसानी से काम करता है, और आप स्लाइड्स को पूर्ण स्क्रीन में देख सकते हैं। स्लाइडर का उपयोग निश्चित आकार और अनुकूली दोनों में किया जा सकता है, थंबनेल के साथ या उसके बिना, गोलाकार स्क्रॉलिंग के साथ या उसके बिना, और भी बहुत कुछ।

पी.एस. मैंने स्लाइडर को कई बार स्थापित किया है और मुझे लगता है कि यह सर्वश्रेष्ठ में से एक है

13. थंबनेल के साथ निःशुल्क और अनुकूली 3डी स्लाइडर गैलरी।

ग्रिड और दिलचस्प एनीमेशन प्रभावों के साथ प्रायोगिक स्लाइडर गैलरी 3DPanelLayout।

14. CSS3 का उपयोग कर स्लाइडर

अनुकूली स्लाइडर सामग्री और हल्के एनीमेशन की सहज उपस्थिति के साथ css3 का उपयोग करके बनाया गया है।

15. वाह स्लाइडर

WOW स्लाइडर अद्भुत दृश्य प्रभावों वाला एक छवि स्लाइडर है।

17. लोचदार

पूर्ण प्रतिक्रियाशीलता और स्लाइड थंबनेल के साथ लोचदार स्लाइडर।

18. स्लिट

यह css3 एनिमेशन का उपयोग करने वाला एक पूर्ण स्क्रीन रिस्पॉन्सिव स्लाइडर है। स्लाइडर दो संस्करणों में बनाया गया है. एनीमेशन काफी असामान्य और खूबसूरती से किया गया है।

19. अनुकूली फोटो गैलरी प्लस

छवि लोडिंग के साथ एक सरल निःशुल्क गैलरी स्लाइडर।

20. वर्डप्रेस के लिए रिस्पॉन्सिव स्लाइडर

WP के लिए अनुकूली निःशुल्क स्लाइडर।

21. लंबन सामग्री स्लाइडर

लंबन प्रभाव वाला स्लाइडर और CSS3 का उपयोग करके प्रत्येक तत्व का नियंत्रण।

22. संगीत लिंक के साथ स्लाइडर

JPlayer ओपन सोर्स कोड का उपयोग कर स्लाइडर। यह स्लाइडर संगीत के साथ एक प्रस्तुति जैसा दिखता है।

23. jmpress.js के साथ स्लाइडर

रिस्पॉन्सिव स्लाइडर jmpress.js पर आधारित है और इसलिए यह आपको अपनी स्लाइड्स में कुछ दिलचस्प 3D प्रभाव जोड़ने की अनुमति देगा।

24. फास्ट होवर स्लाइड शो

त्वरित स्लाइड स्विचिंग के साथ स्लाइड शो। स्लाइड्स होवर पर स्विच करती हैं।

25. CSS3 के साथ इमेज अकॉर्डियन

CSS3 का उपयोग करके छवि अकॉर्डियन।

26. एक टच अनुकूलित गैलरी प्लगइन

यह एक प्रतिक्रियाशील गैलरी है जो स्पर्श उपकरणों के लिए अनुकूलित है।

27. 3डी गैलरी

3डी वॉल गैलरी - सफारी ब्राउज़र के लिए बनाई गई है, जहां 3डी प्रभाव दिखाई देगा। अगर आप इसे दूसरे ब्राउजर पर देखेंगे तो कार्यक्षमता तो ठीक रहेगी लेकिन 3डी इफेक्ट नजर नहीं आएगा।

28. पेजिनेशन के साथ स्लाइडर

JQuery UI स्लाइडर का उपयोग करके पेजिनेशन के साथ उत्तरदायी स्लाइडर। विचार एक सरल नेविगेशन अवधारणा का उपयोग करना है। सभी छवियों को रिवाइंड करना या स्लाइड दर स्लाइड स्विच करना संभव है।

29. jQuery के साथ छवि असेंबल

स्क्रीन की चौड़ाई के आधार पर छवियों को स्वचालित रूप से व्यवस्थित करें। पोर्टफ़ोलियो वेबसाइट विकसित करते समय एक बहुत उपयोगी चीज़।

30. 3डी गैलरी

CSS3 और jQuery का उपयोग करके एक सरल 3D गोलाकार स्लाइडर।

31. css3 और jQuery का उपयोग करके 3D प्रभाव के साथ पूर्ण स्क्रीन मोड

एक सुंदर बदलाव के साथ छवियों को पूर्ण स्क्रीन पर देखने की क्षमता वाला एक स्लाइडर।

हमें स्वचालित स्क्रॉलिंग के साथ एक सरल स्लाइडर की आवश्यकता है। आएँ शुरू करें...

स्लाइडर कैसे काम करता है इसका विवरण.

स्लाइडें पंक्तिबद्ध हो जाएंगी और एक निश्चित समय के बाद स्क्रॉल हो जाएंगी।

लाल फ्रेम स्लाइडर का दृश्य भाग दिखाता है।

स्लाइडर के अंत में आपको पहली स्लाइड की नकल बनानी होगी। तीसरी स्लाइड से पहली स्लाइड तक स्क्रॉलिंग सुनिश्चित करने के लिए यह आवश्यक है। पहली स्लाइड से तीसरी तक पीछे की ओर स्क्रॉल करने में सक्षम होने के लिए आपको आखिरी स्लाइड को भी शुरुआत में जोड़ना होगा। नीचे दिखाया गया है कि स्लाइडर आगे की दिशा में कैसे काम करता है।

जब स्लाइडर अंत तक पहुंचता है, तो स्लाइडर की शुरुआत से इसकी एक प्रति तुरंत अंतिम स्लाइड के स्थान पर रख दी जाती है। फिर चक्र फिर से दोहराता है. यह एक अंतहीन स्लाइडर का भ्रम पैदा करता है।

HTML मार्कअप

सबसे पहले, आइए स्वचालित स्क्रॉलिंग वाला एक सरल स्लाइडर बनाएं। इसे संचालित करने के लिए दो कंटेनरों की आवश्यकता होती है। पहला स्लाइडर के दृश्य क्षेत्र का आकार निर्धारित करेगा, और दूसरा इसमें स्लाइडर लगाने के लिए आवश्यक है। स्लाइडर लेआउट इस तरह दिखेगा:

स्लाइडर शैलियाँ .स्लाइडर-बॉक्स (चौड़ाई: 320px; ऊँचाई: 210px; अतिप्रवाह: छिपा हुआ; ) .स्लाइडर (स्थिति: सापेक्ष; चौड़ाई: 10000px; ऊँचाई: 210px; ) .स्लाइडर img (फ्लोट: बाएँ; z-सूचकांक: 0; )

कंटेनर.स्लाइडर-बॉक्स स्लाइडर के आयाम निर्दिष्ट करता है। ओवरफ्लो:हिडन प्रॉपर्टी का उपयोग करके, तत्व के अंदर के क्षेत्र में शामिल नहीं किए गए सभी तत्व छिपे हुए हैं।

कंटेनर.स्लाइडर को बड़ी चौड़ाई पर सेट किया गया है। यह आवश्यक है ताकि सभी स्लाइडें एक पंक्ति में फिट हो जाएँ।

स्लाइड्स को फ्लोट:लेफ्ट प्रॉपर्टी का उपयोग करके संरेखित किया जाता है।

नीचे स्लाइडर ब्लॉक का एक योजनाबद्ध लेआउट है।

लिखी हुई कहानी

कंटेनर.स्लाइडर की मार्जिन-लेफ्ट प्रॉपर्टी को सुचारू रूप से बदलकर स्लाइडों की आवाजाही की जाएगी।

$(फ़ंक्शन () ( var चौड़ाई= $("।स्लाइडर-बॉक्स") .चौड़ाई() ; // स्लाइडर चौड़ाई। अंतराल = 4000 ; // स्लाइड परिवर्तन अंतराल। $("।स्लाइडर img:last") .क्लोन () .prependTo ("स्लाइडर") ; // अंतिम स्लाइड की एक प्रति शुरुआत में रखी गई है। $() .eq (1 ) .clone() .appendTo ("स्लाइडर" ) ; एक स्लाइड की चौड़ाई से बाईं ओर स्थानांतरित किया जाता है setInterval('animation()' , अंतराल) // स्लाइड बदलने के लिए एनीमेशन() फ़ंक्शन लॉन्च किया गया है।

फ़ंक्शन एनीमेशन() (var मार्जिन = पार्सइंट($("।स्लाइडर") .css ("मार्जिनलेफ्ट") ) ; // वर्तमान ब्लॉक ऑफ़सेट.स्लाइडर चौड़ाई = $("।स्लाइडर-बॉक्स") .चौड़ाई () , / / स्लाइडर की चौड़ाई। स्लाइड अंतिम नहीं है। सीएसएस ("मार्जिन-बाएं" , - चौड़ाई); // फिर ब्लॉक.स्लाइडर अपनी मूल स्थिति पर लौटता है, मार्जिन=- चौड़ाई* 2 ) $("।स्लाइडर") .animate (( मार्जिनलेफ्ट: मार्जिन) , 1000 ) ; // ब्लॉक.स्लाइडर को 1 स्लाइड द्वारा बाईं ओर स्थानांतरित कर दिया गया है);