এলিমেন্টরে কীভাবে একটি ইমেজ ক্যারোজেল তৈরি করবেন

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

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

তোমার যা দরকার

Elementor বিনামূল্যে এবং মাস্টার addons বিনামূল্যে. এলিমেন্টরের নিজস্ব ইমেজ ক্যারোজেল বেসিকগুলি কভার করে (ক্যাপশন, একটি লাইটবক্স এবং প্রতি ডিভাইসে স্লাইড), কিন্তু এটির কোনও কভারফ্লো লেআউট বা অগ্রগতি-স্টাইল নেভিগেশন নেই, তাই এই ওয়াকথ্রুটি ব্যবহার করে মাস্টার অ্যাডনস ইমেজ ক্যারোজেল, যা বিনামূল্যে এবং ক্যাপশন, একটি লাইটবক্স এবং একটি কভারফ্লো লেআউট যোগ করে৷।

ধাপ 1: উইজেট যোগ করুন

Elementor-এ পৃষ্ঠাটি খুলুন এবং “image carousel-এর জন্য উইজেট প্যানেলটি অনুসন্ধান করুন।” এটিকে একটি পাত্রে টেনে আনুন।

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

ধাপ 2: আপনার ছবি যোগ করুন

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

বিষয়বস্তু সেটিংসের অধীনে আপনি ছবির আকার, ক্যাপশন উত্স এবং লিঙ্ক আচরণ পাবেন।

ইমেজ সাইজ হল সেটিং মানুষ সম্পূর্ণ এবং অনুশোচনা ছেড়ে। সম্পূর্ণ মানে আসল আপলোড: একটি 4000px ক্যামেরা এক্সপোর্ট একটি 400px স্লাইডে পরিবেশিত। ওয়ার্ডপ্রেস ইতিমধ্যে ছোট সংস্করণ তৈরি করেছে; বাছাই medium_large বা large এবং আপনি কোন দৃশ্যমান পার্থক্য ছাড়াই এটির বেশিরভাগ দ্বারা ক্যারোজেলের ওজন কাটবেন।

ক্যাপশন মিডিয়া লাইব্রেরির ক্যাপশন বা বর্ণনা ক্ষেত্র থেকে টানুন, তাই স্লাইডগুলির পাঠ্যের প্রয়োজন হলে, উইজেটে প্রতি-স্লাইড পাঠ্য বাক্স খোঁজার পরিবর্তে এটি সেখানে লিখুন।

ধাপ 3: নেভিগেশন

তীর, বিন্দু, ভগ্নাংশ বা একটি স্ক্রলবার। আপনার কতগুলি স্লাইড আছে তার উপর ভিত্তি করে বেছে নিন:

• 8টির নিচে স্লাইড: বিন্দু। লোকেরা এক নজরে পুরো সেটটি দেখতে পারে এবং চারপাশে লাফ দিতে পারে।
• 8 থেকে 20: শুধু তীর। বিশটি বিন্দু একটি স্মিয়ার, নিয়ন্ত্রণ নয়।
• 20 এর বেশি: তীর প্লাস ভগ্নাংশ (“04 /32”)। সংখ্যা হল একমাত্র জিনিস যা কাউকে বলে যে তারা কোথায় আছে।

মোবাইলে, তীরের আকার পরীক্ষা করুন। ডেস্কটপ ডিফল্ট প্রায়ই একটি 30px লক্ষ্য, এবং একটি ট্যাপের জন্য অ্যাক্সেসযোগ্য সর্বনিম্ন হল 44px। এটিকে মোবাইল ব্রেকপয়েন্টে বাম্প করুন বা তীরগুলি সম্পূর্ণভাবে ফেলে দিন এবং সোয়াইপের উপর নির্ভর করুন৷।

ধাপ 4: ক্যারোজেল আচরণ

এটি সেই প্যানেল যা সিদ্ধান্ত নেয় যে ক্যারোজেলটি সঠিক মনে হচ্ছে কিনা।

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

স্ক্রোল করার জন্য স্লাইড। একটি ক্রমাগত ব্রাউজিং অনুভূতির জন্য এটিকে 1 এ সেট করুন, অথবা পৃষ্ঠা-শৈলী পেজিংয়ের জন্য স্লাইড-প্রতি-ভিউ-এর সাথে মিল করুন৷ স্লাইডগুলি গ্রুপ গঠন করলে ম্যাচিং ভাল হয়; 1 একটি দীর্ঘ অভেদ সেটের জন্য ভাল।

অটোপ্লে। আলংকারিক গ্যালারির জন্য এটি চালু করুন। স্লাইডগুলি ক্লিকযোগ্য হলে এটি বন্ধ করুন, কারণ কেউ একটি চিত্রের জন্য পৌঁছাবে এবং এটি প্রতিস্থাপনকারীটিতে ক্লিক করবে৷ পজ-অন-হোভার ডেস্কটপ কভার করে কিন্তু স্পর্শে কোনো হোভার নেই।

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

গতি। 300 থেকে 500 মি। 200 এর নিচে এটি একটি পরিবর্তনের পরিবর্তে একটি কাটার মত দেখায়; 800 এর উপরে মানুষ দুবার ক্লিক করা শুরু করে।

কভারফ্লো লেআউট

লেআউটকে স্ট্যান্ডার্ড থেকে কভারফ্লোতে স্যুইচ করুন এবং পাশের স্লাইডগুলি 3D, ম্লান এবং সরে যায়, কেন্দ্রের স্লাইডটিকে একমাত্র পাঠযোগ্য হিসাবে রেখে যায়।

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

