😽 🏴󠁧󠁢󠁳󠁣󠁴󠁿 🈂️ सीएसएस और जावास्क्रिप्ट में सरल छवि स्लाइडर 🧕🏾 🌽 🌵

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

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

स्लाइडर स्वचालित रूप से किसी भी डिवाइस की स्क्रीन चौड़ाई को समायोजित करता है। आप इसे ब्राउज़र के बाईं ओर या दाईं ओर ले जाकर सत्यापित कर सकते हैं।

HTML - स्लाइडर कोड मानक है, एक के अपवाद के साथ: एक स्क्रीन को छवियों के सामने रखा जाता है, जो एक सादे सफेद तस्वीर है। सभी छवियों और स्क्रीन का आकार समान होना चाहिए। छवियों की संख्या मनमानी है।

<div class="sim-slider"> <ul class="sim-slider-list"> <li><img src="screen.gif" alt="screen"></li> <!--   --> <li class="sim-slider-element"><img src="img1.jpg" alt="1"></li> <li class="sim-slider-element"><img src="img2.jpg" alt="2"></li> … <li class="sim-slider-element"><img src="imgN.jpg" alt="N"></li> </ul> <div class="sim-slider-arrow-left"></div> <div class="sim-slider-arrow-right"></div> <div class="sim-slider-dots"></div> </div>

<Ul> <li> टैग कंटेनर के रूप में उपयोग किए जाते थे, लेकिन आप <div> <div> या <div> <p> का उपयोग कर सकते हैं। तीर और सूचक बिंदु संबंधित कंटेनरों में बिल्कुल स्थित हैं। तीरों के लिए, त्रिकोणीय कोष्ठक के रूप में पैटर्न का उपयोग किया जाता है, जो यदि वांछित है, तो आप अपने खुद के पैटर्न के साथ बदल सकते हैं। अंक प्रोग्राम द्वारा उत्पन्न होते हैं, अंकों की संख्या छवियों की संख्या के बराबर होती है।

सभी छवियों को स्टैक किया जाता है, एक के ऊपर एक, संलग्न कंटेनर के ऊपरी बाएं कोने में पूर्ण स्थिति के साथ। स्क्रीन बाहरी कंटेनर के पतन को रोकता है। सभी छवियों को सीएसएस संपत्ति अस्पष्टता असाइन किया गया है: 0, पहले तत्व को छोड़कर, जिसके लिए आरंभीकरण कार्यक्रम अस्पष्टता प्रदान करता है: 1, जिससे यह दिखाई देता है।

स्क्रॉलिंग तत्वों को सुस्पष्ट रूप से दृश्य तत्व के लिए 1 से 0 तक और अगले अदृश्य तत्व के लिए 0 से 1 तक बदलकर किया जाता है। इस प्रकार, दृश्य तत्व अदृश्य हो जाता है, और अदृश्य दृश्य दिखाई देता है। संक्रमण सुगमता 1s की अवधि और एक आसानी से संक्रमण फ़ंक्शन के साथ एक संक्रमण गुण बनाता है।

