ComboStrap - Carrousel Layout

About

A carrousel is a layout component where the user can cycle through elements in a horizontal way.

To cycle through the elements, you can use:

  • on a mobile, the swipe hand gesture
  • on a desktop, the mouse or the arrow and bullet control elements.

Because a carrousel is also known as a slideshow, the elements of a carrousel are generally called slides.

Example

This example shows you a carrousel of image known also as a image gallery.

  • The cards:
<carrousel>
{{ :woman-yoga-sunset.jpg?0x600 |}}
{{ :page_speed_performance.png?0x600 |}}
{{ :undraw_content_creator.svg?0x600 |}}
</carrousel>
  • The output:

Carrousel dynamically created with the iterator

With the template iterator, you can create dynamically the children that you want to show.

Example with all pages that are in the layout path.

  • The iterator with the data node that uses the page sql to select the pages
<iterator>
    <data>select where path like "%layout%" order by title asc limit 10</data>

    <heading h4 text-align="center" spacing="mb-3"> The pages talking about layout in ComboStrap </heading>
    <carrousel element-width="250px">
        <template>
            <card clickable>
            <page-image path="$path" ratio="16:9"/>
            == $title ==
            <itext color="muted"><date format="%h %d - %H:%M">$date_modified</date></itext>

            <pipeline>"$description" | head(200,"...")</pipeline> [[$path| ]]
            </card>
        </template>
    </carrousel>
</iterator>
  • The output:

The pages talking about layout in ComboStrap

A slide is a UI component that divide a page in horizontal region

Sep 27 - 09:01

Slide are used mainly in landing page where they separate and add contrast between section

A slide is a UI component that divide a page in horizontal region

Mar 04 - 09:01

Slide are used mainly in landing page where they separate and add contrast between section

ComboStrap - Main Slot

Mar 04 - 09:01

In the page layout, the page main slot is a slot where the content of your page is rendered. Main Header and Footer The main slot supports also two sub-slots: the main header slot, located at its to...

ComboStrap - Railbar

Sep 27 - 09:01

ComboStrap - Railbar About The railbar is a navigation rail with all devel:menus: * the page actions (Create / Edit / Show / Backlinks / Old Revisions / BackToTop) * the user actions (Login /...

ComboStrap - Railbar

Mar 04 - 09:01

The railbar is a navigation rail with all devel:menusmenus actions: the page actions (Create / Edit / Show / Backlinks / Old Revisions / BackToTop) the user actions (Login / Logout / Update Profile)...

ComboStrap UI - Container

Mar 04 - 09:01

A container: positions the content in the center and limits the horizontal width (adjusted by screen sizes) It's used in layout component such as: page header page footer and slide page layouthol...

ComboStrap UI - Grid (Row and Cell)

Sep 28 - 17:46

ComboStrap UI - Grid (Row and Cell) About The grid component permits to create complex layout based * on row * and cell Articles Related Syntax where: * type may be the value: Type Des...

ComboStrap UI - Grid (Row and Cell)

Apr 26 - 10:18

The grid component permits to create a grid layout based on cells inside a row. It will layout the cells uniformly on the horizontal axis. If a cell does not pass horizontally, it goes to a new line ...

ComboStrap UI - HR (Horizontal Rule)

Mar 04 - 09:01

The hr component permits to delimit two sections of content by drawing a horizontal rule (hr). It's also known sometime as the Divider and has a separator role. It represents: a paragraph-level thema...

ComboStrap UI - Jumbotron

Mar 04 - 09:01

A jumbotron is a simple box component that emphase prominently its content. slide Syntax Example buttonleadtexthorizontal rule



Minimum Elements Count

If the number of elements is not enough to feel the screen, the default behavior of the carrousel is to repeat them.

The elements-min attribute permits to disable this feature and to replace the carrousel by a grid if the minimum element count is not met. By default, the value is 3.

This feature is most used with an iterator where the number of element is not known in advance but for the purpose if this demonstration we are using 2 fix cards.

<carrousel element-width="250px" elements-min="3">
<card>
{{:logo.svg?ratio=21:9|}}
=== First Card ===
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</card>
<card>
{{:logo.svg?ratio=21:9|}}
=== Second Card ===
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</card>
</carrousel>
  • The output is a centered grid.

First Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Second Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Syntax

<carrousel 
   element-width="..." 
   elements-min="..."
   control="all|none"
>
</carrousel>

where:

  • element-width is the minimum width of an element on the screen. By default, this is 100% (meaning that there is only one element, ie a gallery)
  • elements-min is the minimum of elements needed to show a carrousel. By default: 3. If this threshold is not met, a grid is instead used.
  • control manages the control elements. If none, no arrow buttons or bullets are shown.



Implicit difference between the gallery mode and other carrousels

A gallery for Combostrap is a carrousel that shows only one element at a time. This is the default mode (ie when the element-width attribute is unset).

  • In this mode:
    • the arrow buttons are the only controls visible on mobile
    • there is always one element in view
  • In other mode (when there is more than one element on the screen)
    • there is no control visible on mobile
    • the number of elements shown is a plain number and a half (to show that this is serie of element)

Support

Lazy Loading

Lazy loading works on modern browser where the loading attribute is supported.

Powered by ComboStrap