---json
{
    "aliases": [
        { "path": ":release:beta:carrousel" }
    ],
    "description": "The carrousel component permits to layout and to scroll components horizontally.",
    "page_id": "jp4qhbhgdeg3pxkzvzry3",
    "title": "How to create a carrousel layout"
}
---
====== 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 =====

==== Image Gallery ====

This example shows you a carrousel of [[docs:content:image|image]] known also as a image gallery.

<webcode name="Default" frameborder="0" >
  * The cards:
<code dw>
<carrousel>
{{ :woman-yoga-sunset.jpg?0x600 |}}
{{ :page_speed_performance.png?0x600 |}}
{{ :undraw_content_creator.svg?0x600 |}}
</carrousel>
</code>
  * The output:
</webcode>


==== Carrousel dynamically created with the iterator ====


With the [[docs:templating:iterator|template iterator]], you can create dynamically the children that you want to show.


Example with all pages that are in the layout path.
<webcode name="Default">
  * The iterator with the data node that uses the [[docs:templating:sql|page sql]] to select the pages
<code dw>
<iterator>
    <data>select where path like "%layout%" order by title asc limit 10</data>

    <heading h4 align="text-center" spacing="mb-3"> The pages talking about layout in ComboStrap </heading>
    <carrousel element-width="250px">
        <fragment>
            <card clickable>
            <page-image path="$path" ratio="16:9"/>
            == $title ==
            <itext color="muted">${date_modified | format("eeee dd-MM KK:mm")}</itext>

            ${description" | head(200,"...")} [[$path| ]]
            </card>
        </fragment>
    </carrousel>
</iterator>
</code>
  * The output:
</webcode>

\\
\\

==== 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 [[docs:layout:component:grid|grid]] if the minimum element count is not met. By default, the value is ''3''.

This feature is most used with an [[docs:templating:iterator|iterator]] where the number of element is not known in advance but for the purpose if this demonstration we are using 2 fix [[docs:block:card|cards]].

<webcode name="Default" frameborder="0" >
<code dw>
<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>
</code>
  * The output is a centered [[docs:layout:component:grid|grid]].
</webcode>
===== Syntax =====

<code dw>
<carrousel 
   element-width="..." 
   elements-min="..."
   control="all|none"
>
</carrousel>
</code>
where:
  * ''element-width'' is the minimum [[docs:styling:dimension|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 [[docs:layout:component:grid|grid]] is instead used.
  * ''control'' manages the control elements. If ''none'', no arrow buttons or bullets are shown.

\\
\\

<note>
= 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)


</note>
===== Support =====

==== Lazy Loading ====
[[docs:performance:lazy|Lazy loading]] works on modern browser where the [[https://caniuse.com/?search=loading|loading attribute is supported]].