এলিমেন্টর ইমেজ ক্যারোজেল উইজেট: লাইটবক্স এবং কভারফ্লো সহ ফ্রি স্লাইডার
মাস্টার অ্যাডঅন-এ ইমেজ ক্যারোজেল উইজেট একটি ওয়ার্ডপ্রেস গ্যালারীকে একটি সোয়াইপযোগ্য স্লাইডারে পরিণত করে এবং এটি বিনামূল্যে। আপনি ছবিগুলি বাছাই করুন, ডেস্কটপ, ট্যাবলেট এবং ফোনে কতগুলি শো করবেন তা চয়ন করুন এবং আপনি যদি চান তবে অটোপ্লে, একটি লাইটবক্স এবং একটি 3D কভারফ্লো লেআউট যোগ করুন৷ প্রতিটি স্লাইড তার স্বাভাবিক, হোভার এবং সক্রিয় অবস্থায় স্টাইল করা যেতে পারে এবং তীর, বিন্দু এবং ক্যাপশনগুলি আপনার ব্র্যান্ড অনুসরণ করে৷ এটি পোর্টফোলিও, পণ্য শট, হোটেল এবং সম্পত্তি ট্যুর এবং ক্লায়েন্ট লোগোর জন্য কাজ করে।
উন্নত বিন্যাস এবং আচরণ নিয়ন্ত্রণ
আপনার ক্যারোজেল দেখতে এবং আচরণ কেমন তার উপর সম্পূর্ণ নিয়ন্ত্রণ নিন। একটি ক্যারোজেল বা কভারফ্লো লেআউট চয়ন করুন। গ্রিডের মতো ডিসপ্লের জন্য প্রতি কলামে স্লাইড সেট করুন এবং কতগুলি স্লাইড স্ক্রোল করতে হবে তা নির্ধারণ করুন। অটোপ্লে, লুপ, সেন্টার মোড এবং এমনকি ইন্টারেক্টিভ টেনে আনার জন্য একটি গ্র্যাব কার্সারের মতো বৈশিষ্ট্যগুলি সক্ষম করুন৷ পর্যবেক্ষক বিকল্প নিশ্চিত করে যে এটি ট্যাব বা অ্যাকর্ডিয়ানের ভিতরে পুরোপুরি কাজ করে।
- নমনীয় লেআউট: কলাম এবং স্ক্রলের উপর সম্পূর্ণ নিয়ন্ত্রণ সহ বহু-সারি গ্রিড বা ক্লাসিক অনুভূমিক স্লাইডার তৈরি করুন।
- মসৃণ মিথস্ক্রিয়া: অটোপ্লে গতি, অ্যানিমেশন গতি সেট করুন এবং ব্যবহারকারী-বান্ধব আচরণের জন্য হোভারে বিরতি সক্ষম করুন।
- স্মার্ট অভিযোজিত বৈশিষ্ট্য: বিশ্রী খালি স্থান এড়াতে স্বয়ংক্রিয় উচ্চতা ব্যবহার করুন এবং লুকানো পাত্রে এটি কাজ করতে পর্যবেক্ষক ব্যবহার করুন।
শৈলী প্রতিটি অংশ, প্রতিটি রাজ্যে
আপনার ক্যারোজেল আপনার ডিজাইনের একটি নিখুঁত অংশ করুন। প্রতিটি আইটেমের জন্য কন্টেইনারকে স্টাইল করার জন্য শুধু ছবি স্টাইল করবেন না। সাধারণ, হোভার এবং সক্রিয় অবস্থার জন্য অনন্য ব্যাকগ্রাউন্ড, সীমানা, ছায়া এবং প্যাডিং সেট করুন। আইটেম গ্যাপ এবং সামগ্রিক অস্বচ্ছতা সামঞ্জস্য করুন। এই স্তরের বিশদ আপনাকে ইন্টারেক্টিভ কার্ড তৈরি করতে, সক্রিয় স্লাইড হাইলাইট করতে এবং ব্যবহারকারীদের ইন্টারঅ্যাক্ট করার সাথে সাথে স্পষ্ট ভিজ্যুয়াল প্রতিক্রিয়া প্রদান করতে দেয়।
- ইন্টারেক্টিভ ফিডব্যাক: দর্শকদের জড়িত করার জন্য স্বতন্ত্র হোভার ইফেক্ট (যেমন ছায়া উত্তোলন বা রঙ পরিবর্তন) ডিজাইন করুন।
- সক্রিয় স্লাইড হাইলাইট: বর্তমান কেন্দ্র স্লাইডটিকে একটি ভিন্ন সীমানা বা পটভূমির সাথে আলাদা করে তুলুন।
- সম্পূর্ণ ভিজ্যুয়াল কন্ট্রোল: নিখুঁত আইটেম ফ্রেমিংয়ের জন্য বর্ডার ব্যাসার্ধ, বক্স শ্যাডো এবং প্যাডিং কাস্টমাইজ করুন।
নেভিগেশন এবং ইন্টিগ্রেটেড লাইটবক্স
আপনার ইমেজ ক্যারোসেলে আপনার দর্শকদের সঠিকভাবে গাইড করুন। কাস্টম আইকন, রঙ, ব্যাকগ্রাউন্ড এবং পজিশনিং (ভিতরে, বাইরে) সহ মার্জিত তীর নেভিগেশন ডিজাইন করুন। একটি পরিষ্কার চেহারা জন্য মোবাইলে তাদের লুকান। তারপর, একটি অন্তর্নির্মিত লাইটবক্স দিয়ে আপনার গ্যালারি সক্ষম করুন। প্রিভিউ আইকন, ওভারলে এবং ক্যাপশন টাইপোগ্রাফি কাস্টমাইজ করুন। একটি সুন্দর, পূর্ণ-স্ক্রীন দেখার অভিজ্ঞতায় ছবিগুলি খুলতে ফ্যান্সিবক্স এবং এলিমেন্টরের মধ্যে বেছে নিন।
- কাস্টম নেভিগেশন তীর: স্ক্র্যাচ থেকে স্টাইল তীরগুলি তাদের রঙ, আকার, পটভূমি এবং অনুভূমিক অফসেট পরিবর্তন করে।
- মোবাইল-অপ্টিমাইজড: মোবাইলে তীর লুকাতে বেছে নিন এবং নেটিভ অনুভূতির জন্য সোয়াইপ অঙ্গভঙ্গির উপর নির্ভর করুন।
- প্রিমিয়াম লাইটবক্স: কাস্টমাইজযোগ্য আইকন এবং ওভারলে সহ একটি জুম-ইন ভিউ অফার করুন, ক্যারোজেলটিকে একটি সম্পূর্ণ গ্যালারিতে পরিণত করুন৷।
এলিমেন্টর ইমেজ ক্যারোজেল বনাম মাস্টার অ্যাডনস ইমেজ ক্যারোজেল
উভয় উইজেট বিনামূল্যে। ক্যাপশন এবং লিঙ্ক সহ একটি মৌলিক স্লাইডারের জন্য এলিমেন্টরের সংস্করণ যথেষ্ট। আপনার যখন কভারফ্লো লেআউট, ছবির সারি, বা নেভিগেশন এবং স্লাইড স্টাইলিং এর উপর আরও নিয়ন্ত্রণের প্রয়োজন হয় তখন মাস্টার অ্যাডঅনগুলি বেছে নিন।
| এলিমেন্টর ইমেজ ক্যারোজেল | মাস্টার অ্যাডনস ইমেজ ক্যারোজেল | |
|---|---|---|
| দাম | বিনামূল্যে | বিনামূল্যে |
| ডিভাইস প্রতি ভিউ প্রতি স্লাইড | হ্যাঁ | হ্যাঁ |
| বিন্যাস | স্লাইড বা বিবর্ণ | ক্যারোজেল বা 3D কভারফ্লো |
| একাধিক সারি | না | হ্যাঁ, প্রতি কলামে স্লাইড সহ |
| নেভিগেশন | তীর এবং বিন্দু | তীর, বিন্দু, গতিশীল বুলেট, ভগ্নাংশ, অগ্রগতি বার এবং স্ক্রলবার |
| লাইটবক্স | এলিমেন্টর লাইটবক্স | একটি কাস্টম প্রিভিউ আইকন এবং ওভারলে সহ ফ্যান্সিবক্স বা এলিমেন্টর |
| স্লাইড স্টাইলিং | বেসিক | স্বাভাবিক, হোভার এবং সক্রিয় অবস্থা |
| প্রতিটি ছবি একটি URL এ লিঙ্ক করুন | হ্যাঁ | না, লাইটবক্সে ছবি খোলা |
এলিমেন্টরে কীভাবে একটি ইমেজ ক্যারোজেল যোগ করবেন
স্ক্রিনশট সহ দীর্ঘ হাঁটার জন্য, পড়ুন এলিমেন্টরে কীভাবে একটি ইমেজ ক্যারোজেল তৈরি করবেন.
- বিনামূল্যে মাস্টার অ্যাডঅন প্লাগইন ইনস্টল করুন এবং এলিমেন্টর দিয়ে আপনার পৃষ্ঠা সম্পাদনা করুন।
- ইমেজ ক্যারোজেলের জন্য উইজেট প্যানেলটি অনুসন্ধান করুন এবং এটি একটি পাত্রে টেনে আনুন।
- গ্যালারি ক্ষেত্রে ক্লিক করুন, আপনার ছবি বাছাই করুন এবং চিত্র রেজোলিউশন সেট করুন।
- প্রতি ডিভাইসে কতগুলি স্লাইড দেখায় তা সেট করুন, তারপর অটোপ্লে, লুপ এবং লাইটবক্স চালু করুন যদি আপনি সেগুলি চান৷।
- ক্যারোজেল বা কভারফ্লো চয়ন করুন, স্লাইড এবং তীরগুলি স্টাইল করুন এবং প্রকাশ করুন৷।
সম্পর্কিত carousels: লোগো স্লাইডার, টিম স্লাইডার, গ্যালারি স্লাইডার (প্রো) এবং ব্লগ উইজেটের ক্যারোজেল মোড।
ইমেজ ক্যারোজেলের জন্য প্রায়শই জিজ্ঞাসিত প্রশ্ন
এলিমেন্টরের বেসিক ইমেজ ক্যারোজেলের প্রধান সুবিধা কী?
এলিমেন্টরের ফ্রি ইমেজ ক্যারোজেল একটি সাধারণ স্লাইডার ভালোভাবে পরিচালনা করে: ক্যাপশন, একটি লাইটবক্স, অটোপ্লে এবং ডিভাইস প্রতি স্লাইড। মাস্টার অ্যাডনস একটি 3D কভারফ্লো লেআউট, কলাম প্রতি স্লাইড সহ বহু-সারি গ্রিড, ভগ্নাংশ, অগ্রগতি বার এবং স্ক্রলবার নেভিগেশন, একটি কাস্টম প্রিভিউ আইকন সহ ফ্যান্সিবক্স বা এলিমেন্টর লাইটবক্সের একটি পছন্দ, স্বাভাবিক, হোভার এবং সক্রিয় স্লাইডগুলির জন্য স্টাইলিং এবং একটি পর্যবেক্ষক যোগ করে ট্যাব বা অ্যাকর্ডিয়নের ভিতরে ক্যারোসেলের জন্য বিকল্প।
যদি আমি 'অটো হাইট' সক্ষম করি, তাহলে কি আমার ছবি প্রসারিত হবে নাকি ক্রপ হবে?
না। স্বয়ংক্রিয় উচ্চতা বর্তমানে দৃশ্যমান সবচেয়ে লম্বা স্লাইডের সাথে মেলে সামগ্রিক ক্যারোজেল কন্টেইনারের উচ্চতা সামঞ্জস্য করে। আপনার ছবিগুলি আপনার অন্যান্য সেটিংসের উপর ভিত্তি করে তাদের আকৃতির অনুপাত বজায় রাখবে (যেমন "ইমেজ সাইজ")। আপনার যদি বিভিন্ন পোর্ট্রেট/ল্যান্ডস্কেপ ওরিয়েন্টেশনের ছবি থাকে তবে এটি নির্দিষ্ট উচ্চতাকে বড় ফাঁকা স্থান তৈরি করতে বাধা দেয়।
আমি কি হোভারে রঙ করার জন্য গ্রেস্কেল সহ একটি লোগো স্লাইডারের জন্য এটি ব্যবহার করতে পারি?
একেবারে! এটি একটি নিখুঁত ব্যবহারের ক্ষেত্রে। আপনার লোগো ছবি আপলোড করুন। ক্যারোজেল আইটেম ট্যাবে, স্বাভাবিক অবস্থার অস্বচ্ছতা সেট করুন বা সেগুলিকে গ্রেস্কেল করতে একটি CSS ফিল্টার ব্যবহার করুন৷ তারপর, হোভার অবস্থায়, অস্বচ্ছতা 1 এ সেট করুন এবং ফিল্টারটি সরান। অন্তর্নির্মিত হোভার স্টাইলিং কাস্টম কোড ছাড়াই এই প্রভাবটিকে সহজ করে তোলে। অথবা ব্যবহার করুন লোগো স্লাইডার উইজেট, যা ক্লায়েন্ট লোগোর জন্য নির্মিত।
কিভাবে "পর্যবেক্ষক" সেটিং কাজ করে, এবং কখন আমি এটি ব্যবহার করব?
পর্যবেক্ষক ক্যারোজেলের পাত্রে পরিবর্তনের জন্য পর্যবেক্ষণ করে। আপনি যখন ক্যারোজেলটিকে ট্যাব, অ্যাকর্ডিয়ন, বা টগল উইজেটের ভিতরে রাখেন বা এটি প্রাথমিকভাবে লুকানো থাকে তখন এটি সক্ষম করুন (হ্যাঁ সেট করুন)। এটি নিশ্চিত করে যে একজন ব্যবহারকারী তার মূল ধারকটি প্রকাশ করতে ক্লিক করার মুহুর্তে ক্যারোজেলটি সঠিকভাবে রেন্ডার এবং কাজ করে। যদি এটি একটি ট্যাবের ভিতরে ভেঙে যায় তবে এটি সাধারণত এটি ঠিক করে।
এক পৃষ্ঠায় অটোপ্লে সহ একাধিক ক্যারোসেল থাকলে কর্মক্ষমতা সমস্যা হবে?
এটা হতে পারে, যদি আপনার অনেক থাকে (যেমন 15+)। প্রতিটি অটোপ্লেয়িং ক্যারোজেল একটি চলমান উপাদান ব্রাউজারকে অবশ্যই অ্যানিমেট করতে হবে। সেরা পারফরম্যান্সের জন্য, আপনার সবচেয়ে গুরুত্বপূর্ণ হিরো ক্যারোজেলে অটোপ্লে সীমাবদ্ধ করুন। অন্যদের জন্য, ব্যবহারকারীদের ম্যানুয়ালি স্ক্রোল করতে দেওয়ার কথা বিবেচনা করুন। এছাড়াও, অপ্টিমাইজ করা ছবির আকার ব্যবহার করা (ছবি রেজোলিউশন সেটিংসের মাধ্যমে) গতির জন্য অত্যন্ত গুরুত্বপূর্ণ।
আমি কি শুধু লাইটবক্সের পরিবর্তে ক্যারোজেল আইটেমগুলিকে বিভিন্ন URL-এর সাথে লিঙ্ক করতে পারি?
এই উইজেট দিয়ে নয়। এটি একটি লাইটবক্সে ছবি খোলে। যদি প্রতিটি স্লাইডের নিজস্ব লিঙ্কের প্রয়োজন হয়, তাহলে ব্যবহার করুন লোগো স্লাইডার, অথবা Elementor এর নিজস্ব ইমেজ Carousel-এ লিঙ্ক বিকল্প।
ট্রেন্ডিং এলিমেন্টর উইজেট এবং এক্সটেনশন
কম সময়ে অত্যাধুনিক ওয়েবসাইট তৈরি করুন।
গ্লাসমরফিজম
ধারক অতিরিক্ত
নিদর্শন
![এলিমেন্টরের জন্য মাস্টার অ্যাডঅন পোস্ট/পেজ ডুপ্লিকেটর এক্সটেনশন: ওয়ার্ডপ্রেস পেজ লিস্টে এমএ ডুপ্লিকেটর সারি লিঙ্ক একটি ল্যান্ডিং পেজ তৈরি করে - [ডুপ্লিকেটেড #128] ড্রাফ্ট](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
পোস্ট/পেজ ডুপ্লিকেটর
