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

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

चरण 1: HTML सेट करें और Alpine.js शामिल करें

सबसे पहले, हम अपनी HTML फ़ाइल के शीर्ष में Alpine.js शामिल करेंगे। आप निम्न स्क्रिप्ट टैग जोड़कर ऐसा कर सकते हैं:

चरण 2: हिंडोला घटक संरचना

बॉडी के अंदर, हिंडोला घटक के लिए एक डिव बनाएं और अल्पाइन.जेएस गुणों और विधियों को परिभाषित करने के लिए इसे एक्स-डेटा के साथ प्रारंभ करें।

  
  Previous

  
  

  
  Next

चरण 3: अल्पाइन.जेएस डेटा और विधियों को परिभाषित करें

अब हम अल्पाइन घटक में हिंडोला कार्यक्षमता को परिभाषित करेंगे, छवियों को नेविगेट करने के लिए प्रारंभिक डेटा और तरीकों को सेट करेंगे।

घटक की व्याख्या

1. कैरोसेल HTML संरचना:

   • पिछला बटन: जब क्लिक किया जाता है, तो यह पिछली छवि पर नेविगेट करने के लिए पिछली विधि को कॉल करता है।
   • छवियां: हम छवियों के माध्यम से लूप करने और src विशेषता को बांधने के लिए x-for का उपयोग करते हैं। :क्लास बाइंडिंग सक्रिय क्लास को वर्तमान छवि पर लागू करती है, जिससे यह दृश्यमान हो जाती है।
   • अगला बटन: जब क्लिक किया जाता है, तो यह अगली छवि पर नेविगेट करने के लिए अगली विधि को कॉल करता है।

2. Alpine.js डेटा और तरीके:

   • currentIndex: प्रदर्शित होने वाली वर्तमान छवि को ट्रैक करता है।
   • छवियां: हिंडोला के लिए छवियों के यूआरएल युक्त एक सरणी।
   • startAutoPlay() और stopAutoPlay(): 3 सेकंड के अंतराल के साथ ऑटो-प्ले शुरू और बंद करें।
   • अगला(): वर्तमान सूचकांक में वृद्धि। यदि यह छवियों की संख्या से अधिक हो जाता है, तो यह शुरुआत में रीसेट हो जाता है।
   • prev(): वर्तमान सूचकांक में कमी। यदि यह शून्य से नीचे चला जाता है, तो यह अंतिम छवि तक पहुंच जाता है।
   • init(): हिंडोला प्रारंभ होने पर ऑटो-प्ले प्रारंभ होता है।

चरण 4: हिंडोला को स्टाइल करें

हमने हिंडोला के लिए बुनियादी सीएसएस शैलियाँ और स्थिति और दृश्यता के लिए बटन जोड़े हैं। सीएसएस परिवर्तन छवियों को फीका प्रभाव देते हैं।

चरण 5: ऑटो-प्ले और क्लिक करने योग्य नियंत्रण

• ऑटो-प्ले: init() में स्टार्टऑटोप्ले() का उपयोग करके ऑटो-प्ले।
• नियंत्रण पर क्लिक करें: स्लाइड को नेविगेट करने के लिए बटन पिछला() और अगला() फ़ंक्शन ट्रिगर करते हैं।

सारांश

• Alpine.js का उपयोग इंटरैक्टिविटी के लिए किया जाता है, जो हिंडोले को हल्का और प्रतिक्रियाशील बनाता है।
• सीएसएस परिवर्तन छवियों के बदलते ही फीका प्रभाव पैदा करते हैं।
• बटन क्लिक आसान नेविगेशन के लिए अल्पाइन तरीकों को ट्रिगर करते हैं।

यह उदाहरण ऑटो-प्ले कार्यक्षमता और क्लिक करने योग्य नियंत्रण दोनों प्रदान करता है, जो हिंडोला को इंटरैक्टिव बनाता है। यदि आप और अधिक अनुकूलन या अतिरिक्त सुविधाएँ चाहते हैं तो मुझे बताएं!

मुझसे जुड़ें:@लिंक्डइन और मेरा पोर्टफोलियो चेकआउट करें।

कृपया मेरे GitHub प्रोजेक्ट्स को एक स्टार दें ⭐️

सोर्स कोड