⚙ TRAINcycle
Draft

System Demos

Cart

16x11 Aspect Ratio

Setting an aspect ratio is recommended for most uses, especially images and video.

Basic Structure
{{< widget/carousel >}}
  {{< widget/slide >}}
    Image, text, html with tailwind, etc...
  {{< /widget/slide >}}
{{< /widget/carousel >}}
Carousel Options
[auto=N]
Optional; value of time in ms for auto-advance.
If left out the carousel will not auto advance.
[aspect-w=W aspect-h=H]
Values from 1-16 to determine the aspect ratio. Must be used together. Optional; helpful for image or video.

For a 10 second auto-advance with aspect ratio of 16x9 use: 

{{< widget/carousel auto=10000 
    aspect-w=16 aspect-h=9 >}}
  ...
{{< /widget/carousel >}}
Slide Options
widget/slide showFirst="true". Optional; show this slide first. First slide will otherwise show. Useful mostly when developing the slide. Last slide with showFirst will show when multiple slides are set to showFirst. 
  {{< widget/slide showFirst="true" >}}
  ...
  {{< /widget/slide >}}
Background Image
Text content and tailwind fancy displays go here, not just images.
There are many other ways to do any of these things...
Normal Image
News Updates

The {{< img >}} shortcode only works with images in the same folder as the item.

    Carousel 2

    No Aspect Ratio

    No aspect ratio set and it jumps height to accommodate the contents. Can be super annoying, but maybe has it's place.

    Basic Structure
    {{< widget/carousel >}}
  {{< widget/slide >}}
    Image, text, html with tailwind, etc...
  {{< /widget/slide >}}
{{< /widget/carousel >}}
    Carousel Options
    [auto=N]
    Optional; value of time in ms for auto-advance.
    If left out the carousel will not auto advance.
    [aspect-w=W aspect-h=H]
    Values from 1-16 to determine the aspect ratio. Must be used together. Optional; helpful for image or video.

    For a 10 second auto-advance with aspect ratio of 16x9 use: 

    {{< widget/carousel auto=10000 
    aspect-w=16 aspect-h=9 >}}
  ...
{{< /widget/carousel >}}
    Slide Options
    widget/slide showFirst="true". Optional; show this slide first. First slide will otherwise show. Useful mostly when developing the slide. Last slide with showFirst will show when multiple slides are set to showFirst. 
      {{< widget/slide showFirst="true" >}}
  ...
  {{< /widget/slide >}}
    Background Image
    Text content and tailwind fancy displays go here, not just images.
    There are many other ways to do any of these things...
    Normal Image
    News Updates

    The {{< img >}} shortcode only works with images in the same folder as the item.

      Tabs:

        First

        Voluptas repellendus cumque laborum enim dicta qui. Enim est qui placeat odit ipsum officiis. Est et atque repudiandae quaerat fuga molestiae quas.

        Second

        Quas asperiores laudantium odio officia. Et facere repellat commodi unde. Dolorem quia fugiat maiores iusto odit animi. Vero a pariatur delectus ut. Accusamus placeat quibusdam odit nostrum. Et fugit nam et.

        Est voluptatum saepe voluptas. Mollitia sed explicabo hic consequatur quibusdam. Reiciendis est itaque rerum nesciunt ipsam. Rerum corrupti voluptatem. Labore unde et iusto fugit.

        Vertical Tabs:

          Vertical First

          Voluptas repellendus cumque laborum enim dicta qui. Enim est qui placeat odit ipsum officiis. Est et atque repudiandae quaerat fuga molestiae quas.

          Vertical Second

          Quas asperiores laudantium odio officia. Et facere repellat commodi unde. Dolorem quia fugiat maiores iusto odit animi. Vero a pariatur delectus ut. Accusamus placeat quibusdam odit nostrum. Et fugit nam et.

          Est voluptatum saepe voluptas. Mollitia sed explicabo hic consequatur quibusdam. Reiciendis est itaque rerum nesciunt ipsam. Rerum corrupti voluptatem. Labore unde et iusto fugit.

          Vertical Third

          Dolores qui magnam ullam velit. Voluptatum necessitatibus voluptatem ducimus saepe eos. Ullam numquam rerum praesentium est perferendis laudantium voluptatibus. Unde quos ea asperiores tenetur magni aliquid labore nesciunt sed. Autem voluptates sed quia nam neque pariatur numquam qui.