ইমেজ ক্যারোজেল

স্ট্যাটিক ইমেজের একটি সারি স্থান খায় এবং দর্শকদের প্রত্যেকের অতীত স্ক্রোল করতে বলে। একটি ক্যারোজেল একটি কমপ্যাক্ট, সোয়াইপযোগ্য স্লাইডারে একই সেট দেখায় যা লোকেরা আসলে স্পর্শ করে। দ্য ইমেজ ক্যারোজেল উইজেট ইন এলিমেন্টরের জন্য মাস্টার অ্যাডঅন একটি সাধারণ ওয়ার্ডপ্রেস গ্যালারি থেকে সেই স্লাইডারটি তৈরি করে, তারপর অটোপ্লে, একটি লাইটবক্স, বেশ কয়েকটি নেভিগেশন শৈলী এবং একটি কভারফ্লো মোড যোগ করে, সবই এলিমেন্টর প্যানেল থেকে।

আপনি ছবিগুলি বাছাই করুন, একবারে কতগুলি শো চয়ন করুন এবং দর্শকরা কীভাবে তাদের মধ্যে চলে যায় তা নির্ধারণ করুন৷ কোন শর্টকোড নেই, আলাদা স্লাইডার প্লাগইন নেই। এই নির্দেশিকাটি গ্যালারি লোড করা থেকে শুরু করে তীর স্টাইল করা পর্যন্ত উইজেটের প্রতিটি সেটিংসের মধ্য দিয়ে চলে। ডেমো এবং Elementor এর নিজস্ব ক্যারোজেলের সাথে তুলনা করার জন্য, দেখুন এলিমেন্টর ইমেজ ক্যারোজেল উইজেট পৃষ্ঠা।

প্রথমে দেখতে পছন্দ করেন? এই সংক্ষিপ্ত টিউটোরিয়ালটি গ্যালারি থেকে স্টাইলিং পর্যন্ত ইমেজ ক্যারোজেলকে কভার করে:

ইমেজ ক্যারোজেল উইজেট কি করে #

উইজেট চিত্রগুলির একটি নির্বাচনকে একটি স্লাইডিং ক্যারোসেলে পরিণত করে। এটি প্রতি ভিউতে এক বা একাধিক ছবি দেখায়, নিজে থেকে বা ক্লিকে অগ্রসর হয় এবং প্রতিটি ছবিকে একটি লাইটবক্সে পূর্ণ আকারের চেহারার জন্য খোলে। ক্যাপশন, সীমানা, ওভারলে এবং তীর স্টাইলিং সবই অন্তর্নির্মিত।

এটি সুইপার ইঞ্জিনে চলে, তাই স্লাইডারটি শুরু থেকেই স্পর্শ বন্ধুত্বপূর্ণ এবং প্রতিক্রিয়াশীল। একটি ফোনে একই ক্যারোজেল কম কলামে রিফ্লো করে, এবং আপনি মোবাইলে তীরগুলি লুকিয়ে রাখতে পারেন যদি সেগুলি পথে আসে।

আপনি শুরু করার আগে #

• ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
• এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
• আপনার মিডিয়া লাইব্রেরিতে আপলোড করা মুষ্টিমেয় ছবি, বা আপলোড করার জন্য প্রস্তুত।

কিভাবে ইমেজ ক্যারোজেল উইজেট যোগ করবেন #

Elementor এডিটরে, খুলুন উপাদান প্যানেল এবং অনুসন্ধান করুন ইমেজ ক্যারোজেল, অথবা মাস্টার অ্যাডঅন বিভাগে স্ক্রোল করুন। আপনার পৃষ্ঠায় উইজেট টেনে আনুন। আপনি ছবি যোগ না করা পর্যন্ত এটি খালি লোড হয়, তাই গ্যালারি সর্বদা প্রথম ধাপ।

আপনার ছবি যোগ করুন এবং অর্ডার করুন #

মধ্যে বিষয়বস্তু ট্যাব, খুলুন ছবি ওয়ার্ডপ্রেস মিডিয়া পিকার চালু করতে বিভাগ এবং গ্যালারি ক্ষেত্রে ক্লিক করুন। আপনি চান ছবি নির্বাচন করুন, তারপর ব্যবহার করুন গ্যালারি সম্পাদনা করুন এগুলিকে ক্রমানুসারে টেনে আনতে, ক্যাপশন যোগ করুন বা X আইকন দিয়ে যেকোনও ড্রপ করুন৷।

