Gigaclear Pattern Library

Horizontal Scroll 

<div data-vanilla-module="HorizontalScroll" class="horizontal-scroll-section">
    <div class="horizontal-scroll-pin h-screen overflow-hidden">
        <div class="component-spacer-padding h-full">
            <div class="horizontal-scroll-mask w-full h-full overflow-hidden">
                <div class="horizontal-scroll-track flex gap-8 w-max h-full">

                    <div class="shrink-0 w-[70vw] md:w-[840px] flex items-center justify-center">
                        <img class="aspect-[16/12] block object-cover" src="/front-end/playground/cta/cta-1.jpg" />
                    </div>

                    <div class="shrink-0 w-[70vw] md:w-[840px] flex items-center justify-center">
                        <img class="aspect-[16/12] block object-cover" src="/front-end/playground/cta/cta-2.jpg" />
                    </div>

                    <div class="shrink-0 w-[70vw] md:w-[840px] flex items-center justify-center">
                        <img class="aspect-[16/12] block object-cover" src="/front-end/playground/cta/cta-3.jpg" />
                    </div>

                    <div class="shrink-0 w-[70vw] md:w-[840px] flex items-center justify-center">
                        <img class="aspect-[16/12] block object-cover" src="/front-end/playground/cta/cta-1.jpg" />
                    </div>

                    <div class="shrink-0 w-[70vw] md:w-[840px] flex items-center justify-center">
                        <img class="aspect-[16/12] block object-cover" src="/front-end/playground/cta/cta-1.jpg" />
                    </div>

                    <div class="shrink-0 w-[70vw] md:w-[840px] flex items-center justify-center">
                        <img class="aspect-[16/12] block object-cover" src="/front-end/playground/cta/cta-1.jpg" />
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
 
<div data-vanilla-module="HorizontalScroll" class="horizontal-scroll-section">
  <div class="horizontal-scroll-pin h-screen overflow-hidden">
    <div class="component-spacer-padding h-full">
      <div class="horizontal-scroll-mask w-full h-full overflow-hidden">
        <div class="horizontal-scroll-track flex gap-8 w-max h-full">
          {% for item in list %}
            <div class="shrink-0 w-[70vw] md:w-[840px] flex items-center justify-center">
              <img
                class="aspect-[16/12] block object-cover"
                src="{{ item.image | asset }}"
              />
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>
 
{
  "siteName": "Gigaclear Pattern Library",
  "list": [
    {
      "image": "playground/cta/cta-1.jpg"
    },
    {
      "image": "playground/cta/cta-2.jpg"
    },
    {
      "image": "playground/cta/cta-3.jpg"
    },
    {
      "image": "playground/cta/cta-1.jpg"
    },
    {
      "image": "playground/cta/cta-1.jpg"
    },
    {
      "image": "playground/cta/cta-1.jpg"
    }
  ]
}
  • Handle: @horizontal-scroll
  • Preview:
  • Filesystem Path: fractal\components\06-playground\horizontal-scroll\horizontal-scroll.nunjucks
  • Referenced by (1): @page

No notes defined.