GDL - Global Design Language

Carousel: Default 

<link media="all" rel="stylesheet" href="../../assets/css/v7_carousel.css">

<div class="c-carousel">

    <h3 class="u-label-03">
        <a class="o-link-text u-mb-medium" href="#">
            <svg class="o-icon o-icon--sm u-mr-xsmall u-mb-xxsmall">
                <use xlink:href="#icon-camera"></use>
            </svg>
            Turismo e coronavirus, quali località più colpite nell&#39;estate 2020
        </a>
    </h3>

    <div class="c-carousel__container u-flex u-pb-base">

        <figure class="c-carousel__item u-relative u-size-full-height u-mr-small">
            <a class="u-block" href="#" target="_blank">
                <picture>
                    <source srcset="https://unsplash.it/1000/563?random0" media="(min-width: 740px)">
                    <img class="u-size-full u-size-full-height u-cover" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/450/600?random0" alt="">
                </picture>
            </a>
        </figure>

        <figure class="c-carousel__item u-relative u-size-full-height u-mr-small">
            <a class="u-block" href="#" target="_blank">
                <picture>
                    <source srcset="https://unsplash.it/1000/563?random1" media="(min-width: 740px)">
                    <img class="u-size-full u-size-full-height u-cover" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/450/600?random1" alt="">
                </picture>
            </a>
        </figure>

        <figure class="c-carousel__item u-relative u-size-full-height u-mr-small">
            <a class="u-block" href="#" target="_blank">
                <picture>
                    <source srcset="https://unsplash.it/1000/563?random2" media="(min-width: 740px)">
                    <img class="u-size-full u-size-full-height u-cover" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/450/600?random2" alt="">
                </picture>
            </a>
        </figure>

        <figure class="c-carousel__item u-relative u-size-full-height u-mr-small">
            <a class="u-block" href="#" target="_blank">
                <picture>
                    <source srcset="https://unsplash.it/1000/563?random3" media="(min-width: 740px)">
                    <img class="u-size-full u-size-full-height u-cover" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/450/600?random3" alt="">
                </picture>
            </a>
        </figure>

        <figure class="c-carousel__item u-relative u-size-full-height u-mr-small">
            <a class="u-block" href="#" target="_blank">
                <picture>
                    <source srcset="https://unsplash.it/1000/563?random4" media="(min-width: 740px)">
                    <img class="u-size-full u-size-full-height u-cover" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/450/600?random4" alt="">
                </picture>
            </a>
        </figure>

    </div>

</div>
 
<link media="all" rel="stylesheet" href="{{ '/assets/css/v7_carousel.css' | path }}">

<div class="c-carousel">
  
  <h3 class="u-label-03">
    <a class="o-link-text u-mb-medium" href="#">
      <svg class="o-icon o-icon--sm u-mr-xsmall u-mb-xxsmall"><use xlink:href="#icon-camera"></use></svg>
      {{ title }}
    </a>
  </h3>

  <div class="c-carousel__container u-flex u-pb-base">
    {% for i in range(0,5) %}
      <figure class="c-carousel__item u-relative u-size-full-height u-mr-small">
        <a class="u-block" href="#" target="_blank">
          <picture>
            <source srcset="{{media.horizontal}}{{i}}" media="(min-width: 740px)">
            <img class="u-size-full u-size-full-height u-cover" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="{{media.vertical}}{{i}}" alt="">
          </picture>  
        </a>
      </figure>
    {% endfor %}
    
  </div>

</div>
 
{
  "media": {
    "horizontal": "https://unsplash.it/1000/563?random",
    "vertical": "https://unsplash.it/450/600?random"
  },
  "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
  "abstract": "Luca Pezzetta è uno dei pizzaioli più interessanti della sua generazione. Da Clementina reinterpreta i classici e propone la cucina di pesce, tra cotture al barbecue e stagionature"
}
  • Content: 
    // Name:            Gallery carousel
// Description:     Display images in a carousel slider
//
// Component:       `c-gallery-carousel`
//
// Dependencies:    `settings/spacing.tokens`
//                  `v7_colors`
//
// ========================================================================
@use 'settings/v7/colors.tokens' as *;
@use 'settings/v7/spacing.tokens' as *;
@use 'settings/v7/layout-standard' as *;
@use 'settings/v7/global' as *;
@use 'settings/v7/scrollbar' as *;

@use 'tools/v7/mq' as *;
@use 'tools/v7/typography' as *;
@use 'tools/v7/zindex' as *;

// @use 'objects/v7/links' as *;
// @use 'objects/v7/icons' as *;

$scroll-size: 10px;

$lightbox-show: 1;
$lightbox-hide: 0;
$lightbox-full-size: 100%;
$lightbox-close-icon-position: -12px;

.c-carousel {
  --scrollbar-track: #{$ui-04};
  --scrollbar-thumb: #{$ui-07};

  @media (prefers-color-scheme: dark) {
		body:not([data-color-scheme*="light"]) & {
      --scrollbar-track: #{$ui-07};
      --scrollbar-thumb: #{$ui-03};
    }
  }

  body[data-color-scheme*="dark"] {
    --scrollbar-track: #{$ui-07};
    --scrollbar-thumb: #{$ui-03};
  }

  &--lightbox {
    background-color: var(--background-color-gray);

    img {
      margin-bottom: 0 !important;
    }

    .c-carousel__arrow {
      background-color: rgba($ui-02, .6);
      z-index: 99;
    }

    .c-carousel__name {
      color: var(--body-color);
      text-decoration: none;
    }

    .c-carousel__expanded picture {
      touch-action: none;
      z-index: 80;
    }
  }

  &--figcaption {
    .c-carousel__item::after {
        position: absolute;
        bottom: 0;
        left: 0;
        content: '';
        width: 100%;
        height: 50%;
        background: var(--ui-gradient, linear-gradient(180deg, rgba(13, 13, 13, 0.00) 0%, rgba(13, 13, 13, 0.30) 25.13%, rgba(13, 13, 13, 0.80) 100%));
    }
  }

  &__container {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    @include scrollbar;
  }
  
  &__item {
    scroll-snap-align: center;
    min-width: 80%;
    @include bp(md) {
      min-width: 20%;
    }
  }

  &__expanded {
    height: $lightbox-full-size;
    a {
      z-index: 9;
    }
  }

  &__full-img {
    max-height: 90vh;
    opacity: $lightbox-hide;
    transition: opacity .5s linear;
    border-radius: 8px;
  }
  
  &__icon-close {
    top: $lightbox-close-icon-position;
    right: $lightbox-close-icon-position;
    border: 2px solid $ui-01;
    border-radius: 50%;
    opacity: $lightbox-show;
    background: $ui-02;
    z-index: 999;
  }

  &__overlay {
    width: $lightbox-hide;
    height: $lightbox-hide;
    background-color: rgba($ui-02, .8);
    z-index: 999;

    &:target {
      width: $lightbox-full-size;
      height: $lightbox-full-size;

      & img,
      & .btn-close {
        opacity: $lightbox-show;
      }
    }
  }
}
  • URL: /components/raw/carousel/carousel.scss
  • Filesystem Path: src/lib/components/carousel/carousel.scss
  • Size: 2.8 KB

Scrollable Carousel Gallery

Display images in a carousel slider

Variations

Possible variations:

  • Default
  • LIghtbox

Usage

In order to display a carousel component use following syntax:

  1. for a default caorousel:
  {% render "@carousel--default" %}
  1. for a lightbox carousel:
  {% render "@carousel--lightbox" %}