AMP Carousel এবং Image Gallery (amp-carousel, amp-image-lightbox) গাইড ও নোট

AMP Carousel এবং **AMP Image Gallery (যেমন amp-carousel এবং amp-image-lightbox) দুটি গুরুত্বপূর্ণ AMP কম্পোনেন্ট যা ওয়েব পেজে ইন্টারঅ্যাকটিভ ছবি বা ভিডিও প্রদর্শন করতে ব্যবহৃত হয়। এগুলি বিশেষভাবে ডিজাইন করা হয়েছে যাতে পেজের লোডিং টাইম কম থাকে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত হয়।

1. AMP Carousel (amp-carousel)

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

AMP Carousel এর বৈশিষ্ট্য:

• এটি স্লাইডশো বা carousel তৈরি করতে সাহায্য করে, যেখানে ব্যবহারকারী একে একে বিভিন্ন কন্টেন্ট দেখতে পারেন।
• amp-carousel এলিমেন্ট বিভিন্ন ধরনের কন্টেন্ট যেমন ছবি, ভিডিও, অথবা HTML এলিমেন্ট স্লাইড করার জন্য ব্যবহার করা যায়।
• এটি রেসপন্সিভ, যা বিভিন্ন ডিভাইসে সঠিকভাবে কাজ করে।

AMP Carousel ব্যবহার করার উদাহরণ:

<amp-carousel width="600" height="400" layout="responsive" type="slides">
  <amp-img src="image1.jpg" width="600" height="400" alt="Image 1"></amp-img>
  <amp-img src="image2.jpg" width="600" height="400" alt="Image 2"></amp-img>
  <amp-img src="image3.jpg" width="600" height="400" alt="Image 3"></amp-img>
</amp-carousel>

• type="slides": এটি carousel এর ধরন নির্দেশ করে, যেখানে ব্যবহারকারী একে একে স্লাইড করতে পারেন।
• layout="responsive": এটি এলিমেন্টকে রেসপন্সিভ বানায়, যাতে এটি স্ক্রীনের আকার অনুযায়ী নিজেকে মানিয়ে নেবে।

AMP Carousel এর অন্যান্য বৈশিষ্ট্য:

• নেভিগেশন: ব্যবহারকারীরা স্বাভাবিকভাবে স্লাইডের মাধ্যমে নেভিগেট করতে পারেন, অথবা আপনি স্লাইড নেভিগেট করতে previous এবং next বাটন ব্যবহার করতে পারেন।
• স্বয়ংক্রিয় স্লাইডিং: amp-carousel স্লাইডের অটো প্লে ফিচারও সাপোর্ট করে, যাতে স্লাইডগুলো স্বয়ংক্রিয়ভাবে চলতে থাকে।

2. AMP Image Gallery (amp-image-lightbox)

amp-image-lightbox একটি AMP কম্পোনেন্ট যা একটি ইমেজ গ্যালারি তৈরি করতে ব্যবহৃত হয়। এটি সাধারণত একটি গ্যালারির ছবিতে ক্লিক করলে সেটি একটি lightbox এ পূর্ণ স্ক্রীনে প্রদর্শিত হয়। এটি ব্যবহারকারীদের একটি ছবি দেখতে ও জুম ইন বা আউট করার জন্য একটি ইন্টারঅ্যাকটিভ উপায় প্রদান করে।

AMP Image Gallery এর বৈশিষ্ট্য:

• এটি ইমেজ গ্যালারি তৈরি করতে সাহায্য করে, যেখানে ব্যবহারকারীরা ছবিতে ক্লিক করার মাধ্যমে সেগুলিকে পূর্ণ স্ক্রীনে দেখতে পারেন।
• একাধিক ছবি প্রদর্শন করতে amp-img ট্যাগ এবং লাইটবক্সের জন্য amp-image-lightbox ব্যবহার করা হয়।
• এটি পেজের লোডিং সময় কমাতে সাহায্য করে এবং ওয়েব পেজে দ্রুত এবং কার্যকরী ছবি প্রদর্শনের সুযোগ দেয়।

AMP Image Gallery ব্যবহার করার উদাহরণ:

<amp-image-lightbox id="lightbox" layout="nodisplay"></amp-image-lightbox>

<amp-img src="image1.jpg" width="600" height="400" alt="Image 1" 
         on="tap:lightbox" role="button"></amp-img>
<amp-img src="image2.jpg" width="600" height="400" alt="Image 2" 
         on="tap:lightbox" role="button"></amp-img>
<amp-img src="image3.jpg" width="600" height="400" alt="Image 3" 
         on="tap:lightbox" role="button"></amp-img>

• on="tap:lightbox": যখন ব্যবহারকারী ছবিতে ক্লিক করবেন, তখন lightbox সক্রিয় হবে এবং ছবিটি পূর্ণ স্ক্রীনে প্রদর্শিত হবে।
• role="button": এই অ্যাট্রিবিউটটি ইমেজের উপরে ক্লিক করতে পারার জন্য একটি বাটন হিসেবে সেট করে।

AMP Image Gallery এর অন্যান্য বৈশিষ্ট্য:

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

AMP Carousel এবং AMP Image Gallery এর তুলনা

AMP Carousel এবং AMP Image Gallery এর ব্যবহার ক্ষেত্র

1. AMP Carousel:
   • পণ্য গ্যালারি: ই-কমার্স সাইটে পণ্যের ছবি প্রদর্শন করার জন্য।
   • বিজ্ঞাপন স্লাইডশো: স্লাইডিং বিজ্ঞাপন বা কনটেন্ট প্রদর্শন।
   • ফটো গ্যালারি: ছবি বা ভিডিও স্লাইড করতে।
2. AMP Image Gallery:
   • প্রকৃতি ফটোগ্রাফি: উচ্চমানের ছবি প্রদর্শন করতে গ্যালারি।
   • বিশেষ ইভেন্ট বা ফটোগ্রাফি শো: ইভেন্ট বা ফটোগ্রাফি পোর্টফোলিও প্রদর্শন।
   • গ্যালারি প্রদর্শনী: পূর্ণ স্ক্রীনে ছবিগুলির আলোচনায় ক্লিক করে নেভিগেট করা।

উপসংহার

amp-carousel এবং amp-image-lightbox উভয়ই AMP কম্পোনেন্ট যা ওয়েব পেজে ছবি, ভিডিও বা কন্টেন্ট প্রদর্শনের ক্ষেত্রে দ্রুত এবং ইন্টারঅ্যাকটিভ উপায় প্রদান করে। AMP Carousel স্লাইডিং কন্টেন্ট এবং AMP Image Gallery ছবির পূর্ণ স্ক্রীন ভিউ তৈরি করতে ব্যবহৃত হয়। এটি দ্রুত লোডিং নিশ্চিত করার মাধ্যমে ব্যবহারকারীর অভিজ্ঞতা উন্নত করে, বিশেষ করে মোবাইল ডিভাইসে।