ডানদিকে যাওয়ার জন্য দুটি সেটিংস: 30 এবং 40 ডিগ্রির মধ্যে ঘোরান (গত 50 এবং পাশের স্লাইডগুলি অপঠনযোগ্য স্লিভারে পরিণত হয়), এবং কেন্দ্রীভূত স্লাইডগুলি চালু হয়, অথবা সক্রিয় চিত্রটি বাম দিকে ফ্লাশ করে বসে এবং রচনাটি ভেঙে যায়।

কভারফ্লো চারটি গভীরতা-ভিত্তিক শৈলীর একটি। ফ্লিপ, আর্ক এবং কক্ষপথ হল অন্য তিনটি, এবং এলিমেন্টর 3D ক্যারোজেল গাইড প্রতিটি এক জন্য ভাল কি কভার।

স্লাইড স্টাইলিং

স্টাইল ট্যাব স্লাইড, সীমানা ব্যাসার্ধ, ছায়া এবং হোভার স্টেটের মধ্যে ব্যবধান পরিচালনা করে।

একটি দ্বিতীয় চিন্তা মূল্য সেটিং হয় ফাঁক। জিরো গ্যাপ ক্যারোজেলটিকে একটি অবিচ্ছিন্ন চিত্র স্ট্রিপ হিসাবে পড়তে বাধ্য করে, যা একটি প্যানোরামার জন্য সঠিক এবং স্বতন্ত্র আইটেমগুলির জন্য ভুল৷ 16 থেকে 24px হল সেই পরিসর যেখানে স্লাইডগুলি আলাদা কার্ড হিসাবে পড়া হয় যেখানে সারিটি বিক্ষিপ্ত দেখায় না।

হোভার ইফেক্ট (স্কেল, ওভারলে, ক্যাপশন প্রকাশ) পুরো সেটে প্রযোজ্য, প্রতি স্লাইডে নয়। স্কেল 1.05 এর নিচে রাখুন। একটি স্লাইড যা হোভারে 15% বৃদ্ধি পায় তার প্রতিবেশীদের মধ্যে ধাক্কা দেয় এবং এটি একটি লেআউট বাগের মতো দেখায়। প্রতিটি ছবিতে একটি ভিন্ন হোভার অ্যানিমেশনের জন্য, রাখুন ইমেজ হোভার প্রভাব একটি গ্রিডে উইজেট।

লাইটবক্স এবং ক্যাপশন

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

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

একটি সতর্কতা: লাইটবক্সটি থাম্বনেইল নয়, পূর্ণ আকারের চিত্র পরিবেশন করে। আপনি যদি ছবির আকার সেট করেন medium_large ক্যারোজেল এবং আপনার আসল 8MB ক্যামেরা ফাইলের জন্য, লাইটবক্স এখনও 8MB সংস্করণ আনবে। আপলোডের সময় আসলগুলিকে সংকুচিত করুন, কেবল প্রদর্শনের আকার নয়।

আপনি যদি থাম্বনেইল নেভিগেশন চান

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

একটি স্লাইডিং সারির পরিবর্তে বিভাগ ট্যাব চান? এটি একটি ভিন্ন উইজেট। দ্য ফিল্টারযোগ্য ইমেজ গ্যালারি ছবিগুলিকে একটি গ্রিডে রাখে এবং কেউ একটি ট্যাবে ক্লিক করলে সেগুলি ফিল্টার করে৷।

লাইভ ডেমো

এটি আমদানি করতে: মাস্টার অ্যাডঅন → উইজেট বিল্ডার → উইজেট আমদানি করুন, JSON টেনে আনুন এবং এটি পছন্দের অধীনে এলিমেন্টরে প্রদর্শিত হবে। এটি বিনামূল্যে প্লাগইনে চলে, কোন প্রো লাইসেন্সের প্রয়োজন নেই। একই সংগ্রহ আছে প্লিন্থ হিরো স্লাইডার, প্রতি-স্লাইড লিঙ্ক সহ একটি ফুল-ব্লিড হিরো স্লাইডার, যা আমদানি করতেও বিনামূল্যে। মোট বিশটি নামকৃত ডিজাইন, তাদের মধ্যে আটটি বিনামূল্যে।

তীর স্টাইলিং

আকার, রঙ, পটভূমি, সীমানা ব্যাসার্ধ এবং অবস্থান: ক্যারোজেলের ভিতরে, এর বাইরে, বা প্রান্তগুলিকে ওভারল্যাপ করা।

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

ফলাফল

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

প্রতিটি ছবি একই উচ্চতা রাখা

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

.same-height .swiper-slide img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

প্রতিটি স্লাইড তখন 260px লম্বা হয় এবং ব্রাউজার ক্রপ করে যা ফিট নয়।

আপনি যদি একটি ক্রমাগত স্ক্রোল চান

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

প্রতিটি ছবিকে তার নিজস্ব লিঙ্ক দেওয়া

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

দুটি ভুল যা একটি ক্যারোজেলকে ধীর করে তোলে

পূর্ণ আকারের ছবি পরিবেশন করা হচ্ছে। উপরে আচ্ছাদিত, এবং এটি বড় এক। একটি ফটোগ্রাফি সাইটে পূর্ণ আকারে একটি দশ-স্লাইড ক্যারোজেল 20MB হতে পারে। একই ক্যারোজেল এ large 2MB এর নিচে এবং কেউ বলতে পারবে না।

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

লোগো ফটোগ্রাফ থেকে একটি ভিন্ন কাজ। তারা অমিল আকার এবং রং চালু এবং তারা একটি সারিতে বসার আগে সন্ধ্যায় প্রয়োজন, যা লোগো ক্যারোজেল ওয়াকথ্রু মাধ্যমে যায়।

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