sectionscrollresponsivecontainermodern

Horizontal Scroll Container

Адаптивный горизонтальный скролл-контейнер с плавной прокруткой и скрытой полосой. Идеален для галерей, списков карточек, витрин товаров.

Live Preview

Prompt

<div class="overflow-x-auto snap-x snap-mandatory w-full pb-4">
  <style>.scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }</style>
  <div class="overflow-x-auto snap-x snap-mandatory scrollbar-hide w-full pb-4">
    <div class="flex gap-4 sm:mx-0 sm:px-[max(1.5rem,calc((100vw-64rem)/2))] w-max mr-auto ml-auto pr-6 pl-6">
      <div class="snap-center shrink-0 w-[85vw] sm:w-[300px] h-48
        bg-neutral-800 rounded-lg flex items-center justify-center
        text-white">Item 1</div>
      <div class="snap-center shrink-0 w-[85vw] sm:w-[300px] h-48
        bg-neutral-800 rounded-lg flex items-center justify-center
        text-white">Item 2</div>
      <div class="snap-center shrink-0 w-[85vw] sm:w-[300px] h-48
        bg-neutral-800 rounded-lg flex items-center justify-center
        text-white">Item 3</div>
    </div>
  </div>
</div>

All Prompts