The Gravstrap Carousel shortcode handles the Bootstrap Carousel component. Here is a live example:

The carousel shortcode, shown above, is defined by the following definition:

[g-carousel id="carousel1" name="carousel1" images_path="04.plugins/plugin-160204-gravstrap/carousel-160205"]

[g-carousel-item image="image1.jpg"]
**Duis mollis**, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

[g-carousel-item image="image2.jpg"]
Cras mattis consectetur purus sit amet fermentum.

[g-carousel-item image="image3.jpg"]
Cras mattis consectetur purus sit amet fermentum.

Shortcode parameters

The [g-carousel] shortcode has some optional parameters:

  • id - defines the same name HTML property.
  • name - defines an unique component name.
  • images_path - defines the path where images are saved. Learn more about the images_path parameter.
  • previous_label - defines the Carousel previous label.
  • next_label - defines the Carousel next label.

The [g-carousel-item] shortcode, which defines each carousel slide, has the following parameters:

  • image - defines the image name.
  • caption - defines the image caption.

Render the carousel component using the template

The carousel component can also be dynamically filled with data provided by a json file or fetched from a database. You will provide an array similar to the following one:

$carousel = array(
    'id' => 'carousel1',
    'name' => 'carousel1',
    'images_path' => '04.plugins/plugin-160204-gravstrap/carousel-160205',
    'previous_label' => 'Prev',
    'next_label' => 'Next',            
    'items' => array(
            'image' => 'image1.jpg',
            'caption' => 'First image caption',
            'image' => 'image2.jpg',
            'caption' => 'Second image caption',
            'image' => 'image3.jpg',
            'caption' => 'Third image caption',

$this->grav['twig']->twig_vars['carousel'] = $carousel;

then in your template you will render the carousel as follows:

{% include 'bootstrap/carousel.html.twig' with carousel %}

Please note that the provide content is raw: it's up to you to provide a formatted one.

Next Post Previous Post