CSS সহ ক্যারোসেল

Adam Argyle

প্রকাশিত: ২০ মার্চ, ২০২৫

Chrome 135 থেকে, আপনি CSS ওভারফ্লো 5 স্পেসিফিকেশনের বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন যা স্ক্রোল এবং ক্যারোজেল অভিজ্ঞতা তৈরি করার জন্য ডিজাইন করা হয়েছে।

এই পোস্টটি জাভাস্ক্রিপ্ট ছাড়াই এবং এই নতুন বৈশিষ্ট্যগুলি ব্যবহার করে তৈরি করা বিভিন্ন স্ক্রোল এবং ক্যারোজেল অভিজ্ঞতার একটি সারসংক্ষেপ। নিম্নলিখিত ভিডিওটি দেখুন এবং এখন কী অর্জন করা যেতে পারে তা জানতে উত্তেজিত হন।

ভিডিওতে স্ক্রোল বোতাম, স্ক্রোল মার্কার, স্ক্রোল চালিত অ্যানিমেশন, স্ক্রোল-স্টেট() কোয়েরি, :has(), গ্রিড, অ্যাঙ্কর এবং আরও অনেক কিছুর সমন্বয় দেখানো হয়েছে।

আরও চিত্তাকর্ষক হল অ্যাক্সেসিবিলিটির গল্প।

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

::scroll-button() এবং ::scroll-marker() সাথে দেখা করুন

ক্যারোজেল হলো একটি স্ক্রোল এরিয়া যেখানে সর্বাধিক দুটি UI সুবিধা যুক্ত করা হয়—বোতাম এবং মার্কার।

CSS ক্যারোজেল বৈশিষ্ট্যের প্রথম সংস্করণে, বোতাম এবং মার্কারগুলি CSS থেকে তৈরি করা হয়েছে। ব্রাউজারটি উপাদানগুলিকে ভাইবোন হিসেবে, সঠিক ভূমিকা সহ, সঠিক ট্যাব ক্রমে রাখে এবং তাদের অবস্থা বজায় রাখে। এটি একটি অ্যাক্সেসযোগ্য ক্যারোজেল তৈরি করা সহজ করে তোলে।

• স্ক্রোল বোতাম
  ব্রাউজার প্রদত্ত, স্টেটফুল এবং ইন্টারেক্টিভ স্ক্রোল অ্যাফোর্ডেন্স <button> উপাদান যা কন্টেন্ট অ্যাক্সেস এবং স্ক্রোল এরিয়ার ৮৫% চাপলে স্ক্রোল করতে সহায়তা করে।

• স্ক্রোল মার্কার
  ব্রাউজার প্রদত্ত, স্টেটফুল নেভিগেশন <a> উপাদান যা স্ক্রোল এলাকায় যেকোনো অনুরোধকৃত আইটেমের জন্য কন্টেন্ট অ্যাক্সেসে সহায়তা করে।

এই পোস্টের বাকি অংশে দেখানো হয়েছে কিভাবে এই নতুন বৈশিষ্ট্যগুলি ব্যবহার করে একটি ক্যারোজেল তৈরি করা যায়।

একটি স্ক্রোলার দিয়ে শুরু করুন

আপনি আপনার সাইটের যেকোনো স্ক্রোল এলাকায় বোতাম এবং মার্কার যোগ করতে পারেন।

নিম্নলিখিত CSS একটি মৌলিক স্ক্রোল এরিয়া তৈরি করে যা পরবর্তী ধাপগুলিতে বোতাম এবং মার্কার যোগ করার জন্য ব্যবহার করা হবে। ক্যারোসেলের জন্য স্ক্রোল স্ন্যাপিং প্রয়োজন হয় না, তবে এই উদাহরণে এটি ব্যবহার করা হয়েছে। ক্যারোসেলগুলি উল্লম্ব স্ক্রোলার এবং দ্বিমুখী স্ক্রোলারের জন্যও কাজ করে।

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}

::scroll-button() সহ স্ক্রোল বোতাম যোগ করুন

আপনার অপারেটিং সিস্টেমের উপর নির্ভর করে, আপনার স্ক্রলবারের চারপাশে ইতিমধ্যেই স্ক্রল বোতাম থাকতে পারে। অন্তর্নির্মিত স্ক্রলবার বোতামগুলি স্ক্রল এলাকাটিকে ধাক্কা দেয়, যখন CSS স্ক্রল বোতামগুলি স্ক্রল এলাকার 85% পৃষ্ঠা দখল করে।

যেসব ক্যারোসেল স্ক্রোল স্ন্যাপ পয়েন্ট সহ একবারে শুধুমাত্র একটি পূর্ণ প্রস্থের আইটেম দেখায়, তাদের জন্য এটি আইটেমের পরিমাণ অনুসারে একটি আইটেমের মতো মনে হবে। আইটেমের দীর্ঘ তালিকা যেখানে একসাথে একাধিক দৃশ্যমান, এটি প্রায় একটি সম্পূর্ণ পৃষ্ঠা স্ক্রোল করে।

CSS এর মাধ্যমে স্ক্রোল বোতাম যোগ করতে:

1. অন্যান্য ছদ্ম-উপাদানের মতো এগুলি যোগ করুন, একটি নির্বাচক সহ: .carousel::scroll-button(right) যাতে ডানদিকে স্ক্রোল করার জন্য একটি বোতাম থাকে।
2. ঐচ্ছিক অ্যাক্সেসযোগ্য ফলব্যাক অল্ট টেক্সট সহ content নির্দিষ্ট করুন।

ব্রাউজারটি স্ক্রোলারের সহোদর হিসেবে আপনার কন্টেন্টের ভেতরে থাকা আসল বোতাম তৈরি করবে। এখন আপনি এই বোতামগুলি সাজাতে, স্টাইল করতে অথবা আপনার প্রয়োজন অনুসারে anchor() পারবেন। পরবর্তী CSS দুটি তৈরি করবে, একটি স্ক্রোল বাম বোতামের জন্য এবং একটি স্ক্রোল রাইট বোতামের জন্য।

.carousel {
  …

  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Right";
  }

  &::scroll-button(*):focus-visible {
    outline-offset: 5px;
  }
}

::scroll-marker() দিয়ে স্ক্রোল মার্কার যোগ করুন

স্ক্রলবার থাম্ব এলিমেন্টের মতো, সিএসএস স্ক্রল মার্কারগুলি ক্যারোজেলের আকার নির্দেশ করতে পারে এবং শেষ বা শুরুতে দ্রুত সরানোর সুযোগও প্রদান করে। একটি সিএসএস স্ক্রল মার্কার স্ক্রলবার থেকে আলাদা কারণ প্রতিটি মার্কার একটি লিঙ্ক যা স্ক্রোলারের যেকোনো আইটেমকে প্রতিনিধিত্ব করতে পারে।

এই পার্থক্যের একটি উদাহরণ, একটি টিভি সিরিজের ঋতু বিবেচনা করুন। ১০টি পর্বের প্রতিটির জন্য একটি মার্কার তৈরি করার পরিবর্তে, অধ্যায়ের শুরুতে যাওয়া ২টি মার্কার তৈরি করুন।

লক্ষ্য করুন এই মার্কারগুলি বিন্দু নয়, তারা তাদের ছদ্ম-উপাদানের content: "Season 1" বৈশিষ্ট্যটি ব্যবহার করছে। মার্কারগুলি থাম্বনেইলও হতে পারে, যা সাধারণত ই-কমার্স বা ফটো ফোকাসড ওয়েবসাইটগুলিতে গ্যালারি ক্যারোসেলের জন্য ব্যবহৃত হয়।

মার্কারগুলি ইন-পেজ <a> লিঙ্কের মতো, তবে কিছু বিশেষ বৈশিষ্ট্য রয়েছে:

1. মার্কারটি যখন দৃশ্যমান থাকে বা স্ন্যাপ করা হয় তখন এর মধ্যে একটি :target-current অবস্থা অন্তর্ভুক্ত থাকে।
2. কীবোর্ড নেভিগেশন অন্তর্ভুক্ত, এবং একটি ফোকাসগ্রুপের মতো আচরণ করে।
3. স্ক্রিন রিডার অভিজ্ঞতা অন্তর্ভুক্ত, এবং ট্যাবলিস্টের মতো রিপোর্ট।

নিম্নলিখিত ধাপগুলি অনুসরণ করে আপনার স্ক্রলারের আকর্ষণীয় বিষয়গুলিতে মার্কার যুক্ত করুন:

1. scroll-marker-group অবস্থান নির্ধারণ করুন before বা after ।
2. একটি নির্বাচক .carousel .point-of-interest::scroll-marker দিয়ে আগ্রহের বিষয়গুলি নির্বাচন করুন।
3. ঐচ্ছিক অ্যাক্সেসযোগ্য ফলব্যাক অল্ট টেক্সট সহ content নির্দিষ্ট করুন; সংখ্যা, টেক্সট, খালি, অথবা একটি ছবি।

ব্রাউজারটি সমস্ত মার্কার তৈরি করে এবং মার্কার গ্রুপ কন্টেইনারে রাখে। এই উদাহরণে প্রতিটি <li> এর জন্য একটি খালি মার্কার তৈরি করা হয়, যাতে প্রতিটি আইটেমের জন্য একটি মার্কার ডট তৈরি করা যায়।

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
  }

  > li::scroll-marker:target-current {
    background: var(--accent);
  }
}

মার্কারগুলির ধারণকারী উপাদানটিকে বলা হয় ::scroll-marker-group এবং এটি স্ক্রোল বোতামগুলির মতোই স্ক্রোলারের একটি ভাইবোন হিসাবে তৈরি করা হয়েছে। এই ধারকটি আপনার প্রয়োজন অনুসারে স্টাইল করা এবং স্থাপন করা যেতে পারে।

একই সাথে মার্কার এবং বোতাম

দুটো একসাথে রাখলে অভিজ্ঞতাটা ক্যারোজেলের মতো দেখাবে কিন্তু এর নিম্নলিখিত সুবিধাগুলি থাকবে:

• জাভাস্ক্রিপ্ট নিষ্ক্রিয় থাকলে কাজ করে।
• কোন হাইড্রেশন বা অলস আকার (CLS কমানো) নেই।
• সব ধরণের স্ক্রোল অ্যানিমেশন এবং ট্রিগারের জন্য প্রস্তুত।
• অ্যাক্সেসিবিলিটি অন্তর্ভুক্ত।
• টাচ, মাউস এবং কীবোর্ড বান্ধব।

কম করো, বেশি পৌঁছাও, দ্রুত।

রিসোর্স

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

• ওয়েব স্ট্যান্ডার্ডস
  • সিএসএস ওভারফ্লো ৫
  • ক্যারোজেল ব্যাখ্যাকারী
  • WAI আরিয়া ক্যারোজেল
• ক্রোম
  • জাহাজে পাঠানোর উদ্দেশ্য
  • ক্যারোজেল গ্যালারি
  • ক্যারোজেল কনফিগারেটর

ক্যারোজেল কনফিগারেটর

ভিজ্যুয়াল এবং ইন্টারেক্টিভ শিক্ষার্থীদের জন্য, ক্যারোজেল কনফিগারেটর ব্যবহার করে দেখুন।

এটি সুইচ অফার করে, ধরুন স্ক্রোল বোতাম, এবং সক্রিয় করা হলে প্রদর্শিত ক্যারোজেলে অবিলম্বে বোতামগুলি উপস্থিত হয় এবং সংশ্লিষ্ট CSS ব্যবহৃত হয়।

এতে আরও উন্নত ধারণার উদাহরণ রয়েছে যা ক্যারোজেল সংলগ্ন:

• ইন্টারঅ্যাক্টিভিটি
• স্ক্রোল-স্টেট
• স্ক্রোল চালিত অ্যানিমেশন
• এবং স্ক্রোল স্ন্যাপ কলাম

ক্যারোজেল গ্যালারি

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

মজার ব্যাপার হলো, পুরো সাইটটি জাভাস্ক্রিপ্টবিহীন।

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

আরও কাজ

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

আপনার নিজস্ব উপাদান আনুন

স্ক্রোল বোতাম এবং মার্কারগুলির জন্য আপনার নিজস্ব উপাদান যুক্ত করার জন্য ইতিমধ্যেই কাজ চলছে। এর অর্থ হল আপনি আপনার নিজস্ব <a> ট্যাগ সরবরাহ করতে পারেন যাতে আইকনের মতো সমৃদ্ধ সামগ্রী থাকে। আপনি Tailwind দিয়ে তৈরি আপনার নিজস্ব বহু-স্তরযুক্ত বোতামও আনতে পারেন।

চক্রাকার স্ক্রলিং

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

আমরা আশা করি আপনি এই বৈশিষ্ট্যটি উপভোগ করবেন। আমরা সকল "জাভাস্ক্রিপ্ট অক্ষম" ওয়েব ব্যবহারকারীদের জন্য অপেক্ষা করছি যারা এখন একটি সুন্দর স্ক্রোলযোগ্য অভিজ্ঞতা পাবেন এবং একটি বিল্ট-ইন ক্যারোজেলের আরও ভাল সময়োপযোগী জীবনচক্র থেকে সমস্ত CLS হ্রাস পাবেন।

আপনার করার মতো কম কাজ, দুর্দান্ত ব্যবহারকারীর অভিজ্ঞতা, আরও ভাল পারফরম্যান্স।