एलिमेंटर इमेज कैरोसेल विजेट: लाइटबॉक्स और कवरफ्लो के साथ मुफ्त स्लाइडर
मास्टर एडऑन में इमेज कैरोसेल विजेट एक वर्डप्रेस गैलरी को एक स्वाइप करने योग्य स्लाइडर में बदल देता है। आप छवियों को चुनते हैं, चुनें कि डेस्कटॉप, टैबलेट और फोन पर कितने शो हैं, और यदि आप चाहते हैं तो ऑटोप्ले, एक अनंत लूप, एक लाइटबॉक्स और एक 3 डी कवरफ्लो लेआउट जोड़ें। प्रत्येक स्लाइड को उसके सामान्य, होवर और सक्रिय स्थिति में स्टाइल किया जा सकता है, और तीर, बिंदु और प्रगति बार आपके ब्रांड का अनुसरण करते हैं। यह पोर्टफोलियो, उत्पाद शॉट्स, होटल और संपत्ति के पर्यटन और क्लाइंट लोगो के लिए काम करता है।
कवरफ़्लो और कैरोसेल लेआउट
हिंडोला सेटिंग्स में कैरोसेल या कवरफ्लो लेआउट चुनें। प्रति कॉलम स्लाइड्स यह निर्धारित करती है कि डेस्कटॉप, टैबलेट और मोबाइल के लिए अलग-अलग मानों के साथ, 1 से 6 तक, एक बार में कितनी स्लाइड दिखाई देती हैं, इसलिए हिंडोला अतिरिक्त CSS के बिना उत्तरदायी है। स्क्रॉल करने के लिए स्लाइड सेट करती है कि प्रत्येक चरण कितनी दूर चलता है। लूप कैरोसेल को अनंत बनाता है, और ऑटोप्ले, सेंटर स्लाइड, ग्रैब कर्सर और ड्रैग फ्री मोड को बदल देता है कि यह कैसे चलता है। जब हिंडोला किसी टैब या अकॉर्डियन के अंदर बैठता है तो ऑब्जर्वर चालू करें।
- उत्तरदायी: डेस्कटॉप, टैबलेट और मोबाइल पर एक अलग स्लाइड की गिनती।
- आंदोलन: ऑटोप्ले गति, एनीमेशन गति, होवर पर विराम और एक अनंत लूप।
- ऊंचाई: ऑटो ऊंचाई सबसे ऊंची दिखाई देने वाली स्लाइड का अनुसरण करती है, या हिंडोला के लिए एक कस्टम ऊंचाई निर्धारित करती है।
सामान्य, होवर और सक्रिय अवस्थाओं में शैली स्लाइड
हिंडोला आइटम अनुभाग तीन राज्यों में प्रत्येक छवि के चारों ओर बॉक्स को स्टाइल करता है। सामान्य, होवर और सक्रिय के लिए पृष्ठभूमि, सीमा, छाया और पैडिंग सेट करें, साथ ही स्लाइड और अस्पष्टता के बीच आइटम अंतर। केंद्र स्लाइड को उसके पड़ोसियों से अलग दिखाने के लिए सक्रिय अवस्था का उपयोग करें।
- होवर: एक छाया लिफ्ट या एक रंग परिवर्तन जब सूचक स्लाइड के ऊपर होता है।
- सक्रिय: वर्तमान स्लाइड पर एक अलग सीमा या पृष्ठभूमि।
- फ्रेम: सीमा त्रिज्या, बॉक्स छाया और प्रत्येक आइटम पर पैडिंग।
लाइटबॉक्स, तीर, डॉट्स और प्रगति पट्टी के साथ छवि हिंडोला
नेविगेशन तीर, डॉट्स, तीर और डॉट्स, तीर और अंश, या एक प्रगति पट्टी हो सकता है, और आप उनमें से किसी में एक ड्रैग करने योग्य स्क्रॉलबार जोड़ सकते हैं। तीर कस्टम आइकन लेते हैं और हिंडोला के अंदर या बाहर बैठते हैं। लाइटबॉक्स डिफ़ॉल्ट रूप से चालू है और प्रत्येक छवि को Fancybox या Elementor Lightbox के साथ पूर्ण आकार में खोलता है। छवि शीर्षक और इसकी मीडिया लाइब्रेरी कैप्शन लाइटबॉक्स में दिखाई देता है, और आप पूर्वावलोकन आइकन और ओवरले दोनों के साथ-साथ स्टाइल कर सकते हैं।
- तीर: रंग, आकार, पृष्ठभूमि और क्षैतिज ऑफसेट, उन्हें मोबाइल पर छिपाने के विकल्प के साथ।
- काउंटर: एक अंश जैसे 1/8, या ऊपर या नीचे एक प्रगति पट्टी।
- लाइटबॉक्स: कस्टम पूर्वावलोकन आइकन और ओवरले के साथ फैंक्सबॉक्स या एलिमेंटर।
कवरफ्लो इमेज कैरोसेल बिना एलिमेंटर प्रो
एलिमेंटर में, कवरफ्लो प्रभाव मीडिया कैरोसेल विजेट से संबंधित है, जो एलिमेंटर प्रो का हिस्सा है। मास्टर एडऑन इमेज कैरोसेल में यह लेआउट विकल्प के रूप में है। लेआउट को कवरफ्लो पर सेट करें और केंद्र स्लाइड आगे की ओर है जबकि उसके पड़ोसी दूर हो जाते हैं। कवरफ़्लो प्रभाव पॉपओवर में चार स्लाइडर हैं: रोटेट, स्ट्रेच, संशोधक और गहराई। नीचे दिया गया हिंडोला लाइव है, इसलिए इसे खींचें या डॉट्स का उपयोग करें।
फ्लिप, आर्क और ऑर्बिट स्टाइल के लिए, हमारे गाइड को देखें एलिमेंटर ३ डी हिंडोला.
एलिमेंटर इमेज कैरोसेल बनाम मास्टर एडॉन्स इमेज कैरोसेल
स्लाइड्स पर कैप्शन के साथ एक बुनियादी स्लाइडर के लिए एलिमेंटर की अपनी छवि हिंडोला पर्याप्त है। जब आपको कवरफ़्लो लेआउट, एक प्रगति बार या एक अंश काउंटर, फैन्सीबॉक्स, या सक्रिय स्लाइड के लिए अलग स्टाइल की आवश्यकता हो, तो मास्टर एडऑन्स चुनें।
| एलिमेंटर इमेज कैरोसेल | मास्टर एडॉन्स इमेज कैरोसेल | |
|---|---|---|
| कीमत | मुक्त | मुक्त |
| प्रति डिवाइस प्रति दृश्य स्लाइड | हाँ | हाँ |
| लेआउट | स्लाइड या फीका | हिंडोला या ३ डी कवरफ्लो |
| कैप्शन | स्लाइड पर: शीर्षक, कैप्शन या विवरण | लाइटबॉक्स में: छवि शीर्षक और कैप्शन |
| नेविगेशन | तीर और बिंदु | तीर, बिंदु, गतिशील गोलियां, अंश, प्रगति पट्टी और स्क्रॉलबार |
| लाइटबॉक्स | एलिमेंटर लाइटबॉक्स | फैंसीबॉक्स या एलिमेंटर, एक कस्टम पूर्वावलोकन आइकन और ओवरले के साथ |
| स्लाइड स्टाइलिंग | बेसिक | सामान्य, होवर और सक्रिय अवस्थाएँ |
| लिंक | सभी स्लाइडों के लिए एक कस्टम यूआरएल | कोई लिंक फ़ील्ड नहीं, लाइटबॉक्स में छवियां खुलती हैं |
छवि हिंडोला विजेट क्या कर सकता है और क्या नहीं
विजेट में क्या है और क्या नहीं है इसकी एक त्वरित सूची।
| फ़ीचर | छवि हिंडोला |
|---|---|
| लाइटबॉक्स (फैंसीबॉक्स या एलिमेंटर) | हाँ |
| आवरण प्रवाह लेआउट | हाँ |
| प्रति डिवाइस स्लाइड, 1 से 6 | हाँ |
| तीर, डॉट्स, अंश, प्रगति बार और स्क्रॉलबार | हाँ |
| ऑटोप्ले और अनंत लूप | हाँ |
| सामान्य, होवर और सक्रिय स्लाइड स्टाइल | हाँ |
| लाइटबॉक्स में कैप्शन (छवि शीर्षक और कैप्शन) | हाँ |
| स्लाइड पर कैप्शन | नहीं |
| प्रति छवि लिंक | नहीं |
| एकाधिक पंक्तियाँ | नहीं |
| वीडियो स्लाइड | नहीं |
| थंबनेल नेविगेशन | नहीं, देखिए गैलरी स्लाइडर (प्रो) |
छवि हिंडोला उदाहरण
ये तीन हिंडोला लाइव विजेट हैं। लाइटबॉक्स खोलने के लिए किसी भी छवि पर क्लिक करें। उनके तहत डेमो व्यूअर में अधिक लेआउट हैं।
होटल टूर, थ्री एक्रॉस
डेस्कटॉप पर तीन स्लाइड, टैबलेट पर दो और मोबाइल पर एक, छवियों पर तीरों के साथ।
एक प्रगति पट्टी के साथ मेनू पट्टी
ड्रैग फ्री मोड के साथ ऑटोप्ले और डॉट्स के स्थान पर एक प्रगति बार।
एलिमेंटर में एक छवि हिंडोला कैसे जोड़ें
स्क्रीनशॉट के साथ लंबे समय तक चलने के लिए, पढ़ें एलिमेंटर में एक छवि हिंडोला कैसे बनाएं.
- निःशुल्क मास्टर ऐडऑन प्लगइन स्थापित करें और एलिमेंटर के साथ अपना पेज संपादित करें।
- छवि हिंडोला के लिए विजेट पैनल खोजें और इसे एक कंटेनर में खींचें।
- गैलरी फ़ील्ड पर क्लिक करें, अपनी छवियां चुनें और छवि रिज़ॉल्यूशन सेट करें।
- सेट करें कि प्रति डिवाइस कितनी स्लाइड दिखाई देती हैं, फिर यदि आप चाहें तो ऑटोप्ले, लूप और लाइटबॉक्स चालू करें।
- हिंडोला या कवरफ़्लो चुनें, स्लाइड और तीर स्टाइल करें और प्रकाशित करें।
संबंधित हिंडोलेः लोगो स्लाइडर, टीम स्लाइडर, गैलरी स्लाइडर (प्रो) और ब्लॉग विजेट का हिंडोला मोड। एक छवि पर होवर एनिमेशन के लिए, देखें छवि होवर प्रभाव.
छवियों के फ़िल्टर करने योग्य ग्रिड के लिए, देखें फ़िल्टर करने योग्य छवि गैलरी.
छवि हिंडोला के लिए अक्सर पूछे जाने वाले प्रश्न
एलिमेंटर की मूल छवि हिंडोला पर मुख्य लाभ क्या है?
एलिमेंटर की छवि हिंडोला एक साधारण स्लाइडर को अच्छी तरह से संभालती है: कैप्शन, एक लाइटबॉक्स, ऑटोप्ले और प्रति डिवाइस स्लाइड। मास्टर एडऑन एक 3 डी कवरफ्लो लेआउट, अंश, प्रगति बार और स्क्रॉलबार नेविगेशन, एक कस्टम पूर्वावलोकन आइकन के साथ फैंक्सबॉक्स या एलिमेंटर लाइटबॉक्स का विकल्प, सामान्य, होवर और सक्रिय स्लाइड के लिए स्टाइल, और टैब या अकॉर्डियन के अंदर कैरोसेल के लिए एक पर्यवेक्षक विकल्प जोड़ता है।
मैं सभी हिंडोला छवियों को समान ऊंचाई कैसे रखूं?
समान पहलू अनुपात वाली छवियां अपलोड करें, क्योंकि विजेट प्रत्येक छवि को अपने आकार में दिखाता है। यदि आप उन्हें पहले क्रॉप नहीं कर सकते हैं, तो विजेट को एक सीएसएस क्लास दें और ऑब्जेक्ट-फिट के साथ एक निश्चित ऊंचाई निर्धारित करें: स्लाइड इमेज पर कवर करें। कस्टम ऊंचाई हिंडोला की ऊंचाई को ही सेट करती है और छवियों को क्रॉप नहीं करती है।
क्या मैं होवर पर रंग के लिए ग्रेस्केल के साथ लोगो स्लाइडर के लिए इसका उपयोग कर सकता हूं?
हाँ। अपने लोगो की तस्वीरें अपलोड करें। कैरोसेल आइटम टैब में, सामान्य स्थिति अस्पष्टता सेट करें या उन्हें ग्रेस्केल बनाने के लिए सीएसएस फ़िल्टर का उपयोग करें। फिर, होवर स्थिति में, अस्पष्टता को वापस 1 पर सेट करें और फ़िल्टर को हटा दें। या उपयोग करें लोगो स्लाइडर विजेट, जो क्लाइंट लोगो के लिए बनाया गया है।
क्या हिंडोला लगातार स्क्रॉल कर सकता है?
यह ऑटोप्ले के साथ या बिना एक समय में एक कदम चलता है। एक पट्टी के लिए जो बिना रुके ग्लाइड करती है, एक मार्की बनाएं। हमारा एलिमेंटर मार्की गाइड इसे करने के तीन तरीके दिखाते हैं।
हिंडोला और स्लाइडर के बीच क्या अंतर है?
एक स्लाइडर एक समय में एक स्लाइड दिखाता है, आमतौर पर पूरी चौड़ाई। एक हिंडोला एक ट्रैक पर एक साथ कई दिखाता है। यह विजेट दोनों करता है: प्रति कॉलम 1 पर स्लाइड सेट करें और यह स्लाइडर के रूप में काम करता है। में और भी है कैरोसेल बनाम स्लाइडर.
क्या प्रत्येक छवि का अपना लिंक हो सकता है?
नहीं लाइटबॉक्स में खुलने वाली छवियां और विजेट में कोई लिंक फ़ील्ड नहीं है। एलिमेंटर की अपनी छवि हिंडोला में एक कस्टम URL विकल्प होता है, लेकिन यह हर स्लाइड पर लागू होता है। प्रति आइटम एक लिंक के लिए, का उपयोग करें लोगो स्लाइडर.
ट्रेंडिंग एलिमेंटर विजेट और एक्सटेंशन
कम समय में परिष्कृत वेबसाइट बनाएं।
ग्लासमोर्फिज्म
कंटेनर अतिरिक्त
पैटर्न
![एलिमेंट के लिए मास्टर ऐडऑन पोस्ट/पेज डुप्लीकेटर एक्सटेंशन: वर्डप्रेस पेज सूची में एमए डुप्लीकेटर पंक्ति लिंक एक लैंडिंग पेज बना रहा है - [डुप्लिकेट #128] ड्राफ्ट](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
पोस्ट/पेज डुप्लीकेटर
