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

Adam Argyle

প্রকাশিত: 20 মার্চ, 2025

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

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

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

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

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

Chrome DevTools ক্যারোজেল অ্যাক্সেসিবিলিটি ট্রি - ডেমোর স্ক্রিনশট

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

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

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

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

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

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

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

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

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

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

কন্টেন্ট কেটে ফেলা ছাড়া অন্য কোনো সুবিধা বা ক্লু ছাড়াই একটি স্ক্রোল এলাকা দেখানো হয়েছে।

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

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

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

দ্রষ্টব্য: আপনি যদি বোতামগুলি একবারে ঠিক একটি আইটেম সরাতে চান তবে scroll-snap-type: x mandatory scroll-snap-stop: always প্রতিটি স্ন্যাপ চাইল্ডে।

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() দিয়ে স্ক্রোল মার্কার যোগ করুন

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

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

লক্ষ্য করুন এই মার্কারগুলি বিন্দু নয়, তারা 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: ' ';
    
    &:target-current {
      background: var(--accent);
    }
  }
}

ডেমো

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

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

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

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

কম করুন, আরও পৌঁছান, দ্রুত।

ডেমো

সম্পদ

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

• ওয়েব স্ট্যান্ডার্ড
  • CSS ওভারফ্লো 5
  • ক্যারোজেল ব্যাখ্যাকারী
  • WAI আরিয়া ক্যারোজেল
• ক্রোম
  • জাহাজের অভিপ্রায়
  • ক্যারোজেল গ্যালারি
  • ক্যারোজেল কনফিগারার

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

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

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

https://chrome.dev/carousel-configurator/

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

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

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

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

মজার ঘটনা, পুরো সাইটটি জাভাস্ক্রিপ্টলেস।

https://chrome.dev/carousel/

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

আরও কাজ

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

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

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

চক্রীয় স্ক্রোলিং

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

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

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