EU System

Carousels

Documentation • Demo

Carousels

Carousels show a collection of items one at a time. They are also known as “slideshows” and “sliders”. Typical uses of carousels include scrolling news headlines, featured articles on home pages, and image galleries.

Resources

{#
  Parameters:
    - carousel_id (string) (default: 'ecl-carousel')
    - heading_attributes (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
    - heading_id (string) (default: 'ecl-carousel__heading'): the ID of carousel heading.
    - heading_title: (string) (default: 'gallery')
    - carousel_images (array) (default: []): format: [
        {
          "image" (object) format: {
            src (string),
            alt (string)
          },
          "download" (object) format: {
            target: (string),
            title (string),
            label (string)
          },
          "share" (object) format: {
            target: (string),
            title (string),
            label (string)
          },
          "description" (string or block).
          "copyright" (string)
        },
        ...
      ]
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-carousel' with { system: 'eu' } %}
 
{
  "_demo": {
    "scripts": "\n      document.addEventListener('DOMContentLoaded', function () {\n          ECL.carousels();\n      });\n    "
  },
  "carousel_images": [
    {
      "image": {
        "src": "../../assets/demo_images/business-demo-1.jpg",
        "alt": "First item"
      },
      "download": {
        "href": "../../example.html#",
        "title": "Download",
        "label": "Download"
      },
      "share": {
        "href": "../../example.html#",
        "title": "Share",
        "label": "Share"
      },
      "description": "<p>Nulla consequat massa quis enim. Donec pede justo.</p>\n        <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Integer tincidunt. <a href=\"#\" title=\"Cras dapibus\">Cras dapibus</a>. Vivamus elementum semper nisi.</p>",
      "copyright": "© Copyright 1"
    },
    {
      "image": {
        "src": "../../assets/demo_images/business-demo-2.jpg",
        "alt": "Second item"
      },
      "download": {
        "href": "../../example.html#",
        "title": "Download",
        "label": "Download"
      },
      "share": {
        "href": "../../example.html#",
        "title": "Share",
        "label": "Share"
      },
      "description": "<p>Nulla consequat massa quis enim. Donec pede justo.</p>\n        <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Integer tincidunt. <a href=\"#\" title=\"Cras dapibus\">Cras dapibus</a>. Vivamus elementum semper nisi.</p>",
      "copyright": "© Copyright 2"
    },
    {
      "image": {
        "src": "../../assets/demo_images/business-demo-3.jpg",
        "alt": "Third item"
      },
      "download": {
        "href": "../../example.html#",
        "title": "Download",
        "label": "Download",
        "variant": [
          "inverted",
          "standalone"
        ]
      },
      "share": {
        "href": "../../example.html#",
        "title": "Share",
        "label": "Share",
        "variant": [
          "inverted",
          "standalone"
        ]
      },
      "description": "<p>Nulla consequat massa quis enim. Donec pede justo.</p>\n        <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Integer tincidunt. <a href=\"#\" title=\"Cras dapibus\">Cras dapibus</a>. Vivamus elementum semper nisi.</p>",
      "copyright": "© Copyright 3"
    }
  ]
}
 
<section class="ecl-carousel" id="ecl-carousel" aria-labelledby="ecl-carousel__heading">
  <h3 class="ecl-headings ecl-headings--h3 ecl-u-sr-only" id="ecl-carousel__heading">gallery</h3>
  <div class="ecl-carousel__list-wrapper">
    <ul class="ecl-carousel__list ecl-list--unstyled">
      <li class="ecl-carousel__item">
        <img src="../../assets/demo_images/business-demo-1.jpg" alt="First item" class="ecl-carousel__image" />
      </li>
      <li class="ecl-carousel__item">
        <img src="../../assets/demo_images/business-demo-2.jpg" alt="Second item" class="ecl-carousel__image" />
      </li>
      <li class="ecl-carousel__item">
        <img src="../../assets/demo_images/business-demo-3.jpg" alt="Third item" class="ecl-carousel__image" />
      </li>
    </ul>
  </div>
  <div class="ecl-carousel__live-region">
    <div class="ecl-carousel__image-information" data-image=0>
      <div class="ecl-carousel__meta">
        <span class="ecl-carousel__meta-item ecl-carousel__meta-download">

          <a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-carousel__meta-link ecl-icon ecl-icon--download" href="../../example.html#"=":"=""=":"="">Download</a>
        </span>
        <span class="ecl-carousel__meta-item ecl-carousel__meta-share">

          <a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-carousel__meta-link ecl-icon ecl-icon--share" href="../../example.html#"=":"=""=":"="">Share</a>
        </span>
      </div>
      <div class="ecl-carousel__image-description">
        <p>Nulla consequat massa quis enim. Donec pede justo.</p>
        <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Integer tincidunt. <a href="#" title="Cras dapibus">Cras dapibus</a>. Vivamus elementum semper nisi.</p>
      </div>
      <div class="ecl-carousel__image-copyright">
        © Copyright 1
      </div>
    </div>
    <div class="ecl-carousel__image-information" data-image=1>
      <div class="ecl-carousel__meta">
        <span class="ecl-carousel__meta-item ecl-carousel__meta-download">

          <a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-carousel__meta-link ecl-icon ecl-icon--download" href="../../example.html#"=":"=""=":"="">Download</a>
        </span>
        <span class="ecl-carousel__meta-item ecl-carousel__meta-share">

          <a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-carousel__meta-link ecl-icon ecl-icon--share" href="../../example.html#"=":"=""=":"="">Share</a>
        </span>
      </div>
      <div class="ecl-carousel__image-description">
        <p>Nulla consequat massa quis enim. Donec pede justo.</p>
        <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Integer tincidunt. <a href="#" title="Cras dapibus">Cras dapibus</a>. Vivamus elementum semper nisi.</p>
      </div>
      <div class="ecl-carousel__image-copyright">
        © Copyright 2
      </div>
    </div>
    <div class="ecl-carousel__image-information" data-image=2>
      <div class="ecl-carousel__meta">
        <span class="ecl-carousel__meta-item ecl-carousel__meta-download">

          <a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-carousel__meta-link ecl-icon ecl-icon--download" href="../../example.html#"=":"=""=":"="">Download</a>
        </span>
        <span class="ecl-carousel__meta-item ecl-carousel__meta-share">

          <a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-carousel__meta-link ecl-icon ecl-icon--share" href="../../example.html#"=":"=""=":"="">Share</a>
        </span>
      </div>
      <div class="ecl-carousel__image-description">
        <p>Nulla consequat massa quis enim. Donec pede justo.</p>
        <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Integer tincidunt. <a href="#" title="Cras dapibus">Cras dapibus</a>. Vivamus elementum semper nisi.</p>
      </div>
      <div class="ecl-carousel__image-copyright">
        © Copyright 3
      </div>
    </div>
  </div>
</section>
  • Content: 
    /**
 * Carousel
 * @define carousel
 */

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-component-carousel/generic-component-carousel';

// Check if overridden dependencies are already loaded, if needed
@include check-imports(
  ('eu-style-typography-list', 'eu-component-link', 'eu-style-icon')
);

// Use generic mixin
@include exports('eu-component-carousel') {
  @include ecl-carousel();
}
  • URL: /components/raw/eu-component-carousel/eu-component-carousel.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-carousel/eu-component-carousel.scss
  • Size: 428 Bytes
  • Handle: @ecl/eu-component-carousel
  • Tags: molecule
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-carousel/eu-component-carousel.twig