सीएसएस

 img { width: 100%; !important; } /* General styles */ .sim-slider { position: relative; } .sim-slider-list { margin: 0; padding: 0; list-style-type: none; position: relative; } .sim-slider-element { width: 100%; transition: opacity 1s ease-in; opacity: 0; position: absolute; z-index: 2; left: 0; top: 0; display: block; } /* Navigation item styles */ div.sim-slider-arrow-left, div.sim-slider-arrow-right { width: 22px; height: 40px; position: absolute; cursor: pointer; opacity: 0.6; z-index: 4; } div.sim-slider-arrow-left { left: 10px; top: 40%; display: block; background: url("sim-arrow-left.png") no-repeat; } div.sim-slider-arrow-right { right: 10px; top: 40%; display: block; background: url("sim-arrow-right.png") no-repeat; } div.sim-slider-arrow-left:hover { opacity: 1.0; } div.sim-slider-arrow-right:hover { opacity: 1.0; } div.sim-slider-dots { width: 100%; height: auto; position: absolute; left: 0; bottom: 0; z-index: 3; text-align: center; } span.sim-dot { width: 10px; height: 10px; margin: 5px 7px; padding: 0; display: inline-block; background-color: #BBB; border-radius: 5px; cursor: pointer; }

स्लाइडर के लिए किसी भी स्क्रीन चौड़ाई के अनुकूल होने के लिए, छवियों के लिए आपको सीएसएस संपत्ति की चौड़ाई निर्दिष्ट करने की आवश्यकता है: 100%। सभी ब्लॉक कंटेनरों (div, ul, li, आदि) के लिए भी चौड़ाई: 100% या, यदि आपको संख्यात्मक इकाइयों में चौड़ाई की आवश्यकता है, तो केवल अधिकतम-चौड़ाई या न्यूनतम-चौड़ाई।

शैलियाँ, हमेशा की तरह, हेडर में शामिल हैं। स्क्रिप्ट को ओनलोड घटना या HTML मार्कअप के अंत में जोड़ा जा सकता है। स्लाइडर स्क्रिप्ट फ़ाइल इस तरह दिख सकती है:

 <!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Simple slider</title> <!--   --> <link rel="stylesheet" type="text/css" href="sim-slider-styles.css"> </head> <body> … <div class="sim-slider"> <!--    --> … </div> … <footer> … </footer> <!--   --> <script src="sim-slider.js"></script> <!--   --> <script>new Sim()</script> </body> </html>

स्लाइडर को सिम-स्लाइडर वर्ग या पहचानकर्ता के नाम से पुकारा जाता है। दूसरे मामले में, आप एक पृष्ठ पर कई स्लाइडर्स रख सकते हैं।

 <div class="sim-slider" id="first"> <!--   --> … <div class="sim-slider" id="second"> <!--   --> … <script>new Sim("first"); new Sim("second");</script>

जावास्क्रिप्ट

 function Sim(sldrId) { let id = document.getElementById(sldrId); if(id) { this.sldrRoot = id } else { this.sldrRoot = document.querySelector('.sim-slider') }; // Slider objects this.sldrList = this.sldrRoot.querySelector('.sim-slider-list'); this.sldrElements = this.sldrList.querySelectorAll('.sim-slider-element'); this.sldrElemFirst = this.sldrList.querySelector('.sim-slider-element'); this.leftArrow = this.sldrRoot.querySelector('div.sim-slider-arrow-left'); this.rightArrow = this.sldrRoot.querySelector('div.sim-slider-arrow-right'); this.indicatorDots = this.sldrRoot.querySelector('div.sim-slider-dots'); // Initialization this.options = Sim.defaults; Sim.initialize(this) }; Sim.defaults = { // Default options for the slider loop: true, //    auto: true, //   interval: 5000, //     () arrows: true, //   dots: true //   }; Sim.prototype.elemPrev = function(num) { num = num || 1; let prevElement = this.currentElement; this.currentElement -= num; if(this.currentElement < 0) this.currentElement = this.elemCount-1; if(!this.options.loop) { if(this.currentElement == 0) { this.leftArrow.style.display = 'none' }; this.rightArrow.style.display = 'block' }; this.sldrElements[this.currentElement].style.opacity = '1'; this.sldrElements[prevElement].style.opacity = '0'; if(this.options.dots) { this.dotOn(prevElement); this.dotOff(this.currentElement) } }; Sim.prototype.elemNext = function(num) { num = num || 1; let prevElement = this.currentElement; this.currentElement += num; if(this.currentElement >= this.elemCount) this.currentElement = 0; if(!this.options.loop) { if(this.currentElement == this.elemCount-1) { this.rightArrow.style.display = 'none' }; this.leftArrow.style.display = 'block' }; this.sldrElements[this.currentElement].style.opacity = '1'; this.sldrElements[prevElement].style.opacity = '0'; if(this.options.dots) { this.dotOn(prevElement); this.dotOff(this.currentElement) } }; Sim.prototype.dotOn = function(num) { this.indicatorDotsAll[num].style.cssText = 'background-color:#BBB; cursor:pointer;' }; Sim.prototype.dotOff = function(num) { this.indicatorDotsAll[num].style.cssText = 'background-color:#556; cursor:default;' }; Sim.initialize = function(that) { // Constants that.elemCount = that.sldrElements.length; //   // Variables that.currentElement = 0; let bgTime = getTime(); // Functions function getTime() { return new Date().getTime(); }; function setAutoScroll() { that.autoScroll = setInterval(function() { let fnTime = getTime(); if(fnTime - bgTime + 10 > that.options.interval) { bgTime = fnTime; that.elemNext() } }, that.options.interval) }; // Start initialization if(that.elemCount <= 1) { //   that.options.auto = false; that.options.arrows = false; that.options.dots = false; that.leftArrow.style.display = 'none'; that.rightArrow.style.display = 'none' }; if(that.elemCount >= 1) { //    that.sldrElemFirst.style.opacity = '1'; }; if(!that.options.loop) { that.leftArrow.style.display = 'none'; //    that.options.auto = false; //   } else if(that.options.auto) { //   setAutoScroll(); //        that.sldrList.addEventListener('mouseenter', function() { clearInterval(that.autoScroll) }, false); that.sldrList.addEventListener('mouseleave', setAutoScroll, false) }; if(that.options.arrows) { //   that.leftArrow.addEventListener('click', function() { let fnTime = getTime(); if(fnTime - bgTime > 1000) { bgTime = fnTime; that.elemPrev() } }, false); that.rightArrow.addEventListener('click', function() { let fnTime = getTime(); if(fnTime - bgTime > 1000) { bgTime = fnTime; that.elemNext() } }, false) } else { that.leftArrow.style.display = 'none'; that.rightArrow.style.display = 'none' }; if(that.options.dots) { //    let sum = '', diffNum; for(let i=0; i<that.elemCount; i++) { sum += '<span class="sim-dot"></span>' }; that.indicatorDots.innerHTML = sum; that.indicatorDotsAll = that.sldrRoot.querySelectorAll('span.sim-dot'); //     'click' for(let n=0; n<that.elemCount; n++) { that.indicatorDotsAll[n].addEventListener('click', function(){ diffNum = Math.abs(n - that.currentElement); if(n < that.currentElement) { bgTime = getTime(); that.elemPrev(diffNum) } else if(n > that.currentElement) { bgTime = getTime(); that.elemNext(diffNum) } //  n == that.currentElement    }, false) }; that.dotOff(0); // [0] ,   for(let i=1; i<that.elemCount; i++) { that.dotOn(i) } } };

सभी चित्र खुले स्रोतों से लिए गए हैं।

आपका ध्यान के लिए धन्यवाद!

सीएसएस और जावास्क्रिप्ट में सरल छवि स्लाइडर

More articles: