Create a flexible carousel component

Vue.js हाल ही में छठी और सीमाओं पर आ गया है, अब तक छठी सबसे ज्यादा फोर्क प्रोजेक्ट बन गया है Github लेखन के समय, फेसबुक की अपनी प्रतिक्रियाओं से भी आगे। यह कहना सुरक्षित है कि यह तेजी से एक मुख्य आधार बन रहा है वेब विकास , और एक विश्वसनीय गो-टू जावास्क्रिप्ट फ्रेमवर्क परियोजनाओं में उपयोग के लिए।

इस ट्यूटोरियल में, हम एक साधारण कैरोसेल घटक बनाने के लिए vue.js का उपयोग करने जा रहे हैं। यह घटक कई अलग-अलग गुणों को स्वीकार करेगा, जिससे आप संक्रमण गति, संक्रमण प्रकार, और चाहे कैरोसेल को स्वचालित रूप से संक्रमण स्लाइड्स को बदलना चाहिए।

अगर यह सब बहुत मुश्किल लगता है, ए वेबसाइट निर्माता उपकरण आपकी बात अधिक हो सकती है। अधिक जटिल साइट बनाने के लिए खुश? आप की जरूरत है वेब होस्टिंग जो सामना कर सकता है।

• Vue.js के साथ प्रदर्शन गति

आरंभ करना, यहां प्रोजेक्ट फाइलें डाउनलोड करें (और उन्हें अंदर से बचाओ घन संग्रहण ) और अपने पसंदीदा पाठ संपादक में 'वेबसाइट-टेम्पलेट' निर्देशिका खोलें। इस बीच टर्मिनल में, सीडी 'वेबसाइट-टेम्पलेट' में और फिर Node.js निर्भरताओं को स्थापित करने के लिए 'एनपीएम इंस्टॉल' चलाएं। अंत में, एक विकास सर्वर शुरू करने के लिए 'एनपीएम रन देव' चलाएं ताकि आप ब्राउज़र में अपनी परियोजना देख सकें। आम तौर पर यह 'लोकहोस्ट: 8080' पर होगा।

01. कैरोसेल स्लाइड फाइलें बनाएं

'एसआरसी / घटक' में, 'ऐप-कैरोसेल-स्लाइड' नामक एक नई निर्देशिका बनाएं और इसमें दो फाइलें: 'ऐप-कैरोसेल-स्लाइड.व्यू' और 'घटक-कैरोसेल-स्लाइड.एससीएसएस'। इनमें दो नए vue.js घटकों में से पहला होगा जो हम निर्माण करेंगे, जो एक साथ उपयोग किए जाने पर हमारे कैरोसेल घटक को बनाएंगे।

02. कैरोसेल स्लाइड एससीएस जोड़ें

फाइल्सिलो पैकेज से, '/support-files/step-02-slide.scss' की सामग्री को 'component.app-carousel-slide.scss' में कॉपी करें। यह स्लाइड घटक के लिए एससीएस है, और यह सुनिश्चित करने के लिए कि प्रत्येक स्लाइड अपने मूल तत्व को भरने के लिए फैलता है, 'फ्लेक्स-ग्रोथ' संपत्ति का उपयोग करता है।

03. स्लाइड घटक बनाएँ

खाली 'ऐप-कैरोसेल-स्लाइड.व्यू' फ़ाइल में, Vue.js घटक की संरचना बनाने के लिए नीचे दिए गए स्निपेट को जोड़ें। हम इसे कैरोसेल स्लाइड बनाने के लिए नींव के रूप में उपयोग करेंगे।

 & lt; टेम्पलेट & gt; & lt; / टेम्पलेट & gt;
& lt; स्क्रिप्ट और जीटी;
निर्यात डिफ़ॉल्ट {
  नाम: 'ऐप-कैरोसेल-स्लाइड'
}
& lt; / स्क्रिप्ट & gt; 

04. कैरोसेल स्लाइड छवियों के लिए एक टेम्पलेट स्लॉट जोड़ें

खाली & lt; टेम्पलेट & gt; कैरोसेल स्लाइड का तत्व, हम एक विशेष स्लॉट तत्व के साथ स्लाइड का प्रतिनिधित्व करने के लिए 'div' तत्व जोड़ देंगे जो हम 'छवि' नाम देंगे। Vue.js में, स्लॉट आपको संपादित किए बिना घटक के टेम्पलेट के साथ अपनी सामग्री को इंटरवेवे करने में सक्षम बनाता है। इस उदाहरण में, उनका उपयोग किया जाता है ताकि हम बाद में स्लाइड पृष्ठभूमि के लिए छवि पास कर सकें, इसलिए अंततः, अंततः उपयोग किए जाने पर, '& lt; ऐप-कैरोसेल-स्लाइड & gt; & lt; img src =' 'alt =' जैसा दिखता है '& gt; & lt; / app-carousel-slide & gt;'।

 & lt; div class = "c-app-carousel-slide" & gt;
  & lt; स्लॉट नाम = "छवि" & gt; & lt; / स्लॉट & gt;
& lt; / div & gt; 

05. स्लाइड टेक्स्ट कंटेनर जोड़ें

स्लाइड घटक के लिए जो कुछ भी रहता है वह पाठ कंटेनर बनाना है। हम स्लॉट का उपयोग करेंगे, एक बड़े स्लाइड शीर्षक के लिए और एक नियमित पाठ के लिए एक। हम तर्क जोड़ने के लिए 'वी-आईएफ' नामक एक vue.js निर्देश का भी उपयोग करेंगे, जो केवल पाठ कंटेनर को प्रस्तुत करता है यदि कम से कम स्लॉट में से एक सामग्री पारित की जाती है। 'छवि' स्लॉट से ठीक पहले, इस स्निपेट को 'सी-ऐप-कैरोसेल-स्लाइड' में जोड़ें।

 & lt; div class = "c-app-carousel-slide__text-block"
v-if = "यह। $ स्लॉट ['शीर्षक'] || यह। $ स्लॉट ['पाठ']" & gt;
  & lt; h1 वर्ग = "c-app-carousel-slide__title"
  v-if = "यह। $ स्लॉट ['शीर्षक']" & gt;
  & lt; स्लॉट नाम = "शीर्षक" & gt; & lt; / स्लॉट & gt;
  & lt; / h1 & gt;
  & lt; div class = "c-app-carousel-slide__text"
  v-if = "यह। $ स्लॉट ['टेक्स्ट']" & gt;
  & lt; स्लॉट नाम = "टेक्स्ट" & gt; & lt; / स्लॉट & gt;
  & lt; / div & gt;
& lt; / div & gt;

06. कैरोसेल फाइलें बनाएं

'एसआरसी / घटक' में वापस, 'ऐप-कैरोसेल' नामक एक नई निर्देशिका बनाएं और फिर इसके भीतर दो नई फाइलें: 'ऐप-कैरोसेल.व्यू' और 'घटक। ऐप-कैरोसेल .scss'। ये दो vue.js घटकों में से दूसरे स्थान पर होंगे: मुख्य कैरोसेल स्वयं ही।

07. कैरोसेल सीएसएस जोड़ें

खाली 'comparent.app-carousel.scss' में '/support-files/step-07-slide.scss' की सामग्री की प्रतिलिपि बनाएँ। यह मुख्य कैरोसेल घटक के लिए एससीएसएस है।

08. कैरोसेल घटक बनाएँ

'ऐप-कैरोसेल.व्यू' में अगला, हम कैरोसेल घटक की संरचना बनाने जा रहे हैं। हम 'ऐपिकॉन' घटक और 'तीर' एसवीजी को बाद में कैरोसेल के अगले और पिछले आइकन में उपयोग के लिए आयात कर रहे हैं। ये एक बुनियादी एसवीजी आइकन सिस्टम उत्पन्न करने के लिए 'एसवीजी-स्प्राइट-लोडर' निर्भरता के साथ मिलकर काम करते हैं, जो एसवीजी 'प्रतीकों' और इसके 'उपयोग' तत्व का उपयोग करके काम करता है।

 & lt; टेम्पलेट & gt; & lt; / टेम्पलेट & gt;
& lt; स्क्रिप्ट और जीटी;
से एपिकॉन आयात करें
'@ / घटक / ऐप-आइकन / ऐप-आइकन'
से आयात तीर
'./../../assets/img/arrow.svg'
निर्यात डिफ़ॉल्ट {
  नाम: 'ऐप-कैरोसेल',
  अवयव: {
  एपीकॉन
  },
  डेटा() {
  वापसी {
  तीर
  }
  }
}
& lt; / स्क्रिप्ट & gt; 

09. कैरोसेल टेम्पलेट का निर्माण

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

 & lt; div class = "c-app-carousel" & gt;
  & lt; div class = "c-app-carousel__wrapper" & gt;
  & lt; div class = "c-app- carousel__container" & gt;
  & lt; स्लॉट & gt; & lt; / स्लॉट & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / div & gt; 

10. कैरोसेल नियंत्रण और तीर जोड़ें

फिर हमें कैरोसेल नियंत्रण कंटेनर और पिछले और अगले तीरों के लिए एचटीएमएल जोड़ने की आवश्यकता है; बाद में आइकन सिस्टम और एसवीजी का उपयोग चरण 8. चरण 8 में आयात किया गया। 'सी-ऐप-कैरोसेल __Wrapper' तत्व के बाद इन्हें जोड़ें।

 & lt; app-icon class = "c-app-ack icon-arrow-prev c-app- carousel__arrow" उपयोग = "तीर" / & gt;
& lt; div class = "c-app-carousel__controls" & gt;
& lt; / div & gt;
& lt; ऐप-आइकन कक्षा = "सी-ऐप-आइकन-तीर-अगला सी-ऐप-कैरोसेल __ARROW" उपयोग = "तीर" / & gt; 

11. कैरोसेल डेटा स्टोर बनाएं और गुण जोड़ें

हम घटक के डेटा स्टोर में तीन नए गुण जोड़ रहे हैं: 'स्लाइडटोटल' स्लाइड की कुल संख्या को पकड़ देगा; 'ActiveSlideIndex' दृश्य स्लाइड की अनुक्रमणिका रिकॉर्ड करेगा, इसलिए इसका उपयोग कंटेनर की स्थिति की गणना करने के लिए किया जा सकता है; जबकि Autointerval अंतराल टाइमर रिकॉर्ड करेगा जो एक स्वचालित स्लाइड संक्रमण को ट्रिगर करेगा। ये सभी 'ActiveLideIndex' के अपवाद के साथ, शून्य पर सेट हैं, जहां '0' मान इंगित करता है कि पहली स्लाइड डिफ़ॉल्ट स्लाइड होनी चाहिए।

 डेटा () {
  वापसी {
  तीर,
  स्लाइडटोटल: नल,
  ActiveSlideIndex: 0,
  Autointerval: शून्य
  }
} 

12. स्लाइडटोटल की गणना करें

टेम्पलेट में 'c-app-carousel__container' तत्व को 'ref = "कंटेनर" जोड़ें और फिर नीचे स्निपेट को घटक ऑब्जेक्ट की संपत्ति के रूप में जोड़ें। 'रेफरी' का उपयोग किसी तत्व तक आसान पहुंच प्रदान करने के लिए किया जाता है, जो इस मामले में कंटेनर है इसलिए हम गिन सकते हैं कि कितने बच्चे तत्व (उर्फ स्लाइड) हैं। 'घुड़सवार () फ़ंक्शन में इस तर्क की उपस्थिति का मतलब है कि घटक को पहले प्रस्तुत होने पर स्वचालित रूप से चलाया जाता है।

 घुड़सवार () {
  this.slidetotal =
  यह। $ refs.container.children.length;
}

13. कंटेनर चौड़ाई की गणना करें

घटक में, 'गणना' नामक एक नई ऑब्जेक्ट प्रॉपर्टी बनाएं और इसके भीतर, 'कंटेनरविड्थ ()' नामक एक नया फ़ंक्शन। हम 'स्लाइडटोटल' आकृति के आधार पर कैरोसेल कंटेनर की चौड़ाई की गणना करने के लिए इसका उपयोग करेंगे।

 गणना: {
   कंटेनरविड्थ () {
      इसे वापस करें। Slidetotal * 100 + '%';
   }
} 

14. तरीके बनाएँ

इसके बाद, हमारे कैरोसेल के कार्यों को स्टोर करने के लिए 'विधियों' नामक एक और ऑब्जेक्ट प्रॉपर्टी बनाएं। 'गोटोस्लाइड ()' चरण 11 से 'activeslideindex' सेट करने का एक आसान तरीका है, 'iscontrolivactive ()' एक नियंत्रण सूचकांक 'activeslideindex' से मेल खाता है, जबकि 'nextslide ()' और 'prevslide ()' बस चक्र के माध्यम से स्लाइड।

 तरीके: {
  गोटोस्लाइड (स्लाइडइंडेक्स) {
  this.activeslideindex = slideindex;
  },
  isontrolivactive (controlindex) {
  वापसी controlindex - 1
  === इस activeslideindex;
  },
  अगली स्लाइड() {
  this.activeslideindex === यह।
  स्लाइडटोटल - 1? this.activeslideindex
  = 0: इस activeveslideindex ++;
  },
  prevslide () {
  this.activeslideindex === 0? इस।
  ActiveSlideIndex = this.slidetotal - 1
  : activeslideindex--;
  }
} 

15. कैरोसेल की कंटेनर की स्थिति की गणना करें

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

 ActiveSlideposition () {
  वापसी '-' + (100 / इस.स्लिडटोटल)
  * यह। activevideindex + '%';
} 

16. इनलाइन सीएसएस लिखें

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

 कंटेनरसाइनल () {
  वापसी 'चौड़ाई: $ {this.containerwidth};
  ट्रांसफॉर्म: ट्रांसलेक्स ($ {यह
  .ActivesLidePosition}); `

17. इनलाइन सीएसएस को बांधें

टेम्पलेट में 'C-App-Carousel__Container' तत्व के नीचे नीचे स्निपेट जोड़ें। यह पिछले चरण से 'कैरोसेल कंटेनर के' स्टाइल 'विशेषता के लिए' कंटेनरसाइनल () 'के लौटाए गए मूल्य को बाध्य करेगा, जिसका अर्थ है कि इसकी सीएसएस और इसलिए इसकी स्थिति स्वचालित रूप से अपडेट की जाएगी जब चीजें बदलती हैं।

 वी-बाइंड: स्टाइल = "कंटेनरसाइनल" 

18. अगले / पिछले तीरों को हुक करें

अब हमें अगले / पिछले तीर में तर्क जोड़ने की आवश्यकता है ताकि चरण 14 से सही विधि को प्रत्येक संबंधित तीर पर क्लिक किया जा सके। 'Prevslide ()' स्निपेट 'सी-ऐप-आइकन-तीर-पिछला' तत्व पर है, जबकि 'NextSlide ()' 'सी-ऐप-आइकन-तीर-अगला' तत्व पर है। 'वी-ऑन' निर्देश vue.js में इवेंट श्रोताओं को स्थापित करने का एक आसान तरीका है, 'क्लिक' डोम ईवेंट होने के साथ हम लक्ष्यीकरण कर रहे हैं।

 // पिछला
v-on: click.native = "Prevslide ()"
// अगला
v-on: click.native = "nextslide ()" 

19. कैरोसेल नियंत्रण उत्पन्न करें

चलो नियंत्रण तत्व उत्पन्न करते हैं और क्लिक किए जाने पर उन्हें संबंधित स्लाइड दिखाते हैं। 'C-App-Carousel__Controls' में नीचे दिए गए तत्व को जोड़ें। 'वी-फॉर' निर्देश का उपयोग 'स्लाइडटोटल' वैरिएबल से मेल खाने वाली नियंत्रण तत्वों को बनाने के लिए किया जाता है, जबकि 'वी-बाइंड' निर्देश केवल 'सक्रिय' वर्ग को केवल 'is-active' वर्ग को सक्षम करता है जब चरण 14 रिटर्न से 'iscontrolivactive' विधि सच। आखिरकार, हम 'वी-ऑन' के माध्यम से एक और इवेंट श्रोता बना रहे हैं, इसलिए क्लिक करते समय, नियंत्रण 'गोटोस्लाइड' विधि को कॉल करता है और इसकी अनुक्रमणिका को पास करता है, जो संबंधित स्लाइड की अनुक्रमणिका से मेल खाना चाहिए।

 & lt; div v- for = "s slidetotal में"
: कुंजी = "एन" वी-बाइंड: कक्षा =
"{'is-active': iscontrolive (n)}"
कक्षा = "सी-ऐप-कैरोसेल__ कंट्रोल"
वी-ऑन: क्लिक = "गोटोस्लाइड (एन - 1)" & gt; & lt; / div & gt; 

20. आयात घटक

आइए अब शीर्ष स्तर 'app.vue' घटक पर जाएं और सबकुछ आयात करें। उद्घाटन के बाद & lt; स्क्रिप्ट और जीटी; टैग, घटक '.vue' आयात करें। फ़ाइलें:

 appcarousel को '@ / घटक / ऐप-कैरोसेल / ऐप-कैरोसेल' से आयात करें
'@ / घटक / ऐप-कैरोसेल-स्लाइड / ऐप-कैरोसेल-स्लाइड' से ऐपकार्लाइड आयात करें 

इसके बाद, 'घटकों' ऑब्जेक्ट में संशोधन करें ताकि यह इन नए आयातित घटकों का संदर्भ देता है।

 घटक: {
   एपबटन,
   appcarousel,
   appcarouselslide
} 

अंत में, & lt; शैली & gt; टैग, बाकी घटक आयात के साथ हमारे नए एससीएसएस आयात करें।

 @import "/ घटक / ऐप-कैरोसेल /
घटक। ऐप-कैरोसेल ";
@import "/ घटक / ऐप-कैरोसेल-स्लाइड /
घटक। ऐप-कैरोसेल-स्लाइड "; 

21. कैरोसेल और स्लाइड जोड़ें

अंत में, आइए अपने नए कैरोसेल घटक और मुख्य ऐप में कुछ स्लाइड जोड़ें। अभी भी 'app.vue' में, नीचे दिए गए स्निपेट के साथ 'निर्माणाधीन' को प्रतिस्थापित करें। प्रत्येक & lt; ऐप-कैरोसेल-स्लाइड & gt; तत्व एक स्लाइड का प्रतिनिधित्व करता है। जितना चाहें उतना जोड़ें, पाठ या छवि को प्रतिस्थापित करें जहां वांछित हो। 'टेस्ट-फोटो -01.jpg' 'परीक्षण-फोटो -05.jpg' के लिए शामिल हैं। एक बार जो संकलन समाप्त हो गया है, सबकुछ अब काम करना चाहिए। Huzzah!

& lt; ऐप-कैरोसेल और जीटी;
  & lt; ऐप-कैरोसेल-स्लाइड & gt;
  & lt; टेम्पलेट स्लॉट = "शीर्षक" & gt; मेरी स्लाइड
  & lt; / टेम्पलेट & gt;
  & lt; टेम्पलेट स्लॉट = "टेक्स्ट" & gt;
  & lt; p & gt; यह एक कैरोसेल स्लाइड है। & lt; / p & gt;
  & lt; ऐप-बटन & gt; चलो चलें & lt; / app-button & gt;
  & lt; / टेम्पलेट & gt;
  & lt; img slot = "छवि"
  src = "./ संपत्ति / आईएमजी / टेस्ट-फोटो -01.jpg"
  alt = "मेरी कैरोसेल फोटो" & gt;
  & lt; / app-carousel-slide & gt;
& lt; / app-carousel & gt; 

22. कैरोसेल में लचीलापन जोड़ें

अब हमारे पास एक कामकाजी vue.js कैरोसेल है, आइए कुछ अतिरिक्त कार्यक्षमता जोड़ें ताकि हम स्लाइड संक्रमण की अवधि को आसानी से अनुकूलित कर सकें, इसकी समय संपत्ति, अगर स्लाइड को स्वत: स्लाइड करना चाहिए, और यदि ऐसा हो तो कितनी बार। 'ऐप-कैरोसेल.व्यू' को फिर से खोलें और घटक ऑब्जेक्ट पर स्निपेट में गुण जोड़ें।

 प्रोप्स: {
  अवस्थांतर अवधि: {
  टाइप करें: स्ट्रिंग,
  डिफ़ॉल्ट: '0.5s'
  },
  TransitionTiming: {
  टाइप करें: स्ट्रिंग,
  डिफ़ॉल्ट: 'आसानी'
  }
} 

23. कंटेनरसाइनल ()

इन गुणों को पारित मूल्यों को चरण 17 में वापस से कैरोसेल की इनलाइन सीएसएस के लिए अपना रास्ता बनाना चाहिए। अब यह सुनिश्चित करने के लिए 'कंटेनरसाइनल' गणना किए गए फ़ंक्शन में संशोधन करें कि ऐसा होता है।

 कंटेनरसाइनल () {
  रिटर्न `चौड़ाई: $ {this.containerwidth};
  परिवर्तन:
  अनुवादक्स ($ {this.activeslideposition});
  संक्रमण-समय-समारोह:
  $ {this.transitionTiming};
  अवस्थांतर अवधि:
  $ {this.transitionduration}; `
} 

24. कैरोसेल गुणों को डेटा पास करें

नीचे स्निपेट बताता है कि हम इन नई संपत्तियों को डेटा कैसे पास करेंगे & lt; app-carousel & gt; 'app.vue' में तत्व। एक बार जोड़ा गया, आप जो भी मान आप चाहते हैं उसे पारित करने में सक्षम होना चाहिए। उदाहरण के लिए, "3.0s" अवधि के परिणामस्वरूप बहुत धीमी स्लाइड संक्रमण हो जाएगा!

 & lt; ऐप-कैरोसेल
संक्रमण-अवधि = "0.25s"
संक्रमण-समय = "आसानी से इन-आउट" & gt; 

25. ऑटो-स्लाइड प्रॉप्स जोड़ना

ऑटो-स्लाइड के लिए, हमें 'ऐप-कैरोसेल में' प्रॉप्स 'में दो अतिरिक्त ऑब्जेक्ट्स जोड़ने की आवश्यकता है। 'ऑटो' या तो 'सत्य' या 'गलत' है, जो कि कैरोसेल को ऑटो-स्लाइड जारी रखना चाहिए। 'ऑटोटॉमिंग' ऑटो-स्लाइड ट्रिगर्स से पहले समय को नियंत्रित करता है, डिफ़ॉल्ट मान 5000 मिलीसेकंड होने के साथ।

 ऑटो: {
  टाइप करें: स्ट्रिंग,
  डिफ़ॉल्ट: 'गलत'
},
Autotiming: {
  टाइप करें: स्ट्रिंग,
  डिफ़ॉल्ट: 5000
} 

26. ऑटो-स्लाइड शुरू करें

अब हमें घटक लोड पर ऑटो-स्लाइड शुरू करने की आवश्यकता है। मौजूदा सामग्री के बाद, कैरोसेल के 'घुड़सवार ()' फ़ंक्शन में, जांचें कि 'ऑटो' संपत्ति 'सत्य' पर सेट की गई है या नहीं। यदि ऐसा है, तो एक अंतराल बनाएं जो 'autotiming' मूल्य पारित होने के बाद 'nextslide ()' विधि को बार-बार ट्रिगर करता है।

 अगर (auto === 'सत्य') {
  यह। autointerval = setinterval (() = & gt; {
  this.nextslide ();
  }, पार्सिंट (यह। ऑटोटिमिंग));
} 

27. ऑटो-स्लाइड विधि रद्द करें

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

 CancelautosLide () {
   ClearInterval (यह। autointerval);
} 

28. ट्रिगर cancealeautoslide

यदि उपयोगकर्ता एक तीर या नियंत्रण तत्व पर क्लिक करता है, तो यह मानना ​​उचित है कि वे मैनसोल को मैन्युअल रूप से संचालित करना चाहते हैं, इसलिए यदि इनमें से कोई भी तत्व क्लिक किया जाता है तो 'CanceaLautosLide' विधि को कॉल करें। ऐसा करने के लिए, प्रत्येक तत्व 'वी-ऑन' निर्देश में बस 'concealeautoslide ()' जोड़ें। 'पिछली' स्लाइड तीर का उपयोग करके उदाहरण के लिए नीचे स्निपेट देखें।

 v-on: click.native = "prevslide () + cancelautoslide ()" 

29. ऑटो-स्लाइड प्रोप के लिए मूल्य पास करें

अंत में, आइए कुछ मूल्यों को ऑटो-स्लाइड गुणों में पास करें जो हमने बनाए हैं। वापस 'app.vue' में, नीचे दिए गए स्निपेट को & lt; ऐप-कैरोसेल और जीटी में जोड़ें; प्रत्येक तीन सेकंड में एक ऑटो-स्लाइड सक्षम करने के लिए तत्व।

 ऑटो = "ट्रू" ऑटो-टाइमिंग = "3000"

30. कैरोसेल घटक का निर्माण समाप्त करें

विकास सर्वर को रद्द करें, या एक नई टर्मिनल विंडो खोलें, और 'dist' निर्देशिका में अपने vue.js संचालित कैरोसेल घटक के संकलित, उत्पादन-तैयार संस्करण बनाने के लिए 'एनपीएम रन बिल्ड' चलाएं।

यह आलेख मूल रूप से क्रिएटिव वेब डिज़ाइन पत्रिका वेब डिज़ाइनर के अंक 26 9 में प्रकाशित हुआ था। यहां अंक 269 खरीदें या वेब डिजाइनर की सदस्यता लें ।

वेब डिजाइन घटना उत्पन्न लंडन 1 9 -21 सितंबर 2018 को रिटर्न, उद्योग के प्रमुख वक्ताओं, कार्यशालाओं का पूरा दिन और मूल्यवान नेटवर्किंग अवसरों का एक पैक कार्यक्रम प्रदान करता है - इसे याद मत करो। आपकी मिल उत्पन्न अब टिकट ।

संबंधित आलेख:

• आज के वेब डिजाइनर के लिए 7 आवश्यक उपकरण
• अपनी वेबसाइट पर एक ग्लिच प्रभाव जोड़ें
• 6 अद्भुत 'के बारे में' आप को प्रेरित करने के लिए