প্যানেলে ফিরে, চিত্র বিভাগ আপনাকে আরও তিনটি নিয়ন্ত্রণ দেয়:

• ইমেজ রেজোলিউশন: থাম্বনেইল থেকে ফুল পর্যন্ত ওয়ার্ডপ্রেস পরিবেশন করা আকার বাছাই করুন বা একটি কাস্টম আকার সেট করুন। মাঝারি বা বড় স্লাইডারে তীক্ষ্ণ দেখালেও পৃষ্ঠাটিকে হালকা রাখে।
• লাইটবক্স গ্যালারি সক্ষম করুন: এটি চালু করুন যাতে দর্শকরা একটি পপআপে এটিকে পূর্ণ আকারে খুলতে একটি ছবিতে ক্লিক করতে পারে৷ এটি বন্ধ করার সাথে, চিত্রগুলি শুধুমাত্র প্রদর্শন করা হয়।
• লাইটবক্স লাইব্রেরি: পপআপ ইঞ্জিন বেছে নিন, হয় ফ্যান্সিবক্স বা এলিমেন্টরের নিজস্ব লাইটবক্স। উভয়ই ক্যারোজেল চিত্রগুলিকে গোষ্ঠীভুক্ত করে যাতে দর্শকরা পপআপের ভিতরে তাদের মধ্য দিয়ে যেতে পারে।

নেভিগেশন সেট আপ করুন #

দ্য নেভিগেশন লোকেরা কীভাবে স্লাইডের মধ্য দিয়ে যায় তা বিভাগটি নিয়ন্ত্রণ করে। দিয়ে শুরু করুন নেভিগেশন ড্রপডাউন, যা নিয়ন্ত্রণ শৈলী সেট করে: তীর এবং বিন্দু, তীর এবং ভগ্নাংশ, তীর, বিন্দু, অগ্রগতি, বা কিছুই নয়।

• স্ক্রোলবার দেখান: স্লাইডারের নীচে একটি টেনে আনা যায় এমন অগ্রগতি বার যোগ করে।
• তীর অবস্থান: তীরগুলি উপরে, কেন্দ্র বা নীচে এবং বাম, কেন্দ্র বা ডানদিকে রাখুন।
• বসানো: স্লাইডারের ভিতরে বা বাইরে তীরগুলি সেট করুন।
• মোবাইলে তীর লুকান: তীরগুলি ছোট পর্দায় ফেলে দিন যেখানে সোয়াইপ করা প্রাকৃতিক অঙ্গভঙ্গি।
• পরবর্তী আইকন এবং পূর্ববর্তী আইকন: এলিমেন্টর আইকন লাইব্রেরি থেকে যেকোনো আইকনের জন্য ডিফল্ট তীর অদলবদল করুন।

ক্যারোজেল আচরণ টিউন করুন #

দ্য ক্যারোজেল সেটিংস বিভাগটি যেখানে স্লাইডারটি তার গতি পায়। এটি সেই অংশ যা নির্ধারণ করে যে কতগুলি চিত্র দেখায়, তারা কত দ্রুত চলে এবং স্লাইডারটি লুপ হয় কিনা।

• কলাম প্রতি স্লাইড: আপনি যখন স্লাইডারটিকে উল্লম্ব দিকে চালান তখন সারির সংখ্যা।
• বিন্যাস: একটি স্ট্যান্ডার্ড ফ্ল্যাট স্লাইডারের জন্য ক্যারোজেল বা 3D প্রভাবের জন্য কভারফ্লো বেছে নিন।
• স্বয়ংক্রিয় উচ্চতা: স্লাইডারের উচ্চতা বর্তমান চিত্রের সাথে খাপ খাইয়ে নিতে দিন।
• অটোপ্লে এবং অটোপ্লে গতি: স্বয়ংক্রিয় স্লাইডিং চালু করুন এবং মিলিসেকেন্ডে স্লাইডগুলির মধ্যে বিলম্ব সেট করুন (5000 হল পাঁচ সেকেন্ড)।
• হোভারে বিরতি: কার্সার স্লাইডারের উপরে থাকাকালীন অটোপ্লে বন্ধ করুন।
• স্ক্রোল করার জন্য স্লাইড: প্রতি ধাপে কতগুলি ছবি অগ্রসর হয়।
• সেন্টার স্লাইড, কার্সার ধরুন, ফ্রি মোড টেনে আনুন: সক্রিয় স্লাইডকে কেন্দ্রীভূত করার বিকল্প, একটি গ্র্যাব কার্সার দেখানো এবং ফ্রি-ফ্লোয়িং ড্র্যাগ স্ক্রলিং।
• লুপ: শেষ ছবিতে থামার পরিবর্তে একটি অন্তহীন লুপ হিসাবে ক্যারোজেল চালান।

