Joran design system

Carousel 

<div class="o-container">

    <div class="c-carousel__item">
        <h2 class="c-carousel_heading-text">Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless</h2>
    </div>

    <ul class="c-carousel main-carousel" data-flickity='{ "contain": true, "accessibility": true, "pageDots": true }'>

        <li class="c-carousel__cell carousel-cell">

            <figure class="c-carousel__figure">
                <div class="c-carousel__img-container" style="
                        background-image: url('https://source.unsplash.com/1024x576?toolset');
                        background-repeat: no-repeat;
                        background-position: center center;
                        background-size: cover;
                        ">
                    <img class="c-carousel__img" src="https://source.unsplash.com/1024x576?toolset" alt="dolores ipsam at">
                </div>
                <figcaption class="c-carousel__figcaption">Magni aliquid ducimus aut.</figcaption>
            </figure>

        </li>

        <li class="c-carousel__cell carousel-cell">

            <figure class="c-carousel__figure">
                <div class="c-carousel__img-container" style="
                        background-image: url('https://source.unsplash.com/1024x576?challenge');
                        background-repeat: no-repeat;
                        background-position: center center;
                        background-size: cover;
                        ">
                    <img class="c-carousel__img" src="https://source.unsplash.com/1024x576?challenge" alt="ipsa accusamus quia">
                </div>
                <figcaption class="c-carousel__figcaption">Soluta doloribus architecto illum natus in quia eos omnis cumque.</figcaption>
            </figure>

        </li>

        <li class="c-carousel__cell carousel-cell">
            <a href="https://www.vd.ch" class="c-carousel__link">
                <figure class="c-carousel__figure">
                    <div class="c-carousel__img-container" style="
                        background-image: url('https://source.unsplash.com/1024x576?Kyat');
                        background-repeat: no-repeat;
                        background-position: center center;
                        background-size: cover;
                        ">
                        <img class="c-carousel__img" src="https://source.unsplash.com/1024x576?Kyat" alt="deleniti consequatur corrupti">
                    </div>
                    <figcaption class="c-carousel__figcaption">Sint maiores nobis omnis.</figcaption>
                </figure>
            </a>
        </li>

        <li class="c-carousel__cell carousel-cell">
            <a href="https://www.vd.ch" class="c-carousel__link">
                <figure class="c-carousel__figure">
                    <div class="c-carousel__img-container" style="
                        background-image: url('https://source.unsplash.com/1024x576?Manager');
                        background-repeat: no-repeat;
                        background-position: center center;
                        background-size: cover;
                        ">
                        <img class="c-carousel__img" src="https://source.unsplash.com/1024x576?Manager" alt="necessitatibus quisquam fugiat">
                    </div>
                    <figcaption class="c-carousel__figcaption">Quisquam magnam et.</figcaption>
                </figure>
            </a>
        </li>

        <li class="c-carousel__cell carousel-cell">

            <figure class="c-carousel__figure">
                <div class="c-carousel__img-container" style="
                        background-image: url('https://source.unsplash.com/1024x576?compelling');
                        background-repeat: no-repeat;
                        background-position: center center;
                        background-size: cover;
                        ">
                    <img class="c-carousel__img" src="https://source.unsplash.com/1024x576?compelling" alt="molestias accusamus dicta">
                </div>
                <figcaption class="c-carousel__figcaption">Magni similique voluptatem aut ipsam quaerat qui cumque.</figcaption>
            </figure>

        </li>

        <li class="c-carousel__cell carousel-cell">

            <figure class="c-carousel__figure">
                <div class="c-carousel__img-container" style="
                        background-image: url('https://source.unsplash.com/1024x576?AGP');
                        background-repeat: no-repeat;
                        background-position: center center;
                        background-size: cover;
                        ">
                    <img class="c-carousel__img" src="https://source.unsplash.com/1024x576?AGP" alt="laboriosam eaque saepe">
                </div>
                <figcaption class="c-carousel__figcaption">Ea enim voluptas ipsam maxime vitae non modi et ipsam.</figcaption>
            </figure>

        </li>

        <li class="c-carousel__cell carousel-cell">
            <a href="https://www.vd.ch" class="c-carousel__link">
                <figure class="c-carousel__figure">
                    <div class="c-carousel__img-container" style="
                        background-image: url('https://source.unsplash.com/1024x576?Cotton');
                        background-repeat: no-repeat;
                        background-position: center center;
                        background-size: cover;
                        ">
                        <img class="c-carousel__img" src="https://source.unsplash.com/1024x576?Cotton" alt="velit nisi consequuntur">
                    </div>
                    <figcaption class="c-carousel__figcaption">Commodi debitis est fugit ut voluptatem.</figcaption>
                </figure>
            </a>
        </li>

        <li class="c-carousel__cell carousel-cell">

            <figure class="c-carousel__figure">
                <div class="c-carousel__img-container" style="
                        background-image: url('https://source.unsplash.com/1024x576?Communications');
                        background-repeat: no-repeat;
                        background-position: center center;
                        background-size: cover;
                        ">
                    <img class="c-carousel__img" src="https://source.unsplash.com/1024x576?Communications" alt="mollitia rerum et">
                </div>
                <figcaption class="c-carousel__figcaption">Illum ullam molestiae eveniet reprehenderit atque minus quia.</figcaption>
            </figure>

        </li>

        <li class="c-carousel__cell carousel-cell">

            <figure class="c-carousel__figure">
                <div class="c-carousel__img-container" style="
                        background-image: url('https://source.unsplash.com/1024x576?zero');
                        background-repeat: no-repeat;
                        background-position: center center;
                        background-size: cover;
                        ">
                    <img class="c-carousel__img" src="https://source.unsplash.com/1024x576?zero" alt="ab optio et">
                </div>
                <figcaption class="c-carousel__figcaption">Quod dolore necessitatibus ullam sunt ratione ut.</figcaption>
            </figure>

        </li>

        <li class="c-carousel__cell carousel-cell">

            <figure class="c-carousel__figure">
                <div class="c-carousel__img-container" style="
                        background-image: url('https://source.unsplash.com/1024x576?IB');
                        background-repeat: no-repeat;
                        background-position: center center;
                        background-size: cover;
                        ">
                    <img class="c-carousel__img" src="https://source.unsplash.com/1024x576?IB" alt="perspiciatis placeat sed">
                </div>
                <figcaption class="c-carousel__figcaption">Sed tempore reiciendis quas omnis est dolorem similique voluptatibus consectetur.</figcaption>
            </figure>

        </li>

    </ul>
