मालवेअर हे अनाहूत किंवा धोकादायक प्रोग्राम आहेत जे...
आम्हाला स्वयंचलित स्क्रोलिंगसह एक साधा स्लाइडर आवश्यक आहे. चला सुरू करुया...
स्लाइडर कसे कार्य करते याचे वर्णन.स्लाइड्स रांगेत असतील आणि ठराविक वेळेनंतर स्क्रोल होतील.
लाल फ्रेम स्लाइडरचा दृश्यमान भाग दर्शविते.
स्लाइडरच्या शेवटी तुम्हाला पहिली स्लाइड डुप्लिकेट करणे आवश्यक आहे. तिसऱ्या स्लाइडवरून पहिल्या स्लाइडवर स्क्रोलिंग करण्यासाठी हे आवश्यक आहे. पहिल्या स्लाईडवरून तिसऱ्या स्लाइडवर मागे स्क्रोल करण्यासाठी तुम्हाला सुरूवातीला शेवटची स्लाइड जोडण्याचीही आवश्यकता आहे. स्लाइडर पुढे दिशेने कसे कार्य करते ते खाली दाखवले आहे.
जेव्हा स्लाइडर शेवटपर्यंत पोहोचतो, तेव्हा स्लाइडरच्या सुरुवातीपासून त्याची एक प्रत त्वरित शेवटच्या स्लाइडच्या जागी ठेवली जाते. मग चक्र पुन्हा पुनरावृत्ती होते. यामुळे अंतहीन स्लाइडरचा भ्रम निर्माण होतो.
HTML मार्कअपप्रथम, स्वयंचलित स्क्रोलिंगसह एक साधा स्लाइडर बनवू. हे काम करण्यासाठी दोन कंटेनर आवश्यक आहेत. पहिला स्लाइडरच्या दृश्यमान क्षेत्राचा आकार सेट करेल आणि दुसरा त्यामध्ये स्लाइडर ठेवण्यासाठी आवश्यक आहे. स्लाइडर लेआउट असे दिसेल:
Container.slider-box स्लाइडरचे परिमाण निर्दिष्ट करते. ओव्हरफ्लो:हिडन प्रॉपर्टी वापरून, घटकाच्या आतील भागात समाविष्ट नसलेले सर्व घटक लपवले जातात.
Container.slider मोठ्या रुंदीवर सेट केले आहे. हे आवश्यक आहे जेणेकरून सर्व स्लाइड्स ओळीत बसतील.
float:left गुणधर्म वापरून स्लाइड्स संरेखित केल्या आहेत.
खाली स्लाइडर ब्लॉक्सची योजनाबद्ध मांडणी आहे.
कंटेनर.स्लायडरची मार्जिन-डावी मालमत्ता सहजतेने बदलून स्लाइड हलतील.
$(फंक्शन () ( var width= $(."slider-box" ) .width () ; // स्लाइडर रुंदी. मध्यांतर = 4000 ; // स्लाइड बदल मध्यांतर. $(".slider img:last" ) .clone () .prependTo (."slider" ); // शेवटच्या स्लाइडची प्रत $() .eq (1 ) .clone ().appendTo ( "slider" ) ; // Container.slider एका स्लाइडच्या रुंदीने डावीकडे शिफ्ट केले जाते. फंक्शन ॲनिमेशन() ( var margin = parseInt($(."slider") .css ("marginLeft" ) ) ; // वर्तमान ब्लॉक offset.slider width= $(."slider-box" ) .width () , / / स्लाइडरची रुंदी = $(."स्लायडर" ) .चिल्ड्रेन ().लांबी ; स्लाइड शेवटची नाही , ( margin= margin- width; // नंतर मार्जिन व्हॅल्यू स्लाइडच्या रुंदीने कमी केली जाते. ) बाकी (// शेवटची स्लाइड दाखवली असल्यास, $(."slider" ) . css ("मार्जिन-लेफ्ट" , - रुंदी) ; // नंतर block.slider त्याच्या मूळ स्थितीवर परत येतो, margin=- width* 2 ) $(."slider" ). ;परिणाम अंतहीन स्वयंचलित स्क्रोलिंगसह एक साधा स्लाइडर होता.
कधीकधी मला ते आवडत नाही हे असूनही मला फ्रंटएंडशी संबंधित समस्या सोडवाव्या लागतात :)
खरं तर, मी एकट्याने विकसित केलेल्या या साइटच्या डिझाइनवरून "सुंदर" शी संबंधित प्रत्येक गोष्टीबद्दलच्या माझ्या वृत्तीचा अंदाज तुम्ही लावू शकता :)
तथापि, तुलनेने अलीकडे मला JavaScript मध्ये स्लाइडर लागू करण्याची आवश्यकता होती आणि हे कोणत्याही तयार लायब्ररीशिवाय आणि प्रत्येकाच्या आवडत्या jQuery शिवाय देखील करावे लागले.
ही गरज या वस्तुस्थितीमुळे निर्माण झाली होती की परिणाम JS स्क्रिप्ट असायला हवा होता जो तृतीय-पक्ष सेवेद्वारे साइटशी कनेक्ट केला जाईल. परिणामी, JavaScript मधील तयार कॅरोसेलची यापुढे गरज नव्हती, कारण त्यांना समाकलित करण्यासाठी, स्क्रिप्ट टॅगद्वारे साइटच्या एचटीएमएल कोडमध्ये लायब्ररी कनेक्शन जोडणे आवश्यक होते आणि फाइल्स स्वतः सर्व्हरवर कॉपी करणे किंवा सीडीएनद्वारे खेचणे आवश्यक होते, परंतु यासाठी पुन्हा संसाधन कोड संपादित करणे आवश्यक आहे.
JavaScript स्लाइडर कसा बनवायचा: सुरुवातआज, मला वाटते की अशाच परिस्थितीत सापडलेल्या प्रत्येकाने विद्यमान घडामोडींचा शोध सुरू केला, कारण... जेव्हा जेएस कॅरोसेल बनवण्याचे कार्य कार्यक्षेत्रात असते, तेव्हा ते नेहमी शक्य तितक्या लवकर केले पाहिजे. आणि अशा परिस्थितीत, कोणीही तुम्हाला बसू देणार नाही आणि तुमच्या स्वतःच्या सायकली शोधू देणार नाही.
कोड कसा लिहिला जातो, त्याचे आर्किटेक्चर काय आहे याची ग्राहक नेहमी काळजी घेत नाहीत, मुख्य गोष्ट म्हणजे परिणाम पाहणे!
परिणामस्वरुप, तुम्हाला समजल्याप्रमाणे, jQuery शिवाय JavaScript मध्ये स्लाइडर लिहिण्यापूर्वी, मी एक रेडीमेड शोधण्याचा आणि माझ्या गरजेनुसार त्यात बदल करण्याचे ठरवले. jQuery का नाही? होय, कारण लक्ष्य संसाधनावर, जिथे मी माझ्या स्लाइडरला सेवेद्वारे कनेक्ट करण्याची योजना आखली होती, कोडमधील jQuery कॉल सेवेद्वारे कनेक्ट केलेल्या स्क्रिप्टपेक्षा नंतर स्थित होता. म्हणून, माझ्या कोडमधील jQuery रचना सहज लक्षात आल्या नाहीत.
आधार म्हणून, मी हा JavaScript इमेज स्लाइडर घेतला - https://codepen.io/gabrieleromanato/pen/pIfoD.
मी तिथेच थांबायचे ठरवले कारण... त्याचा JS कोड OOP तत्त्वे वापरून लिहिला गेला आणि त्याचे वर्ग प्रोटोटाइपवर आधारित आहेत, बॅनल फंक्शन्सवर नाही.
खरे सांगायचे तर, मूलतः एक साधी डायनॅमिक स्क्रिप्टिंग भाषा म्हणून अभिप्रेत असलेल्या भाषेतील OOP, फ्रेमवर्क आणि इतर आर्किटेक्चरल गोष्टी वापरून JavaScript बद्दलची सध्याची हाईप मला खोलवर समजत नाही आणि ओळखत नाही. स्वत: JS प्रमाणेच, मला त्याच्या वाक्यरचनात्मक व्हिनिग्रेटसह स्पष्टपणे नापसंत आहे, जे समान रचना अनेक प्रकारे लिहिण्याची परवानगी देते.
परंतु, दुर्दैवाने, आधुनिक जगात काही लोक माझे स्थान सामायिक करतात, कारण... ही भाषा विलक्षण वेगाने विकसित होत आहे आणि Java, PHP, C#, Ruby आणि इतर राक्षसांना पर्याय म्हणून Node.js वापरून बॅकएंड विकसकांची मने जिंकण्याचा प्रयत्नही करत आहे.
परिणामी, काम न करता सोडले जाऊ नये म्हणून, तुम्हाला शांतपणे JavaScript शोधून काढावे लागेल. आणि मी निवडलेल्या शुद्ध JavaScript स्लाइडर अंमलबजावणीमध्ये, मला असे काही आढळले की, तुम्हाला समजले आहे, मला या भाषेत तुच्छ वाटते. म्हणूनच मी ते निवडले, जेणेकरून जावास्क्रिप्ट ओओपी आणि प्रोटोटाइप क्लासेसमध्ये काम करण्यासाठी आणि समजून घेण्याचे काही कारण असेल - अन्यथा मी माझ्या आयुष्यात त्यांना कधीही स्वेच्छेने स्पर्श केला नसता :)
मला सापडलेल्या कोडच्या आधारे, मला पॉप-अप विंडोमध्ये (या गोष्टीला पॉपअप, पॉपअप इ. असेही म्हणतात) शुद्ध JS मध्ये स्लाइडर विकसित करणे आवश्यक आहे, ज्यामध्ये स्लाइड्स स्विच करण्यासाठी बटणे आणि वर्तमानचे क्लिक करण्यायोग्य निर्देशक असतील. स्लाइड ही खिडकी बंद करण्यासाठी बटण बनवणेही आवश्यक होते.
हेच मी संपवले.
स्लाइडर JS लायब्ररी बनवणेप्रथम, मी सर्वकाही हुशारीने अंमलात आणण्याचे ठरवले आणि साइटसाठी लायब्ररीच्या रूपात जावास्क्रिप्ट स्लाइडर बनवण्याचा निर्णय घेतला जो साइटला एका स्क्रिप्टसह कनेक्ट केला जाऊ शकतो, ज्यामध्ये उपनिर्देशिकांमध्ये विभागलेले स्लाइडर घटक कॉल केले जातील. मी त्याला त्याच्या मूळ उद्देशाच्या सन्मानार्थ popupSlider.js म्हणायचे ठरवले.
त्याचा कोड GitHub वर या पत्त्यावर आढळू शकतो - https://github.com/Pashaster12/popupSlider.js
ग्रंथालयाची रचना खालीलप्रमाणे आहे.
स्लाइड फोल्डर स्लाइड प्रतिमांसाठी आहे. कंट्रोल्समध्ये JS कॅरोसेल कंट्रोल्सची चित्रे असतात (स्लायडर बंद करण्यासाठी आणि स्लाइड्स स्विच करण्यासाठी बटणे). आणि मालमत्तांमध्ये JS स्लाइडरचे स्थिर घटक आहेत: HTML मार्कअप आणि CSS शैली असलेली फाइल.
बरं, popupSlider.js फाईल हे लायब्ररीचे हृदय आहे, ज्यामध्ये कॅरोसेलच्या JavaScript क्रिया लिहिल्या जातात आणि इतर फायलींशी कनेक्शन स्थापित केले जाते. हेच आम्ही साइटवर कनेक्ट करू आणि ते इतरांना कॉल करेल.
मी आमच्या JS इमेज कॅरोसेलच्या HTML मार्कअपसह प्रारंभ करण्याचे ठरवले, जे माझ्या बाबतीत असे दिसते:
मजकूर 1 
मजकूर 2 
मजकूर 3
JavaScript मधील स्लाइडरला पॉपअप म्हणून डिझाइन करण्यासाठी, मी खालील शैली वापरल्या:
#slider ( समास: स्वयं; रुंदी: 600px !महत्त्वाचे; ओव्हरफ्लो: लपविलेले; ) #slider-wrapper (रुंदी: 9999px; उंची: 343px; स्थिती: सापेक्ष; संक्रमण: डावीकडे 400ms रेखीय; ) .स्लाइड ( फ्लोट: डावीकडे; रुंदी : 600px; स्थिती: सापेक्ष ओव्हरफ्लो: लपविलेले; .मथळा (रुंदी: 600px; उंची: 1.5; फॉन्ट-आकार: 15px; फॉन्ट-वजन: 300; मजकूर-संरेखित: मध्य; रंग: # 000; डिस्प्ले:टेबल; ) .मथळा-कंटेनर (डिस्प्ले: टेबल-सेल; व्हर्टिकल-संरेखित: मध्य; पॅडिंग: 0 20px; ) #slider-nav (स्थिती: परिपूर्ण; तळ: -36px; मजकूर-संरेखित: केंद्र; डावीकडे: 50%; ट्रान्सफॉर्म: translateX(-50%); #slider-nav a (रुंदी: 8px; उंची: 8px; मजकूर-सजावट: काहीही नाही; रंग: #000; डिस्प्ले: इनलाइन-ब्लॉक; सीमा-त्रिज्या: 50% ; समास: 0 5px; पार्श्वभूमी-रंग: #fafafa; : 20px: 50% मार्जिन-टॉप: -10px; डावीकडे: -40px; ) #prev:hover ( पार्श्वभूमी: url(../controls/arrow_left_active.png); ) #नेक्स्ट (पार्श्वभूमी: url(../controls/arrow_right_inactive.png); उजवीकडे: -40px; ) #next:hover ( पार्श्वभूमी : url(../controls/arrow_right_active.png); #cq-popup (रुंदी: 600px; z-index: 23; डावीकडे: calc(50%); शीर्ष: calc(50%); स्थिती: निश्चित ! महत्वाचे ; पार्श्वभूमी-पुनरावृत्ती: पार्श्वभूमी-रंग: #ffff; %, -50%) स्केल(1); #cq-popup .हेडर (प्रदर्शन: इनलाइन-ब्लॉक; फॉन्ट-आकार: 17px; फॉन्ट-वजन: 500; ) #cq-popup > div (रुंदी: 500px; फॉन्ट- आकार: 22px; लाइन-उंची: 36px; ) #cq-popup-btclose ( मजकूर-सजावट: काहीही नाही; स्थिती: पूर्ण; उजवीकडे: -40px; शीर्ष: 0; पार्श्वभूमी: url(./controls/btn_delete_inactive.png) ; उंची: 16px; रुंदी: 16px; उंची: 100%; पार्श्वभूमी: rgba(51,51,51,0.8); z-इंडेक्स: 22; )
या JS शैली लागू केल्यामुळे, कॅरोसेल असे दिसते:
मी HTML मार्कअप आणि CSS शैली दोन्ही popupSlider.html आणि popupSlider.css या स्वतंत्र फाइल्समध्ये हलवल्या आहेत, ज्या JavaScript स्लाइडर लायब्ररीच्या मालमत्ता निर्देशिकेत आहेत. मी हे हेतुपुरस्सर केले आहे जेणेकरून हा कोड वापरताना, वापरकर्ते JS कोडमध्ये गोंधळ न घालता मार्कअप आणि डिझाइन सहजपणे समायोजित करू शकतील, जिथे काय लिहायचे आहे ते थेट लिहावे लागेल.
याव्यतिरिक्त, बरेच लोक अजूनही साइट लोडिंगची गती वाढवण्यासाठी JS कमी करणे पसंत करतात. त्यामुळे हे सोल्यूशन निर्दिष्ट परिस्थितीत सानुकूलित करणे खूप कठीण होईल.
परिणामी, मी मुख्य लायब्ररी फाइल popupSlider.js मध्ये फक्त रेडीमेड फाइल्स समाविष्ट करण्याचा निर्णय घेतला, ज्याने माझ्या कार्यासाठी खालील फॉर्म घेतले:
फंक्शन स्लाइडर(घटक) ( this.loadStatic(); this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: function () ( this.links = this.el.querySelectorAll ("#slider-nav a"); this.el.querySelector("#slider-wrapper"); नेविगेट: फंक्शन (); ) ( var स्व = हे; साठी (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; link.addEventListener("click", function (e) { self.slide(this); }); } self.prevBtn.style.display = "none"; self.nextBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var nextSlide = document.querySelector(""); nextSlide.click(); }, false); self.prevBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var prevSlide = document.querySelector(""); prevSlide.click(); }, false); self.close(); }, slide: function (element) { this.setCurrentLink(element); var index = parseInt(element.getAttribute("data-slide"), 10) + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + index + ")"); this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; if (index < this.links.length) this.nextBtn.style.display = "block"; else if (index == this.links.length) this.nextBtn.style.display = "none"; if (index >1) this.prevBtn.style.display = "ब्लॉक"; else if (index == 1) this.prevBtn.style.display = "काही नाही"; ), setCurrentLink: फंक्शन (लिंक) ( var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "वर्तमान"; this.currentElement = link; for (var j = 0; j< a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } }, loadStatic: function () { var self = this; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "assets/popupSlider.css"; document.head.appendChild(link); var sliderHTML = ""; var xhr = new XMLHttpRequest(); xhr.open("GET", "assets/popupSlider.html", false); xhr.send(); if (xhr.status != 200) { alert("Can not load the popupSlider.html. Got the error " + xhr.status + ": " + xhr.statusText); } else { sliderHTML = xhr.responseText; } var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div); }, close: function () { document.getElementById("cq-popup-btclose").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove(); } } };
वरील कोडबद्दल काही टिप्पण्या. popupSlider.js फाईलची सामग्री एकल JavaScript स्लाइडर वर्ग आहे, ज्यामध्ये, PHP प्रमाणे, कन्स्ट्रक्टर आणि क्लास पद्धती समाविष्ट आहेत. फक्त JS मध्ये, कन्स्ट्रक्टरची व्याख्या, PHP च्या विपरीत, अनिवार्य आहे.
कन्स्ट्रक्टर खालील रचना वापरून परिभाषित केले आहे:
फंक्शन स्लाइडर(घटक) (//कन्स्ट्रक्टर कोड)
कन्स्ट्रक्टरच्या आत, क्लास ऑब्जेक्ट तयार करताना ज्या क्रिया केल्या जातील त्या निर्दिष्ट केल्या पाहिजेत.
वर्ग पद्धती स्वतः प्रोटोटाइपमध्ये स्थित असतील आणि या JavaScript वर्गाच्या सर्व उदाहरणांसाठी उपलब्ध असतील. माझ्या बाबतीत जेएस प्रोटोटाइप खालील डिझाइनद्वारे वर्णन केले आहे:
Slider.prototype = ( // पद्धती )
त्यांना खालीलप्रमाणे वर्गाच्या बाहेर बोलावले जाईल:
वर स्लाइडर = नवीन स्लाइडर (); slider.class_method();
आणि वर्ग कोडमध्येच, खालील पद्धत उपलब्ध आहे:
this.class_method();
मुख्य गोष्ट हे विसरू नका की जावास्क्रिप्टमध्ये याचे मूल्य कॉलच्या संदर्भावर अवलंबून असते, म्हणून काही पद्धतींच्या मुख्य भागामध्ये ज्यामध्ये वर्गाच्या पद्धती आणि गुणधर्मांना कॉल करणे आवश्यक होते, असे बांधकाम आहे:
वर स्व = this; self.class_method(); // वर्णन केलेल्या पद्धतीच्या कोडपेक्षा एक स्तर जास्त असलेल्या पद्धतीमध्ये प्रवेश करण्यासाठी
असे दिसते की मी कोड लिहिण्याच्या सर्व बारकाव्यांबद्दल बोललो. आता आमच्या JavaScript वर्गाच्या पद्धतींबद्दल काही शब्द, ज्यात इमेज कॅरोसेलच्या JS क्रियांचे वर्णन आहे.
लोड स्टॅटिक()
कन्स्ट्रक्टरमध्ये क्लासचे उदाहरण तयार करताना कॉल केलेली पहिली पद्धत. वेबसाइट पृष्ठाच्या HTML कोडमध्ये स्लाइडर मार्कअप आणि शैलींसह फाइल जोडण्यासाठी जबाबदार.
प्रथम, JavaScript फंक्शन डॉक्युमेंट.createElement() वापरून मेमरीमध्ये एक नवीन लिंक टॅग तयार केला जातो आणि JS स्लाइडर शैलीसह CSS फाइलच्या मार्गासह सर्व आवश्यक गुणधर्मांची मूल्ये त्यास नियुक्त केली जातात. आणि शेवटी, हेड सेक्शनच्या शेवटी JavaScript appendChild() पद्धत वापरून HTML पृष्ठावर जोडले जाते, जेथे शैली असाव्यात.
पुढे, आम्ही शुद्ध JavaScript मध्ये आमच्या स्लाइडरच्या HTML मार्कअपसह फाइलसाठी तेच करतो. येथे फक्त एक छोटासा महत्त्व आहे: आपण CSS फाईल प्रमाणेच HTML फाईल समाविष्ट करू शकत नाही. यासाठी विशेष लायब्ररी आहेत, उदाहरणार्थ, HTML मध्ये HTML समाविष्ट करण्यासाठी, w3.org वरील lib उत्कृष्ट आहे - https://www.w3schools.com/howto/howto_html_include.asp
परंतु नंतर ते एकतर स्लायडर लायब्ररीमध्येच समाविष्ट करावे लागेल किंवा वापरकर्त्यांना ते स्वतः स्थापित करण्यास सांगावे लागेल. परंतु हे सर्व सर्वोत्कृष्ट आहे, कारण ... शरीराच्या बऱ्याच हालचालींची आवश्यकता असते आणि अतिरिक्त स्क्रिप्ट्समुळे साइट लोडिंगची गती कमी होते.
सरतेशेवटी, मी JavaScript कोडमध्ये एचटीएमएल फाइलची सामग्री घेण्याचे ठरवले आणि मेमरीमध्ये तयार केलेल्या नवीन div घटकामध्ये लोड करायचे, जसे मी JavaScript मध्ये CSS फाइल समाविष्ट करण्यासाठी केले होते. व्युत्पन्न केलेला घटक साइट पृष्ठाच्या HTML कोडच्या मुख्य भागाच्या अगदी शेवटी समाविष्ट केला आहे.
जर तुम्हाला स्लायडर मार्कअपसह डिव्ह घालायचे असेल तर केवळ मुख्य भागाच्या शेवटी नाही तर विशिष्ट कंटेनरमध्ये, तुम्ही त्याऐवजी खालील कोड वापरू शकता:
Var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div);
लक्ष्य कंटेनरचा इच्छित अभिज्ञापक निर्दिष्ट करून खालील प्रविष्ट करा (माझ्या बाबतीत, HTML JS स्लाइडर id popupSlider सह घटकामध्ये स्थित असेल):
Var target = document.querySelector("#popupSlider"); target.innerHTML = sliderHTML;
loadStatic() नंतर कन्स्ट्रक्टरमध्ये कॉल केलेली पद्धत, मुख्य HTML घटकांशी संबंधित क्लास गुणधर्म सुरू करण्यासाठी आवश्यक आहे ज्यात आपण खालील कोडमध्ये प्रवेश करू.
शेवटी, navigate() पद्धतीला म्हणतात.
नेव्हिगेट()
या पद्धतीमध्ये, स्लाईड स्विच बटणांवर क्लिक केल्यावर होणाऱ्या क्रिया आणि स्लायडरच्या खाली स्थित नेव्हिगेशन घटक वर्तुळांच्या रूपात सूचित केले जातात.
सोयीसाठी, स्लाईड्स बदलण्यासाठी मी JavaScript कोड वेगळ्या स्लाईड() पद्धतीत हलवला आहे, परंतु या कोडमध्ये मी लूपमधील प्रत्येक गोल बटणासाठी क्लिक इव्हेंटला जोडतो.
जेव्हा तुम्ही "मागील स्लाइड" / "पुढील स्लाइड" बटणावर क्लिक करता, जसे तुम्ही पाहू शकता, मी फक्त संबंधित वर्तुळावरील क्लिकचे अनुकरण करण्याचे ठरवले आहे, ज्यामध्ये CSS वर्ग चालू असलेल्या वर्तमानाशी संबंधित इच्छित एक परिभाषित आहे.
स्लाइड (घटक)
स्वतः JavaScript कॅरोसेलची "जादूसाठी जबाबदार" पद्धत, ज्यामध्ये स्लाइड्सची स्थिती बदलणारा कोड असतो. अगदी सुरुवातीला, setCurrentLink() पद्धत म्हणतात, ज्याबद्दल आपण थोड्या वेळाने बोलू.
JS स्लायडर नेव्हिगेशन बटण ऑब्जेक्ट वर्तुळाच्या स्वरूपात इनपुट पॅरामीटर म्हणून पास केले जाते.
स्लाइड स्विच स्वतः असे कार्य करते:
पद्धतीच्या शेवटी, अनुक्रमे डावे/उजवे बाण म्हणून डिझाइन केलेल्या “मागील स्लाइड”/”पुढील स्लाइड” बटणांच्या वर्तनाचे वर्णन केले आहे. जर सध्याची स्लाइड संपूर्ण यादीतील पहिली असेल, तर मागील स्लाइडवर जाण्यासाठी बटण लपलेले आहे. नंतरचे असल्यास, पुढील स्लाइडवर जाण्यासाठी बटण काढा.
setCurrentLink(लिंक)
आमच्या JavaScript स्लाइडर वर्गाची ही पद्धत वर्तमान घटकाशी संबंधित नॅव्हिगेशन गोल बटण हायलाइट करण्यासाठी जबाबदार आहे. त्या. जर आमच्याकडे दुसरी स्लाइड निवडली असेल, तर दुसरे बटण हायलाइट केले जाईल.
बटणाचा ऑब्जेक्ट जो वर्तमान म्हणून निवडला पाहिजे तो फंक्शनला इनपुट पॅरामीटर म्हणून पास केला जातो.
वर्तमान घटक हायलाइट करण्याचे तर्क सोपे आहे:
वर्गाची अगदी शेवटची पद्धत, जी क्रॉसच्या स्वरूपात स्लाइडरच्या क्लोज बटणावर क्लिक करताना क्रिया परिभाषित करते. येथे, खरं तर, कोड जेएस स्लाइडर वर्गात समाविष्ट असलेल्या सर्वांमध्ये सर्वात समजण्यासारखा आहे.
जेव्हा तुम्ही क्लोज बटणावर क्लिक करता, जे त्याच्या आयडेंटिफायरद्वारे ऍक्सेस केले जाते, तेव्हा स्लाइडर घटक आणि अर्धपारदर्शक पार्श्वभूमी सेट करणारे घटक पृष्ठावरून काढून टाकले जातात. त्या बदल्यात, अनन्य अभिज्ञापकांद्वारे देखील प्राप्त केल्या जातात.
आधी वर्णन केलेल्या navigate(), ज्यामध्ये आमच्या JavaScript स्लाइडरवर होणाऱ्या क्रियांच्या सर्व परिस्थितींचा समावेश आहे.
तसे, आपण स्लाइडरच्या बाहेर क्लिक केल्यावर तो बंद करू इच्छित असल्यास, या पद्धतीमध्ये फक्त खालील कोड जोडा:
Document.getElementById("cq-popup-bg").onclick = function () ( document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove() ;
विकसित लायब्ररीवर आधारित JavaScript स्लाइड शोकाहीवेळा सराव मध्ये तुम्हाला JS स्क्रोलिंग कॅरोसेल बनवावे लागेल, ज्याला अनेकदा स्लाइड शो म्हटले जाते. माझ्या बाबतीत हे आवश्यक नव्हते, परंतु तरीही मी अंतिम लायब्ररी कोडवर आधारित एक केस बनवण्याचा निर्णय घेतला जेथे ते उपयुक्त असू शकते.
खरं तर, स्लाइड शोची JavaScript अंमलबजावणी नियमित स्लाइडरपेक्षा थोडी वेगळी असते. फरक एवढाच आहे की स्लाइड शोमध्ये, दिलेल्या वेळेच्या अंतराने स्लाइड्स आपोआप बदलतात, तर नियमित JS कॅरोसेलच्या बाबतीत ते नेव्हिगेशन घटक वापरून व्यक्तिचलितपणे बदलतात.
स्लाइडशो: फंक्शन (टाइमआउट) ( var sliderCount = this.links.length; var self = this; this.slideCycle = setInterval(function () ( var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute ("डेटा-स्लाइड"); var slideId = parseInt(currentSlideNumber, 10) + 1 self.slide(document.querySelector(""));
मला वाटते की येथे काय घडत आहे ते स्पष्ट आहे. ही पद्धत तयार करण्यासाठी, मी मॅन्युअल स्लाइड बटणांच्या क्लिक इव्हेंटमधून कोड कॉपी केला आणि तो सेटइंटरव्हल() फंक्शनला JavaScript कॉलमध्ये ठेवला, जे विशिष्ट कालावधीनंतर निर्दिष्ट क्रिया करते.
ॲक्शन स्क्रिप्ट हे निनावी फंक्शन म्हणून पहिले वितर्क म्हणून पास केले जाते आणि वेळ मध्यांतर दुसरा म्हणून पास केला जातो, जो मी व्हेरिएबल म्हणून बनवण्याचा निर्णय घेतला आहे ज्याचे मूल्य slideShow() कॉल केल्यावर पास केले जाते.
SetInterval() मधील कोडमध्ये फक्त बदल करणे आवश्यक होते ते म्हणजे स्लाईड्सची संख्या निश्चित करणे आणि स्वयंचलित स्विचिंगला चक्र देण्यासाठी वर्तमान स्लाइडच्या निर्देशांकाची त्याच्याशी तुलना करणे.
ठीक आहे, हा कोड कार्य करण्यासाठी, पद्धत स्वतःच कॉल करणे आवश्यक आहे. मी हे सर्व एकाच नेव्हिगेट () मध्ये करण्याचे ठरवले, जे सर्व प्रकारच्या स्क्रिप्ट्सचे तंतोतंत संग्रह आहे. आमच्या JS स्लाइड शोमधील स्लाइड्स आपोआप बदलण्यासाठी वेळेच्या अंतराचे मूल्य वितर्क म्हणून मी अगदी शेवटी कॉल केला (मी 2000 मिलीसेकंद किंवा 2 सेकंद निवडले, तुम्ही आवश्यकतेनुसार हा नंबर बदलू शकता):
Self.slideShow(2000);
यानंतर, तुमचा ब्राउझर साफ करण्यास विसरू नका, JavaScript स्लाइडरचे ऑपरेशन तपासा.
सिद्धांततः, सर्वकाही कार्य केले पाहिजे. नसल्यास, ब्राउझर कन्सोलमधील त्रुटींचा अभ्यास करा आणि त्या टिप्पण्यांमध्ये सामायिक करा.
परिणामी, आम्हाला एक JS स्लाइड शो मिळाला ज्यामध्ये स्लाइड्स स्वयंचलितपणे आणि एका वर्तुळात स्विच होतात, म्हणजे. जेव्हा शेवटची स्लाइड पोहोचते, तेव्हा शो नवीन लूपमध्ये जातो आणि शो पहिल्या घटकापासून पुन्हा सुरू होतो.
इमेज कॅरोसेल आणि पुनरावलोकनांसाठी विविध JS लायब्ररींसह काम करताना, माझ्या लक्षात आले की विकासक सक्रियपणे या पद्धतीचा वापर करतात, परंतु काही जोडण्यांसह. मी पाहिलेल्या सर्व उपायांमध्ये, वापरकर्त्याने मॅन्युअल स्विच केल्यास स्वयंचलित स्लाइड शोमध्ये व्यत्यय येतो. म्हणून मी माझ्या लायब्ररीतही असेच करायचे ठरवले.
JavaScript कॅरोसेल स्लाइड्सच्या स्वयंचलित डिस्प्लेमध्ये व्यत्यय आणण्यासाठी, मी मानक JS फंक्शन clearInterval() वापरण्याचे ठरवले आहे, ज्याला सेट केल्यावर setInterval() फंक्शनद्वारे परत केलेल्या वेळेच्या मध्यांतराचा अभिज्ञापक म्हणून मी पास करतो.
परिणामी, मला खालील कोड मिळाला, जो मी स्वतंत्र पद्धत म्हणून न लिहिण्याचा निर्णय घेतला:
ClearInterval(self.slideCycle);
आणि विविध नेव्हिगेशन घटकांवर क्लिक करताना क्रियांचे वर्णन केलेल्या ठिकाणी ते ठेवले, उदा. खालील मध्ये:
Link.addEventListener("क्लिक", फंक्शन (ई) (...)); self.prevBtn.addEventListener("क्लिक", फंक्शन (e) (...)); self.nextBtn.addEventListener("क्लिक", फंक्शन (e) (...));
clearInterval() ला क्लिक इव्हेंटच्या जवळ कॉल करणे चांगले आहे, मुख्य गोष्ट त्याच्या आधी आहे, नंतर नाही.
साइटवर JavaScript स्लाइडरचे एकत्रीकरणतर, शुद्ध JS मधील आमचा स्लाइडर तयार आहे. आता फक्त ते साइटशी कनेक्ट करणे बाकी आहे.
हे करण्यासाठी, तुम्हाला पुढील पायऱ्या क्रमशः पार पाडाव्या लागतील, जे सामान्यतः कोणत्याही तृतीय-पक्ष JavaScript लायब्ररींना एकत्रित करताना मानक क्रिया आहेत.
1 ली पायरी . आम्ही आमच्या वेबसाइटवर लायब्ररी फाइल्स वेगळ्या निर्देशिकेत कॉपी करतो.
पायरी 2. क्लोजिंग बॉडी टॅगच्या आधी स्लायडर प्रदर्शित करणे आवश्यक असलेल्या पृष्ठांच्या HTML मध्ये खालील कोड जोडा:
पायरी 3. आम्ही कोणत्याही विद्यमान JavaScript फाईलमध्ये JS कॅरोसेल कॉल करण्यासाठी खालील कोड ठेवतो, जो स्लायडरला कनेक्ट केल्यानंतर पृष्ठावर समाविष्ट केला जातो:
Var aSlider = नवीन स्लाइडर("#slider");
तुम्ही बघू शकता, हा कोड मूलत: स्लाइडर क्लासचा एक ऑब्जेक्ट तयार करत आहे, जो popupSlider.js मध्ये आहे. म्हणूनच क्लास फाईल स्वतः पृष्ठाशी जोडल्यानंतरच तो कॉल केला पाहिजे.
JavaScript कॅरोसेलमध्ये नवीन स्लाइड्स जोडत आहेयेथे सर्व काही अगदी सोपे आहे. आमच्या स्लाइड स्लाइड लायब्ररीच्या स्लाइड डिरेक्ट्रीतून घेतलेल्या असल्याने, नवीन चित्रे जोडताना तुम्हाला आवश्यक फाईल्स त्यामध्ये टाकण्याची आवश्यकता आहे, प्रथम त्यांना इतरांप्रमाणेच आकार द्यावा लागेल.
आणि नंतर assets/popupSlider.html फाइलच्या कोडमध्ये आयडी स्लाइडर-रॅपरसह कंटेनरमध्ये नवीन ब्लॉक जोडा:
मजकूर
तत्वतः, आपण फक्त एक समान विद्यमान कॉपी करू शकता आणि प्रतिमा फाइलचा मार्ग आणि स्वाक्षरीचा मजकूर बदलू शकता (जर ते आवश्यक असेल तर).
तुम्हाला वर्तुळाच्या स्वरूपात एक नवीन नेव्हिगेशन घटक देखील जोडण्याची आवश्यकता असेल, कारण... याक्षणी, त्याची स्वयंचलित जोड अद्याप लागू केलेली नाही. हे करण्यासाठी, तुम्हाला खालील कोड स्लाइडर-एनएव्ही आयडीसह कंटेनरमध्ये जोडणे आवश्यक आहे, ते अगदी शेवटी लिहून:
डेटा-स्लाइड विशेषताचे मूल्य इतर घटकांच्या सर्वात मोठ्या मूल्यापेक्षा जास्त असणे आवश्यक आहे. जास्तीत जास्त वर्तमान एकाने वाढवणे पुरेसे आहे.
JS कॅरोसेल एका स्क्रिप्टमध्ये पॅक करत आहेबस्स, JavaScript स्लाइडर तयार आणि कनेक्ट आहे. जर तुम्हाला त्याची अजिबात गरज असेल तर मी वैयक्तिकरित्या हा पर्याय वापरण्याची शिफारस करतो :)
त्याच्या ऑपरेशनला गती देण्यासाठी, तसे, आपण स्थिर घटक अधिक संकुचित करू शकता: CSS, HTML आणि JavaScript फाइल्स. मी हे केले नाही आणि तुम्हाला मिनिफाइड कोड ऑफर करतो, कारण आता बऱ्याच फ्रंटएंड बिल्ड सिस्टम आहेत: गुल्प, ग्रंट, वेबपॅक आणि इतर. आणि फायली संकुचित आणि कनेक्ट करण्यासाठी त्या प्रत्येकाचे स्वतःचे अल्गोरिदम आहेत.
याव्यतिरिक्त, कमी केलेले परिणाम वेगवेगळ्या OS वर वेगळ्या पद्धतीने कार्य करू शकतात. सर्वसाधारणपणे, अनेक कारणे आहेत.
आणि स्त्रोत कोड स्वतःच, मला वाटते, इतके जड नाहीत की त्यांना या प्रक्रियेची आवश्यकता आहे. परंतु आपल्याला त्यांची आवश्यकता असल्यास, आपले ओएस आणि संग्राहक विचारात घेऊन मिनिफिकेशन स्वतः कॉन्फिगर करा.
मी अगदी सुरुवातीला लिहिल्याप्रमाणे, सुरुवातीला माझ्यासाठी सेट केलेले कार्य सोडवण्यासाठी, मला साइटवरील तृतीय-पक्ष सेवेद्वारे माझ्या स्लाइडरच्या योग्य वापरासाठी एकच JS फाइल मिळणे आवश्यक आहे. या कारणास्तव, मी, काटेकोरपणे, तयार तृतीय-पक्ष लायब्ररी वापरत नाही.
मग एकल JavaScript कॅरोसेल स्क्रिप्टचा पर्याय तुमच्यासाठी उपयुक्त ठरेल, कारण... सर्व सामग्री थेट त्यात समाविष्ट केली जाईल, HTML/CSS कोडसह, जो लायब्ररीच्या बाबतीत वेगळ्या फायलींमध्ये संग्रहित केला जातो.
माझ्या बाबतीत स्क्रिप्टमध्ये दोन भाग आहेत. पहिल्या भागात popupSlider.js फाइलची सामग्री होती, जी मी दुसऱ्यांदा सादर करणार नाही. क्लास कोडमधून loadStatic() पद्धतीचे वर्णन आणि त्याचा कॉल काढून ते स्वतः घाला, कारण आम्हाला त्यांची गरज भासणार नाही.
साइटसाठी एकल JavaScript स्लाइडर स्क्रिप्टचा दुसरा भाग DOMContentLoaded इव्हेंटसाठी हँडलर आहे, जे पृष्ठ सामग्री लोड केल्यावर उद्भवते.
तेथे आम्ही कॅरोसेल JS कोड HTML/CSS पृष्ठावर जोडू आणि स्लाइडर क्लासचा एक ऑब्जेक्ट तयार करू, जो स्लायडर स्वतः सक्रिय करण्यासारखा आहे.
योजनाबद्धपणे कोड असे दिसते:
/* loadStatic() पद्धतीचे वर्णन न करता popupSlider.js ची सामग्री आणि तिचा कॉल */ document.addEventListener("DOMContentLoaded", function())( var str = "\ \ /*css code*/ \ /* html कोड * / "; var div = document.createElement("div"); div.innerHTML = str; document.body.appendChild(div); var aSlider = new Slider("#slider");
माझ्या बाबतीत सर्व्हरवर फाइल्स अपलोड करण्याचा पर्याय पूर्णपणे बंद असल्याने, मला JavaScript कॅरोसेल कंट्रोल्सच्या इमेज फाइल्स क्लाउडवर अपलोड करायच्या होत्या आणि HTML आणि CSS कोडमध्ये त्यांच्याकडे जाणाऱ्या पाथऐवजी, तेव्हा व्युत्पन्न केलेल्या लिंक्स लिहाव्या लागल्या. बचत.
जर तुम्हाला अशा अडचणी येत नसतील तर तुम्हाला काहीही बदलण्याची गरज नाही, परंतु स्लाइड्स आणि कंट्रोल लायब्ररी डिरेक्टरी सर्व्हरवर कॉपी करण्यास विसरू नका आणि त्यांना योग्य मार्ग निर्दिष्ट करा.
सानुकूल JS स्लाइडर - विकास संभावनाखरे सांगायचे तर, मी तयार केलेल्या सोल्यूशनच्या लक्ष्यित समर्थन आणि विकासामध्ये गुंतण्याची माझी योजना नाही :) याक्षणी, सारख्या स्लाइडरचा एक समूह आणि एक लहान कार्ट आहे, ज्यांचा स्वतःचा इतिहास आहे. नख चाचणी केली आहे आणि वापरकर्ते आणि विकासकांच्या मोठ्या समुदायाद्वारे समर्थित आहे.
हा संपूर्ण प्रवास एकट्याने सुरुवात करून दुसरी बाईक तयार करणे माझ्यासाठी काहीसे मनोरंजक नाही आणि माझ्याकडे त्यासाठी वेळ नाही. परंतु, दुसरीकडे, हा JavaScript स्लाइडर त्याच्या कोडचे रिफॅक्टरिंग करून आणि अद्याप अस्तित्वात नसलेली नवीन मनोरंजक कार्ये लागू करून विकासाचा सराव करण्याची एक उत्कृष्ट संधी आहे.
त्यामुळे तुम्हाला, माझ्याप्रमाणे, प्रयोगांसाठी कोड बेसची आवश्यकता असल्यास आणि तुमच्याकडे किमान काही अतिरिक्त मोकळा वेळ असल्यास, मी वर्णन केलेल्या JavaScript स्लाइडरचा कोड कॉपी करा किंवा GitHub वर योगदानकर्त्यांमध्ये सामील व्हा. भांडार खुले आहे, आणि मी लेखाच्या सुरुवातीला त्याची लिंक दिली आहे.
जर तुम्हाला माझ्या निर्मितीवर तुमची फ्रंट-एंड कौशल्ये सुधारायची असतील, तर मी तुम्हाला कोडला आवश्यक असलेल्या संपादने आणि सुधारणांची एक छोटी यादी देखील देऊ शकतो आणि त्यांच्या अंमलबजावणीच्या दृष्टीने तुम्हाला स्वारस्य असू शकते:
मी दिलेल्या संपादनांची यादी अर्थातच अंतिम नाही आणि ती पूरक असू शकते. लेखाच्या खालील टिप्पण्यांमध्ये तुमच्या सूचना, विचार आणि शुभेच्छांबद्दल लिहा आणि तुमच्या मित्रांसह सोशल नेटवर्क्सद्वारे शेअर करा जेणेकरून त्यांना विकासात सामील करून घ्या.
मी तुम्हाला माझ्या संहितेचा काटेकोरपणे न्याय करू नका असे सांगतो, कारण मी आधीच म्हटल्याप्रमाणे, मी स्वतःला फ्रंटएंड विशेषज्ञ मानत नाही आणि नाही. मी तुमच्या कोडिंग शैलीवरील सर्व टिप्पण्यांसाठी देखील खुला आहे आणि आशा करतो की मी तुमच्याकडून काही शिकू शकेन आणि तुम्ही माझ्याकडून, म्हणजे. OpenSource उत्पादनांचा विकास आणि समर्थन करण्याचा मुख्य उद्देश पूर्ण करा.
प्रकल्प समुदायांमध्ये सामील व्हा, अद्यतनांची सदस्यता घ्या आणि मी तुम्हाला काही मदत करण्यास सक्षम असल्यास किंवा मी जे करतो ते तुम्हाला आवडत असल्यास तुम्ही लेखाच्या अंतर्गत फॉर्म वापरून मला आर्थिक मदत देखील करू शकता :)
मला एवढेच सांगायचे होते! ऑल द बेस्ट! 🙂
JS मध्ये स्लायडर कसा बनवायचा हे सांगण्यासाठी मला अनेक वेळा विचारण्यात आले आहे, परंतु मी सर्व काही सांगितले नाही. मुख्य कारण म्हणजे मला कसे माहित नव्हते.
काही वेळा मला जाणवले की काही वेळा रेडीमेड शोधण्यापेक्षा स्लाइडर लिहिणे सोपे असते. म्हणून, मी तुम्हाला असा स्लाइडर तयार करण्याचा धडा देऊ इच्छितो. हे स्वतः करणे सोपे आहे आणि कोड 2 KB पेक्षा कमी वेळ घेतो.
कार्यप्रतिमा स्लाइडर तयार करा. परिमाण काही फरक पडत नाही, फक्त प्रतिमा समान आकाराच्या असणे आवश्यक आहे. स्क्रिप्ट कनेक्ट करण्यापूर्वी, jQuery समाविष्ट करण्यास विसरू नका:
स्लाइडर तयार करणे
स्लाइडर नियंत्रित करण्यासाठी, पांढऱ्या वर्तुळांसह एक मेनू वापरला जाईल, सक्रिय बुकमार्क हिरवा असेल. मेनू गतिशीलपणे तयार केला जातो. वेबमास्टरचे कार्य प्रतिमांची सूची तयार करणे आणि योग्य वर्ग नियुक्त करणे आहे. तुमच्याकडे पृष्ठावर कितीही स्लाइडर असू शकतात, ते एकमेकांच्या कामात व्यत्यय आणत नाहीत.
स्लाइडर कोड असा असेल:
स्लाइडर नियंत्रित करण्यासाठी तुम्हाला खालील कोडची आवश्यकता आहे:
$(document).ready(function() ( $(."slider").each(function () ( // process each slider var obj = $(this); $(obj).append("");$ (obj).शोधा("li").each(function () ( $(obj).find(."nav").append(""); // नेव्हिगेशन ब्लॉक जोडा $(this).addClass(") स्लाइडर "+$(this).index()); )); $(obj).find("span").first().addClass("चालू"); // पहिला मेनू आयटम सक्रिय करा )); )); फंक्शन स्लाइडरजेएस (obj, sl) ( // स्लाइडर फंक्शन var ul = $(sl).find("ul"); // ब्लॉक शोधा var bl = $(sl).find("li.slider"+obj) ; // कोणतेही ब्लॉक घटक शोधा var step = $(bl).width(); // object width $(ul).animate((marginLeft: "-"+step*obj), 500 // 500 आहे. स्पीड); / शोधा, ज्या ब्लॉकमध्ये $(sl).find("span").removeClass("चालू"); // सक्रिय घटक काढून टाका चालू एक सक्रिय var obj = $ (this).attr("rel"); // त्याचा नंबर sliderJS(obj, sl // slide return false);
आणि स्लाइडरसाठी शैली खालीलप्रमाणे आवश्यक आहे:
.slider ( z-index: 9; रुंदी: 700px; उंची: 290px; ओव्हरफ्लो: लपवलेले; समास: 0 0 7px; स्थिती: सापेक्ष; ) .slider ul, .slider li ( पॅडिंग: 0; समास: 0; सूची- शैली-प्रकार: काहीही नाही; ) .स्लायडर ul (रुंदी: 9999px; ) .slider ul li (सूची-शैली-प्रकार: काहीही नाही; फ्लोट: डावीकडे; रुंदी: 700px; उंची: 290px; ) .slider (स्थिती: परिपूर्ण ; डावीकडे: 15px; तळाशी: 12px; .slider .nav span (अपारदर्शकता: 0 8px 0 0; रुंदी: 16px; उंची: 16px; बॉर्डर-रेडियस: 8px; कर्सर: hidden; overflow : block; box-shadow: 0 1px 2px #000 .slider.nav span.on (पार्श्वभूमी: #2e9419; )
तुम्ही बघू शकता, कोड अत्यंत सोपा आहे. मी विशेषत: संक्रमणाच्या भिन्न शैली बनवल्या नाहीत, परंतु स्लाइड्सच्या साध्या रिवाइंडिंगवर सेटल केले. याव्यतिरिक्त, स्लाइड्स आपोआप बदलणार नाहीत. मला कोणाबद्दलही माहिती नाही, पण माझ्या नकळत केलेल्या पेजवरील कोणत्याही ॲनिमेशनमुळे मी नाराज आहे.
आज आपण आपल्या स्वत: च्या हातांनी jQuery वापरून स्लाइडर कसा बनवू शकतो ते पाहू.
स्लाइडर (किंवा काही लोक त्याला रोटेटर म्हणतात)वेबसाइटवर एक ब्लॉक आहे ज्यामध्ये लिंक्स (आणि शक्यतो मजकूर) असलेल्या चित्रांचा संच असतो जे वेळोवेळी एकमेकांना बदलतात.
तर. प्रथम, आपल्याला एक ब्लॉक बनवावा लागेल ज्यामध्ये सर्व चित्रे असतील (याला व्ह्यूपोर्ट म्हणू या, म्हणजे “स्लायडर दृश्यमानता क्षेत्र”).
त्यामध्ये एक अगणित यादी (ul) टाकू जेणेकरुन आपण सर्व स्लाइड्स एका ठिकाणी सोयीस्करपणे संग्रहित करू शकू (तत्त्वतः, आपण अंतर्गत घटकांना समर्थन देणारा कोणताही ब्लॉक कंटेनर वापरू शकता).
बरं, आणि त्यानुसार, स्लाइड्स स्वतःच, जे jQuery स्लाइडरमध्ये स्थित असतील.
HTML असे दिसले पाहिजे:
- स्लाइड 1
- स्लाइड 2
- स्लाइड 3
चला ताबडतोब CSS लिहू जेणेकरून HTML कोड योग्यरित्या कार्य करेल.
त्यामुळे:
1) आम्हाला व्ह्यूपोर्टमध्ये फक्त सध्या आवश्यक असलेली सामग्री दाखवायची आहे आणि बाकीच्या स्लाइड लपवल्या आहेत
2) जेणेकरून स्लाइड कंटेनर (उल, जो व्ह्यूपोर्टच्या आत असतो) सहजपणे डावीकडे आणि उजवीकडे जाऊ शकतो
3) जेणेकरून स्लाइड्स (ज्या आम्ही सूची घटकांच्या स्वरूपात बनविल्या आहेत) डावीकडून उजवीकडे एकामागून एक स्थित आहेत).
येथे CSS आहे, त्यात सर्व काही सोपे आहे: ओव्हरफ्लो: vieport साठी लपवलेले, स्थिती: ul आणि float साठी absolute: li साठी बाकी.
व्ह्यूपोर्ट (रुंदी: 300px; उंची: 100px; ओव्हरफ्लो: लपलेले; स्थान: सापेक्ष; ) .स्लाइडरॅपर (स्थिती: परिपूर्ण; डावीकडे: 0; शीर्ष: 0; उंची: 100px; समास: 0; पॅडिंग: 0; ) .स्लाइड( रुंदी: 300px; डावीकडे: 0; पार्श्वभूमी;
उदाहरणार्थ, निवडलेले व्ह्यूपोर्ट आणि स्लाइडचे आकार 300x100 पिक्सेल आहेत (परंतु ते व्ह्यूपोर्ट आणि स्लाइडशी जुळले पाहिजेत). प्रथम, द्वितीय आणि तृतीय वर्ग केवळ स्पष्टतेसाठी स्लाइड्सचे रंग सेट करण्यासाठी वापरले जातात;
जे.एस. jQuery मध्ये स्लाइडरआता jQuery कोडकडे वळू या, जे स्वतःच काही जास्त क्लिष्ट नाही.
स्लाईड्स ठराविक कालावधीने (javascript setInterval) स्क्रोल केल्या आहेत आणि स्लाइडवर फिरत असताना, हालचाली थांबवल्या गेल्या आहेत याची खात्री करणे आवश्यक आहे (जेणेकरून एखादी व्यक्ती स्लाइडची सामग्री वाचू शकेल).
तर आम्हाला हा jQuery कोड मिळेल:
Var slideWidth=300; var स्लाइडर टाइमर; $(function())( $(."slidewrapper").width($(."slidewrapper").children().size()*slideWidth); sliderTimer=setInterval(nextSlide,1000); $(".viewport " .hover(function())( clearInterval(sliderTimer); ),function())(sliderTimer=setInterval(nextSlide,1000); )); फंक्शन nextSlide())( var currentSlide=parseInt($(."slidewrapper").data("current")); currentSlide++; if(currentSlide>=$(."slidewrapper").children().size()) ( currentSlide=0; ) $(".slidewrapper").animate((डावीकडे:-currentSlide*slideWidth),300).data("current",currentSlide);
क्रमाने:
1) व्हेरिएबल = स्लाइडची लांबी घोषित करा
2) टाइमर हँडलर व्हेरिएबल घोषित करा (जे स्लाइड्स बदलण्याचा कालावधी मोजेल)
3) जेव्हा पृष्ठ लोड होते, तेव्हा आम्ही टाइमर सुरू करतो आणि स्लाइडवर माउस फिरवण्याच्या क्रियांना बांधतो (माऊसच्या खाली असलेल्या स्लाइड्सच्या हालचालीला विराम देण्यासाठी)
4) ul कंटेनरची लांबी = स्लाइडची लांबी * स्लाइड्सच्या संख्येनुसार सेट करा (जेणेकरून स्लाइड्स दुसऱ्या ओळीवर पसरणार नाहीत).
5) स्लाइड बदलणारे फंक्शन लिहा (आम्ही आता कुठे आहोत ते तपासा - कोणती स्लाइड, डेटा-करंट उल-कंटेनर विशेषता वापरून; वर्तमान स्थिती वाढवा; ते सर्व स्लाइड्सच्या फ्रेमच्या पलीकडे जात नाही हे तपासा; स्लाइडर हलवा- पिक्सेलच्या आवश्यक संख्येने डावीकडे कंटेनर).
आम्ही jQuery स्लाइडरची कार्यरत आवृत्ती विकसित केली आहे जी कार्य करते आणि वेबसाइटवर काम करताना सहजपणे वापरली जाऊ शकते.
शेवटी, कोड jsfiddle.net वर पोस्ट केला जातो, जिथे तुम्ही क्लिक करून खेळू शकता.
http://jsfiddle.net/FUxWc/
आपल्याकडे काही प्रश्न असल्यास, टिप्पण्या खुल्या आहेत, आम्ही उत्तर देऊ, मदत करू आणि सल्ला देऊ.
आपल्याला आपल्या साइटवर उच्च-गुणवत्तेचा jQuery प्रतिमा स्लाइडर जोडण्याची आवश्यकता असल्यास, या लेखात आपल्याला आवश्यक प्लगइनचे वर्णन सापडेल. जरी JQuery ने JavaScript सह काम करणे खूप सोपे केले आहे, तरीही आम्हाला वेब डिझाइन प्रक्रियेला गती देण्यासाठी प्लगइनची आवश्यकता आहे.
आम्ही यापैकी काही प्लगइनमध्ये बदल करू शकतो आणि नवीन स्लाइडर तयार करू शकतो जे आमच्या साइटच्या उद्देशांसाठी अधिक योग्य आहेत.
इतर स्लाइडरसाठी, तुम्ही फक्त शीर्षके, प्रतिमा जोडा आणि स्लाइडरसह येणारे स्लाइड संक्रमण प्रभाव निवडा. हे सर्व प्लगइन तपशीलवार दस्तऐवजीकरणासह आहेत, त्यामुळे त्यांना नवीन प्रभाव किंवा कार्ये जोडणे कठीण होणार नाही. तुम्ही अनुभवी JQuery प्रोग्रामर असल्यास तुम्ही इव्हेंट-आधारित ट्रिगर बदलू शकता.
रिस्पॉन्सिव्ह डिझाईनसारखे नवीनतम ट्रेंड वेब प्रोजेक्टसाठी खूप महत्वाचे आहेत, मग तुम्ही प्लगइन किंवा स्क्रिप्ट लागू करत असाल. हे सर्व घटक यातील प्रत्येक प्लगइन अतिशय लवचिक बनवतात. 2014 मध्ये समोर आलेल्या प्रत्येक गोष्टीचा या यादीत समावेश करण्यात आला आहे.
JQuery इमेज स्लाइडर Jssor रिस्पॉन्सिव्ह स्लाइडरमी अलीकडेच या शक्तिशाली JQuery स्लाइडरला भेटलो आणि ते त्याचे कार्य अतिशय चांगले करते हे प्रथम पाहण्यास सक्षम होते. यात अमर्याद शक्यता आहेत ज्यांचा विस्तार स्लाइडरच्या ओपन सोर्स कोडद्वारे केला जाऊ शकतो:
- अनुकूली डिझाइन;
- 15 पेक्षा जास्त सानुकूलित पर्याय;
- 15 पेक्षा जास्त प्रतिमा बदलणारे प्रभाव;
- प्रतिमा गॅलरी, कॅरोझेल, पूर्ण स्क्रीन आकार समर्थन;
- अनुलंब बॅनर रोटेटर, स्लाइड्सची सूची;
- व्हिडिओ समर्थन.
डेमो | डाउनलोड करा
PgwSlider - JQuery / Zepto वर आधारित प्रतिसाद देणारा स्लाइडरया प्लगइनचे एकमेव कार्य म्हणजे प्रतिमांच्या स्लाइड्स दाखवणे. हे खूप कॉम्पॅक्ट आहे, कारण JQuery फायली फक्त 2.5 KB आकाराच्या आहेत, ज्यामुळे ते खरोखर द्रुतपणे लोड होऊ शकते:
- अनुकूली मांडणी;
- एसइओ ऑप्टिमायझेशन;
- विविध ब्राउझरसाठी समर्थन;
- साधी प्रतिमा संक्रमणे;
- संग्रहण आकार फक्त 2.5 KB आहे.
डेमो | डाउनलोड करा
एक लवचिक आणि उपयुक्त JQuery स्लाइडर वृत्त संसाधनांसाठी डिझाइन केलेले आहे ज्यात डाव्या बाजूला प्रकाशनांची सूची आहे आणि उजवीकडे प्रदर्शित केलेली प्रतिमा:
- अनुकूली डिझाइन;
- बातम्या स्विच करण्यासाठी अनुलंब स्तंभ;
- विस्तारित शीर्षलेख.
डेमो | डाउनलोड करा
या स्लाइडरमध्ये jQuery नाही, परंतु मी ते सादर करू इच्छितो कारण ते अतिशय संक्षिप्त आहे आणि पृष्ठ लोड होण्याच्या वेळेत लक्षणीय घट करू शकते. तुम्हाला ते आवडल्यास मला कळवा:
- अनुकूली मांडणी;
- साधे डिझाइन;
- स्लाइड बदलण्याचे विविध पर्याय;
- किमान JavaScript कोड;
- आकार फक्त 3KB आहे.
डेमो | डाउनलोड करा
लवचिक मांडणी आणि सुंदर डिझाईन असलेली दस्तऐवज-विखुरलेली-एक-डेस्क शैली गॅलरी तुमच्यापैकी अनेकांच्या आवडीची असावी. टॅब्लेट आणि मोठ्या प्रदर्शनांसाठी अधिक योग्य:
- अनुकूली स्लाइडर;
- सपाट डिझाइन;
- यादृच्छिक स्लाइड बदल;
- स्त्रोत कोडमध्ये पूर्ण प्रवेश.
डेमो | डाउनलोड करा
डेमो | डाउनलोड करा
HiSlider ने एक नवीन मोफत jQuery स्लाइडर प्लगइन सादर केले आहे ज्यासह तुम्ही विलक्षण संक्रमणांसह विविध प्रतिमा गॅलरी तयार करू शकता:
- अनुकूली स्लाइडर;
- प्रोग्रामिंग ज्ञान आवश्यक नाही;
- अनेक आश्चर्यकारक टेम्पलेट्स आणि स्किन्स;
- सुंदर संक्रमण प्रभाव;
- विविध प्लॅटफॉर्मसाठी समर्थन;
- WordPress, Joomla, Drupal सह सुसंगत;
- विविध प्रकारची सामग्री प्रदर्शित करण्याची क्षमता: प्रतिमा, YouTube व्हिडिओ आणि Vimeo व्हिडिओ;
- लवचिक सेटअप;
- उपयुक्त अतिरिक्त वैशिष्ट्ये;
- अमर्यादित सामग्री प्रदर्शित केली आहे.
डेमो | डाउनलोड करा
WOW स्लाइडर हे आश्चर्यकारक व्हिज्युअल इफेक्ट्स (डोमिनो, रोटेट, ब्लर, फ्लिप आणि फ्लॅश, फ्लाय आउट, ब्लाइंड्स) आणि व्यावसायिक टेम्पलेट्ससह एक प्रतिसादात्मक jQuery प्रतिमा स्लाइडर आहे.
WOW स्लाइडर एका इन्स्टॉलेशन विझार्डसह येतो जो तुम्हाला कोड समजल्याशिवाय किंवा प्रतिमा संपादित केल्याशिवाय काही सेकंदात विलक्षण स्लाइडर तयार करू देतो. Joomla आणि WordPress साठी प्लगइनच्या आवृत्त्या डाउनलोड करण्यासाठी देखील उपलब्ध आहेत:
- पूर्णपणे प्रतिसाद;
- सर्व ब्राउझर आणि सर्व प्रकारच्या डिव्हाइसेसना समर्थन देते;
- स्पर्श उपकरणांसाठी समर्थन;
- वर्डप्रेसवर सुलभ स्थापना;
- कॉन्फिगरेशनमध्ये लवचिकता;
- SEO-अनुकूलित.
डेमो | डाउनलोड करा
Nivo Slider हे जगभरात सर्वात सुंदर आणि वापरण्यास सुलभ इमेज स्लाइडर म्हणून ओळखले जाते. निवो स्लाइडर प्लगइन विनामूल्य आहे आणि एमआयटी परवान्याअंतर्गत जारी केले आहे:
- JQuery 1.7 आणि वरील आवश्यक आहे;
- सुंदर संक्रमण प्रभाव;
- कॉन्फिगर करण्यासाठी सोपे आणि लवचिक;
- संक्षिप्त आणि अनुकूली;
- मुक्त स्रोत;
- शक्तिशाली आणि साधे;
- अनेक भिन्न टेम्पलेट्स;
- स्वयंचलित प्रतिमा क्रॉपिंग.
डेमो | डाउनलोड करा
ही कल्पना Apple च्या स्लाइडरद्वारे प्रेरित होती, ज्यामध्ये अनेक लहान घटक वेगवेगळ्या ॲनिमेशन प्रभावांसह उडू शकतात. विकसकांनी ही संकल्पना अंमलात आणण्याचा प्रयत्न केला, एक साधी ऑनलाइन स्टोअर डिझाइन तयार करण्यासाठी किमान आवश्यकता लक्षात घेऊन, ज्यामध्ये "उडणारे" घटक भिन्न श्रेणींचे प्रतिनिधित्व करतात:
- अनुकूली मांडणी;
- किमान डिझाइन;
- विविध ड्रॉप-आउट आणि स्लाइड बदलणारे प्रभाव.
डेमो | डाउनलोड करा
एक अतिशय सोपा स्लाइडर जो पृष्ठाच्या रुंदीच्या 100% व्यापतो आणि मोबाइल डिव्हाइसेसच्या स्क्रीन आकारांशी जुळवून घेतो. हे CSS संक्रमणांसह कार्य करते आणि अँकरसह प्रतिमा "स्टॅक" केल्या जातात. तुम्ही प्रतिमेला लिंक जोडू इच्छित नसल्यास अँकर बदलला किंवा काढला जाऊ शकतो.
स्थापित केल्यावर, स्लायडर स्क्रीनच्या रुंदीच्या 100% पर्यंत विस्तृत होतो. हे स्लाइड प्रतिमांचा आकार आपोआप कमी करू शकते:
- अनुकूली JQuery स्लाइडर;
- पूर्ण आकार;
- किमान डिझाइन.
डेमो | डाउनलोड करा
लवचिक सामग्री स्लाइडर मूळ घटकाच्या परिमाणांवर आधारित रुंदी आणि उंची स्वयंचलितपणे समायोजित करतो. हा एक साधा jQuery स्लाइडर आहे. यात शीर्षस्थानी एक स्लाइड क्षेत्र आणि तळाशी नेव्हिगेशन टॅब बार आहे. स्लाइडर मूळ कंटेनरच्या परिमाणानुसार त्याची रुंदी आणि उंची समायोजित करतो.
लहान कर्ण स्क्रीनवर पाहिल्यावर, नेव्हिगेशन टॅब लहान चिन्हांमध्ये बदलतात:
- अनुकूली डिझाइन;
- माऊस क्लिक स्क्रोलिंग.
डेमो | डाउनलोड करा
एक प्रायोगिक स्लाइडर जो 3D मध्ये प्रतिमांमधून स्क्रोल करतो. दोन स्टॅक कागदाच्या स्टॅकसारखे दिसतात, ज्यामधून, स्क्रोल केल्यावर, स्लाइडरच्या मध्यभागी प्रतिमा प्रदर्शित केल्या जातात:
- अनुकूली डिझाइन;
- फ्लिप - संक्रमण;
- 3D प्रभाव.
डेमो | डाउनलोड करा
हे ट्युटोरियल तुम्हाला ट्विस्टसह स्लाइडर कसे तयार करायचे ते दर्शवेल: तुम्ही पुढील किंवा मागील प्रतिमा उघडता तेव्हा "कट" करा आणि वर्तमान स्लाइड प्रदर्शित करा. JQuery आणि CSS ॲनिमेशन वापरून, आम्ही अद्वितीय संक्रमण प्रभाव तयार करू शकतो:
- अनुकूली डिझाइन;
- विभाजन संक्रमण;
- पूर्ण स्क्रीन स्लाइडर.
डेमो | डाउनलोड करा
कोणत्याही अनावश्यक घंटा आणि शिट्ट्या नाहीत, आकारात 3KB पेक्षा कमी. तुमच्या स्लाइड्ससाठी कोणताही HTML कोड वापरा, तो CSS ने वाढवा. अनस्लायडरशी संबंधित सर्व काही GitHub वर होस्ट केले आहे:
- विविध ब्राउझरसाठी समर्थन;
- कीबोर्ड समर्थन;
- उंची समायोजन;
- अनुकूली डिझाइन;
- इनपुट समर्थनाला स्पर्श करा.
डेमो | डाउनलोड करा
एक साधे आणि संक्षिप्त प्लगइन (फक्त 1 KB आकारात) जे कंटेनरमधील घटकांचा वापर करून प्रतिसाद देणारा स्लाइडर तयार करते. ResponsiveSLides.js ब्राउझरच्या विस्तृत श्रेणीसह कार्य करते, IE 6 आणि त्यावरील IE च्या सर्व आवृत्त्यांसह:
- पूर्णपणे प्रतिसाद;
- आकार 1 KB;
- JavaScript द्वारे चालविण्याच्या क्षमतेसह CSS3 संक्रमणे;
- बुलेट केलेल्या याद्या वापरून साधे मार्कअप;
- संक्रमण प्रभाव आणि एका स्लाइडचा पाहण्याचा कालावधी सानुकूलित करण्याची क्षमता;
- एकाधिक स्लाइड शो तयार करण्याच्या क्षमतेस समर्थन देते;
- स्वयंचलित आणि मॅन्युअल स्क्रोलिंग.
डेमो | डाउनलोड करा
कॅमेरा हे अनेक संक्रमण प्रभाव आणि प्रतिसादात्मक मांडणीसह प्लगइन आहे. सेट अप करणे सोपे, मोबाइल उपकरणांद्वारे समर्थित:
- पूर्णपणे प्रतिसाद डिझाइन;
- स्वाक्षरी;
- व्हिडिओ जोडण्याची क्षमता;
- 33 भिन्न रंग चिन्ह.
डेमो | डाउनलोड करा
SlidesJS हे JQuery (1.7.1 आणि वरील) साठी टच डिव्हाइसेस आणि CSS3 संक्रमणांसाठी समर्थनासह प्रतिसाद देणारे प्लगइन आहे. त्याचा प्रयोग करा, काही तयार उदाहरणे वापरून पहा जे तुम्हाला तुमच्या प्रोजेक्टमध्ये SlidesJS कसे जोडायचे हे समजण्यास मदत करतील:
- अनुकूली डिझाइन;
- CSS3 संक्रमणे;
- स्पर्श उपकरणांसाठी समर्थन;
- सेट करणे सोपे.
डेमो | डाउनलोड करा
हा एक विनामूल्य प्रतिसाद देणारा jQuery स्लाइडर आहे:
- पूर्णपणे प्रतिसाद - कोणत्याही डिव्हाइसशी जुळवून घेते;
- क्षैतिज, अनुलंब स्लाइड बदल;
- स्लाइडमध्ये प्रतिमा, व्हिडिओ किंवा HTML सामग्री असू शकते;
- स्पर्श उपकरणांसाठी विस्तारित समर्थन;
- स्लाइड ॲनिमेशन (हार्डवेअर प्रवेग) साठी CSS संक्रमण वापरणे;
- API कॉलबॅक आणि पूर्णपणे सार्वजनिक पद्धती;
- लहान फाइल आकार;
- अंमलबजावणी करणे सोपे.
डेमो | डाउनलोड करा
सर्वोत्तम प्रतिसाद देणारा स्लाइडर. नवीन आवृत्ती वेग आणि कॉम्पॅक्टनेस वाढवण्यासाठी सुधारित करण्यात आली आहे.
डेमो | डाउनलोड करा
उच्च-गुणवत्तेची प्रतिमा गॅलरी तयार करण्यासाठी लाखो साइटवर गॅलेरियाचा वापर केला जातो. तिच्या कामाबद्दल सकारात्मक पुनरावलोकनांची संख्या फक्त चार्टच्या बाहेर आहे:
- पूर्णपणे विनामूल्य;
- पूर्ण स्क्रीन दृश्य मोड;
- 100% अनुकूली;
- प्रोग्रामिंग अनुभव आवश्यक नाही;
- iPhone, iPad आणि इतर स्पर्श उपकरणांसाठी समर्थन;
- Flickr, Vimeo, YouTube आणि बरेच काही;
- अनेक विषय.
डेमो | डाउनलोड करा
मी तुमच्यासाठी खास रिस्पॉन्सिव्ह वेब डिझाइनसाठी लिहिलेला jQuery इमेज स्लाइडर सादर करत आहे. ब्लूबेरी हे प्रायोगिक मुक्त स्रोत प्रतिमा स्लाइडर प्लगइन आहे जे विशेषतः प्रतिसाद टेम्पलेटसह कार्य करण्यासाठी लिहिले गेले होते:
- किमान डिझाइन;
- अनुकूली मांडणी;
- सादरीकरणे.
डेमो | डाउनलोड करा
प्रोग्रामच्या पहिल्या आवृत्तीचे मानक घटक वापरले जातात: स्लाइडर डावीकडे लपवतो आणि उजवीकडे पॉप अप होतो. तेच नेव्हिगेशन घटक आणि मथळे जे माउसओव्हरवर पॉप अप होतात:
- अनुकूली डिझाइन;
- स्वाक्षरी समर्थन;
- स्लाइड शो मोड.
डेमो | डाउनलोड करा