একটি 3D প্রভাবের জন্য কভারফ্লো লেআউট ব্যবহার করুন #

সুইচ বিন্যাস প্রতি কভারফ্লো এবং স্লাইডগুলি একটি 3D স্ট্যাকের মধ্যে কাত হয়, সক্রিয় চিত্রটি কেন্দ্রে সমতল এবং প্রতিবেশীরা পিছনে কোণযুক্ত। ক কভারফ্লো প্রভাব নিয়ন্ত্রণ দেখায় যাতে আপনি গভীরতা এবং ঘূর্ণন সূক্ষ্ম-টিউন করতে পারেন। এটি ফটোগ্রাফি এবং পোর্টফোলিও বিভাগগুলির জন্য উপযুক্ত যেখানে স্লাইডার নিজেই ডিজাইনের অংশ।

ক্যারোজেল স্টাইল করুন #

দ্য শৈলী ট্যাব চারটি বিভাগে বিভক্ত: ক্যারোজেল আইটেম, লাইটবক্স, নেভিগেশন, এবং নিদর্শন। একসাথে তারা স্লাইড, পপআপ এবং তীরগুলির চেহারা কভার করে৷।

ক্যারোজেল আইটেম #

এই বিভাগে ইমেজ স্লাইড শৈলী। এটিতে সাধারণ, হোভার এবং সক্রিয় অবস্থা রয়েছে, তাই আপনি কেন্দ্রীভূত স্লাইডটিকে বাকি থেকে আলাদা করে তুলতে পারেন।

• পটভূমি, বর্ডার টাইপ, বর্ডার ব্যাসার্ধ, বক্স শ্যাডো: প্রতিটি স্লাইডের জন্য স্ট্যান্ডার্ড ফ্রেমিং। সীমানা ব্যাসার্ধ ছবির কোণে বৃত্তাকার।
• প্যাডিং এবং আইটেম গ্যাপ: প্রতিটি স্লাইডের ভিতরে স্থান এবং স্লাইডের মধ্যে ফাঁক।
• ছায়া মোড এবং অস্বচ্ছতা: নিষ্ক্রিয় স্লাইডগুলির জন্য অতিরিক্ত গভীরতা এবং স্বচ্ছতা।

লাইটবক্স, ওভারলে এবং ক্যাপশন #

দ্য লাইটবক্স বিভাগটি প্রিভিউ আইকনকে স্টাইল করে যা প্রতিটি ছবিতে বসে এবং এর পিছনে ওভারলে এবং ক্যাপশন পাঠ্য।

• কাস্টম প্রিভিউ আইকন: ডিফল্ট জুম আইকনটি প্রতিস্থাপন করুন এবং এর রঙ, হোভার রঙ, আকার এবং অবস্থান আইকন গ্যাপ দিয়ে বাম এবং শীর্ষে সেট করুন।
• ওভারলে: ছবির উপর একটি ব্যাকগ্রাউন্ড টিন্ট যোগ করুন, যা আপনি যখন আইকন এবং ক্যাপশনটি পাঠযোগ্য থাকতে চান তখন সাহায্য করে।
• ক্যাপশন শিরোনাম: গ্যালারিতে আপনি যে ক্যাপশনগুলি যোগ করেছেন তার জন্য টাইপোগ্রাফি, ব্যাকগ্রাউন্ড, রঙ এবং হোভার রঙ।

নেভিগেশন তীর #

দ্য নেভিগেশন স্টাইল বিভাগটি সাধারণ এবং হোভার স্টেট সহ তীরগুলির চেহারা নিয়ন্ত্রণ করে।

