Skip to content

Latest commit

 

History

History
89 lines (70 loc) · 4.26 KB

components-carousel.md

File metadata and controls

89 lines (70 loc) · 4.26 KB
Raw

Components

This theme ships some components (as twig macros) that hide the complexity of rendering the same elements over and over again with the correct HTML.

See Tabler documentation at https://preview.tabler.io/carousel.html

Carousel

Parameters

carousel() macro, waits for 2 parameters:

Parameter Description Type Default
items Array of Item array []
options Options object object {}

Item

item() parameter requires either the image or customContent parameter:

Parameter Description Type Default
image Path to an image string
customContent Custom html content. overrides image if set. html (raw) null
title Item title. string null
description Item description. string null

Options

Parameter Description Type Default
id Custom id to apply to the carousel mixed rand(Number)
extraClass Add extra classes on steps container string empty string
interval Interval in milliseconds to change the slides int 5000
touch Support touch input (see Bootstrap docs) boolean true
pause Auto stop sliding (see Bootstrap docs) mixed false
wrap Restart again (see Bootstrap docs) boolean true
controls Show controls boolean false
captionCustomClass Apply custom class to caption string d-none d-md-block
captionBackground Show caption background boolean true
indicators Show indicators boolean true
indicatorsType Set indicators type (allowed values: dots, thumbs) string empty string
indicatorsRatio Set indicators ratio (see Tabler docs) string empty string
indicatorsOrientation Set indicators orientation (see Tabler docs, allowed values: vertical) string empty string

Links:

Usage

{% from '@Tabler/components/carousel.html.twig' import carousel %}

{% set items = [
    {
        'image': 'https://via.placeholder.com/640x360/1485bc/ffffff?text=Image+0',
    },
    {
        'customContent': '<h1>Hello World</h1>',
    },
    {
        'image': 'https://via.placeholder.com/640x360/9dbf00/ffffff?text=Image+1',
        'title': 'SOME Fancy Title',
        'description': 'Lorem Ipsum NO HTML',
    },
    {
        'image': 'https://via.placeholder.com/640x360/bc147a/ffffff?text=Image+2',
    },
    {
        'image': 'https://via.placeholder.com/640x360/1454bc/ffffff?text=Image+3',
    }
] %}

{% set options = {
    'interval': false,
    'controls': true,
    'indicators': true,
    'indicatorsType': 'thumbs',
    'indicatorsOrientation': 'vertical',
} %}

{ { carousel(items, options) } }

Next steps

Please go back to the Tabler bundle documentation to find out more about using the theme.