</div>
 
<div class="o-container">
  {% if heading %}
      <div class="c-carousel__item">
        <h2 class="c-carousel_heading-text">{{ heading }}</h2>
      </div>
  {% endif %}
  <ul class="c-carousel main-carousel" data-flickity='{ "contain": true, "accessibility": true, "pageDots": true }'>
    {% for article in articles %}
      <li class="c-carousel__cell carousel-cell">
        {% if article.link -%}
          <a href="https://www.vd.ch" class="c-carousel__link">
        {%- endif %}
          <figure class="c-carousel__figure">
            <div class="c-carousel__img-container"
                style="
                        background-image: url('{{ article.image.src }}');
                        background-repeat: no-repeat;
                        background-position: center center;
                        background-size: cover;
                        ">
              <img class="c-carousel__img"
                  src="{{ article.image.src }}"
                  alt="{{ article.image.alt }}">
            </div>
            {% if article.image.caption -%}
            <figcaption
              class="c-carousel__figcaption">{{ article.image.caption }}</figcaption>
            {%- endif %}
          </figure>
        {% if article.link -%}</a>{%- endif %}
      </li>
    {% endfor %}
  </ul>
</div>
 
{
  "heading": "Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless",
  "articles": [
    {
      "image": {
        "styleModifier": "c-carousel__figure",
        "src": "https://source.unsplash.com/1024x576?toolset",
        "alt": "dolores ipsam at",
        "caption": "Magni aliquid ducimus aut."
      },
      "link": false
    },
    {
      "image": {
        "styleModifier": "c-carousel__figure",
        "src": "https://source.unsplash.com/1024x576?challenge",
        "alt": "ipsa accusamus quia",
        "caption": "Soluta doloribus architecto illum natus in quia eos omnis cumque."
      },
      "link": false
    },
    {
      "image": {
        "styleModifier": "c-carousel__figure",
        "src": "https://source.unsplash.com/1024x576?Kyat",
        "alt": "deleniti consequatur corrupti",
        "caption": "Sint maiores nobis omnis."
      },
      "link": true
    },
    {
      "image": {
        "styleModifier": "c-carousel__figure",
        "src": "https://source.unsplash.com/1024x576?Manager",
        "alt": "necessitatibus quisquam fugiat",
        "caption": "Quisquam magnam et."
      },
      "link": true
    },
    {
      "image": {
        "styleModifier": "c-carousel__figure",
        "src": "https://source.unsplash.com/1024x576?compelling",
        "alt": "molestias accusamus dicta",
        "caption": "Magni similique voluptatem aut ipsam quaerat qui cumque."
      },
      "link": false
    },
    {
      "image": {
        "styleModifier": "c-carousel__figure",
        "src": "https://source.unsplash.com/1024x576?AGP",
        "alt": "laboriosam eaque saepe",
        "caption": "Ea enim voluptas ipsam maxime vitae non modi et ipsam."
      },
      "link": false
    },
    {
      "image": {
        "styleModifier": "c-carousel__figure",
        "src": "https://source.unsplash.com/1024x576?Cotton",
        "alt": "velit nisi consequuntur",
        "caption": "Commodi debitis est fugit ut voluptatem."
      },
      "link": true
    },
    {
      "image": {
        "styleModifier": "c-carousel__figure",
        "src": "https://source.unsplash.com/1024x576?Communications",
        "alt": "mollitia rerum et",
        "caption": "Illum ullam molestiae eveniet reprehenderit atque minus quia."
      },
      "link": false
    },
    {
      "image": {
        "styleModifier": "c-carousel__figure",
        "src": "https://source.unsplash.com/1024x576?zero",
        "alt": "ab optio et",
        "caption": "Quod dolore necessitatibus ullam sunt ratione ut."
      },
      "link": false
    },
    {
      "image": {
        "styleModifier": "c-carousel__figure",
        "src": "https://source.unsplash.com/1024x576?IB",
        "alt": "perspiciatis placeat sed",
        "caption": "Sed tempore reiciendis quas omnis est dolorem similique voluptatibus consectetur."
      },
      "link": false
    }
  ]
}
  • Content: 
    /* ======================================================================
   # _components.carousel.css
   ====================================================================== */

.c-carousel__cell {
  @apply
    w-full
    h-72
    mr-4
    ;

  @screen md {
    @apply
      h-96
        ;
  }

  @screen lg {
    height: 36rem;
  }
}

.c-carousel__figure {
  @apply
    flex
    flex-col
    h-full
    ;
}

.c-carousel__img-container {
  flex: 1;

  @apply
    rounded
    ;
}

.c-carousel__img {
  @apply
    sr-only
    ;
}

.c-carousel__figcaption {
  @extend %caption;
}

.c-carousel_heading-text {
  @extend %h2;

  @apply
    mb-8
  ;
}

/* -----------------------------------
   # Flickity components
   ----------------------------------- */

/**
 *  1. Avoid to see rounded corner
 */

/* position dots up a bit */
.c-carousel .flickity-page-dots {
  bottom: -1rem;
}

/* dots are lines */
.c-carousel .flickity-page-dots .dot {
  height: 4px;
  margin-right: -2px; /* [1] */
  margin-left: -2px; /* [1] */
  border-radius: 3px;

  @apply
    bg-primary-200
    opacity-100
    w-4
  ;

  @screen sm {
    @apply w-6;
  }

  @screen md {
    @apply w-8;
  }

  @screen lg {
    @apply w-10;
  }

  &.is-selected {
    @apply
      bg-primary
      z-10
      relative /* [1] */
    ;
  }
}

.c-carousel .flickity-prev-next-button {
  &.previous {
    @apply
      lg:-left-16
        ;
  }

  &.next {
    @apply
      lg:-right-16
        ;
  }
}

/* -------------------------------------
   # Carousel item with a link
   ------------------------------------- */

/**
 *Make sure to map the style with .u-image-link
 */

.c-carousel__link {
  .c-carousel__img-container {
    /* @extend .u-image-link; */

    @apply
      rounded
      inline-block
      border-2
      border-primary
      border-opacity-50

      transform
      transition
      scale-100
    ;
  }

  &:hover,
  &:active {
    .c-carousel__img-container {
      @apply
        scale-95
        ;
    }
  }

  &:focus {
    @apply
      outline-focus
    ;
  }
}



/* -------------------------------------
   # Print style
   ------------------------------------- */

/**
 * 1. Override inline style
 */

.c-carousel .flickity-page-dots,
.c-carousel .flickity-button {
  @extend .u-print-hidden;
}

.c-carousel {
  @media print {
    .flickity-viewport {
      overflow: initial;
    }

    .c-carousel__cell.carousel-cell {
      position: relative !important; /* [1] */
      left: auto !important; /* [1] */
    }

    .c-carousel__cell + .c-carousel__cell {
      @apply
        mt-3
        ;
    }
  }
}
  • URL: /components/raw/carousel/_components.carousel.css
  • Filesystem Path: src/components/04-Components/carousel/_components.carousel.css
  • Size: 2.6 KB

No notes defined.