• রঙ এবং পটভূমি: তীর আইকনের রঙ এবং এর পিছনে বোতাম।
• বর্ডার টাইপ, বর্ডার রেডিয়াস, প্যাডিং, সাইজ: পূর্ণ ব্যাসার্ধ সহ বৃত্তাকার বোতাম সহ তীর বোতামগুলির আকার এবং আকার।
• বক্স ছায়া এবং অফসেট: গভীরতা যোগ করুন এবং অনুভূমিক অফসেট দিয়ে তীরগুলিকে ভিতরে বা বাইরে নাজ করুন।

পৃষ্ঠায় ফলাফল #

প্রকাশ বা পূর্বরূপ দেখুন এবং ক্যারোজেলটি লাইভ চলে: এটি চিত্রগুলির মাধ্যমে স্বয়ংক্রিয়ভাবে চলে যায়, আপনি এটি চালু করলে লুপ হয় এবং ক্লিকে লাইটবক্সে প্রতিটি খোলে৷ আপনার স্টাইলিং বৃত্তাকার বর্ডারযুক্ত স্লাইড থেকে কাস্টম তীর বোতাম পর্যন্ত বহন করে।

সাধারণ ব্যবহারের ক্ষেত্রে #

• ফটোগ্রাফি এবং পোর্টফোলিও গ্যালারী যেখানে লাইটবক্স দর্শকদের পূর্ণ আকারের শট দেখতে দেয়।
• পণ্য ইমেজ স্লাইডার একটি ল্যান্ডিং পৃষ্ঠায়, অটোপ্লে চোখ আঁকছে।
• লোগো বা অংশীদার স্ট্রিপ প্রতি ভিউ এবং একটি লুপে বেশ কয়েকটি স্লাইড ব্যবহার করা।
• প্রশংসাপত্র বা ইভেন্ট ফটো একটি কমপ্যাক্ট, সোয়াইপযোগ্য ব্লকে।
• হিরো কভারফ্লো স্লাইডার একটি ডিজাইন-ফরোয়ার্ড বিভাগের জন্য।

ইমেজ ক্যারোজেলের সাথে কাজ করার জন্য টিপস #

• স্লাইড আকারের সাথে ইমেজ রেজোলিউশন মেলে। ছোট স্লাইডে পূর্ণ আকারের ফাইল পরিবেশন করা পৃষ্ঠাটিকে ধীর করে দেয়; মাঝারি বা বড় সাধারণত প্রচুর হয়।
• অটোপ্লে গতি আরামদায়ক রাখুন। প্রায় 4000 থেকে 6000 ms মানুষকে তাড়াহুড়ো না করে দেখার জন্য সময় দেয়।
• অটোপ্লে সহ হোভারে বিরতি চালু করুন। এটি একটি ক্যাপশন পড়ছে এমন কারো নীচে থেকে স্লাইডারটিকে স্লাইড করা বন্ধ করে।
• মোবাইলে তীর লুকান। সোয়াইপিং হল টাচ স্ক্রিনে স্বাভাবিক অঙ্গভঙ্গি, তাই তীরগুলি প্রায়শই সেখানে বিশৃঙ্খল থাকে।
• কেন্দ্র স্লাইড হাইলাইট করতে সক্রিয় অবস্থা ব্যবহার করুন। সক্রিয় স্লাইডে একটি সূক্ষ্ম সীমানা বা সম্পূর্ণ অস্বচ্ছতা চোখকে গাইড করে।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #

মোড়ানো #

দ্য ইমেজ ক্যারোজেল উইজেট একটি পৃথক প্লাগইন ছাড়াই একটি সম্পূর্ণ বৈশিষ্ট্যযুক্ত এলিমেন্টর ইমেজ স্লাইডার তৈরি করে: একটি গ্যালারি লোড করুন, অটোপ্লে এবং লুপ সেট করুন, লাইটবক্স চালু করুন এবং আপনার ডিজাইনের সাথে মেলে স্লাইড এবং তীরগুলিকে স্টাইল করুন৷ ছবি দেখানোর অন্যান্য উপায়ের জন্য, দেখুন গ্যালারি স্লাইডার এবং ফিল্টারযোগ্য গ্যালারি উইজেট। সম্পূর্ণ ব্রাউজ করুন মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন আর কি অন্তর্ভুক্ত করা হয় তা দেখতে।