FAA Pattern Library - Network

Carousel 

<section class="carousel" aria-labelledby="carousel-title-1454322746" data-carousel>
    <h2 class="carousel__title" id="carousel-title-1454322746">Onstage, backstage, and beyond.</h2>
    <div class="carousel__circle carousel__circle--one">
        <svg class="spotlight-circle__container spotlight-circle spotlight-circle--illini-orange" data-spotlight-circle xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 1424">
    <path class="spotlight-circle__path" id="path--hero1"
          fill="none" stroke="none"
          stroke-miterlimit="10" stroke-width="4" stroke-dasharray="10 20.1" data-spotlight-circle-path
    />
        <circle class="spotlight-circle__shape" id="hero1"
                cx="0" cy="0" r="750" stroke="#FF552E" stroke-width="4"
                data-spotlight-circle-id="hero1"
                data-spotlight-circle-animation="animation6"
                data-spotlight-circle-duration="3s"
                data-spotlight-circle-show-path="false"
        >
        </circle>
</svg>
    </div>
    <div class="carousel__circle carousel__circle--two">
        <svg class="spotlight-circle__container spotlight-circle spotlight-circle--heritage-orange" data-spotlight-circle xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 1424">
    <path class="spotlight-circle__path" id="path--hero2"
          fill="none" stroke="none"
          stroke-miterlimit="10" stroke-width="4" stroke-dasharray="10 20.1" data-spotlight-circle-path
    />
        <circle class="spotlight-circle__shape" id="hero2"
                cx="0" cy="0" r="750" stroke="#FF552E" stroke-width="4"
                data-spotlight-circle-id="hero2"
                data-spotlight-circle-animation="animation5"
                data-spotlight-circle-duration="3s"
                data-spotlight-circle-show-path="false"
        >
        </circle>
</svg>
    </div>
    <ul class="carousel__slides" data-slides-wrapper-element>
        <li class="carousel-slide" data-slide data-is-current-slide="true">
            <article class="carousel-slide__content">
                <div class="carousel-slide__image">
                    <figure class="captioned-image">
                        <picture class="captioned-image__picture">
                            <source srcset=" 840w,  1680w" sizes="(max-width:800px) 800px,
                                                1600px" type="image/webp">
                            <img class="captioned-image__image" src="" alt="Two actors engage onstage in Roman costumes. One gestures toward the audience.">
                        </picture>
                        <figcaption class="captioned-image__caption captioned-image__caption--dark">
                            A Funny Thing Happened on the Way to the Forum
                        </figcaption>
                    </figure>
                </div>
                <div class="carousel-slide__gradient"></div>
                <div class="carousel-slide__info">
                    <h3 class="carousel-slide__title">A Funny Thing Happened on the Way to the Forum</h3>
                    <div class="carousel-slide__description">ok</div>
                </div>
            </article>
        </li>
        <li class="carousel-slide" data-slide data-is-current-slide="false">
            <article class="carousel-slide__content">
                <div class="carousel-slide__image">
                    <figure class="captioned-image">
                        <picture class="captioned-image__picture">
                            <source srcset=" 840w,  1680w" sizes="(max-width:800px) 800px,
                                                1600px" type="image/webp">
                            <img class="captioned-image__image" src="" alt="Two actors engage onstage in Roman costumes. One gestures toward the audience.">
                        </picture>
                        <figcaption class="captioned-image__caption captioned-image__caption--dark">
                            A Funny Thing Happened on the Way to the Forum
                        </figcaption>
                    </figure>
                </div>
                <div class="carousel-slide__gradient"></div>
                <div class="carousel-slide__info">
                    <h3 class="carousel-slide__title">A Funny Thing Happened on the Way to the Forum</h3>
                    <div class="carousel-slide__description">ok</div>
                </div>
            </article>
        </li>
        <li class="carousel-slide" data-slide data-is-current-slide="false">
            <article class="carousel-slide__content">
                <div class="carousel-slide__image">
                    <figure class="captioned-image">
                        <picture class="captioned-image__picture">
                            <source srcset=" 840w,  1680w" sizes="(max-width:800px) 800px,
                                                1600px" type="image/webp">
                            <img class="captioned-image__image" src="" alt="Two actors engage onstage in Roman costumes. One gestures toward the audience.">
                        </picture>
                        <figcaption class="captioned-image__caption captioned-image__caption--dark">
                            A Funny Thing Happened on the Way to the Forum
                        </figcaption>
                    </figure>
                </div>
                <div class="carousel-slide__gradient"></div>
                <div class="carousel-slide__info">
                    <h3 class="carousel-slide__title">A Funny Thing Happened on the Way to the Forum</h3>
                    <div class="carousel-slide__description">ok</div>
                </div>
            </article>
        </li>
        <li class="carousel-slide" data-slide data-is-current-slide="false">
            <article class="carousel-slide__content">
                <div class="carousel-slide__image">
                    <figure class="captioned-image">
                        <picture class="captioned-image__picture">
                            <source srcset=" 840w,  1680w" sizes="(max-width:800px) 800px,
                                                1600px" type="image/webp">
                            <img class="captioned-image__image" src="" alt="Two actors engage onstage in Roman costumes. One gestures toward the audience.">
                        </picture>
                        <figcaption class="captioned-image__caption captioned-image__caption--dark">
                            A Funny Thing Happened on the Way to the Forum
                        </figcaption>
                    </figure>
                </div>
                <div class="carousel-slide__gradient"></div>
                <div class="carousel-slide__info">
                    <h3 class="carousel-slide__title">A Funny Thing Happened on the Way to the Forum</h3>
                    <div class="carousel-slide__description">ok</div>
                </div>
            </article>
        </li>
        <li class="carousel-slide" data-slide data-is-current-slide="false">
            <article class="carousel-slide__content">
                <div class="carousel-slide__image">
                    <figure class="captioned-image">
                        <picture class="captioned-image__picture">
                            <source srcset=" 840w,  1680w" sizes="(max-width:800px) 800px,
                                                1600px" type="image/webp">
                            <img class="captioned-image__image" src="" alt="Two actors engage onstage in Roman costumes. One gestures toward the audience.">
                        </picture>
                        <figcaption class="captioned-image__caption captioned-image__caption--dark">
                            A Funny Thing Happened on the Way to the Forum
                        </figcaption>
                    </figure>
                </div>
                <div class="carousel-slide__gradient"></div>
                <div class="carousel-slide__info">
                    <h3 class="carousel-slide__title">A Funny Thing Happened on the Way to the Forum</h3>
                    <div class="carousel-slide__description">ok</div>
                </div>
            </article>
        </li>
    </ul>
    <div class="carousel__navigation">
        <button class="carousel__controls-previous" data-carousel-controls-previous>
            <span class="carousel__controls-label">Go to previous slide</span>
            <span class="carousel__controls-icon-previous"><svg class="left-chevron" xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark left-chevron__shape" fill="#E84A27" fill-rule="nonzero" d="M7.768 1.65c.346-.419.3-1.05-.104-1.41a.937.937 0 0 0-1.356.11L0 8l6.308 7.65a.937.937 0 0 0 1.356.11c.403-.36.45-.991.104-1.41L2.534 8l5.234-6.35z"/>
</svg>
</span>
        </button>
        <ul class="carousel__indicators">
            <li class="carousel__indicator-wrap" data-carousel-indicator data-is-indicator-active="true">
                <button class="carousel__indicator">
                        <span class="carousel__indicator-text">Go to slide number 1: A Funny Thing Happened on the Way to the Forum</span>
                    </button>
            </li>
            <li class="carousel__indicator-wrap" data-carousel-indicator data-is-indicator-active="false">
                <button class="carousel__indicator">
                        <span class="carousel__indicator-text">Go to slide number 2: A Funny Thing Happened on the Way to the Forum</span>
                    </button>
            </li>
            <li class="carousel__indicator-wrap" data-carousel-indicator data-is-indicator-active="false">
                <button class="carousel__indicator">
                        <span class="carousel__indicator-text">Go to slide number 3: A Funny Thing Happened on the Way to the Forum</span>
                    </button>
            </li>
            <li class="carousel__indicator-wrap" data-carousel-indicator data-is-indicator-active="false">
                <button class="carousel__indicator">
                        <span class="carousel__indicator-text">Go to slide number 4: A Funny Thing Happened on the Way to the Forum</span>
                    </button>
            </li>
            <li class="carousel__indicator-wrap" data-carousel-indicator data-is-indicator-active="false">
                <button class="carousel__indicator">
                        <span class="carousel__indicator-text">Go to slide number 5: A Funny Thing Happened on the Way to the Forum</span>
                    </button>
            </li>
        </ul>
        <button class="carousel__controls-next" data-carousel-controls-next>
            <span class="carousel__controls-label">Go to next slide</span>
            <span class="carousel__controls-icon-next"><svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
        </button>
    </div>
</section>
 
{% import "bits/macros/imageSource.twig" as imageMacros %}

{% set uniqueCarouselTitleId = 'carousel-title-' ~ random() %}
{% set classNamePrefix = classNamePrefix | default('carousel') %}

<section class="{{ classNamePrefix }}" aria-labelledby="{{ uniqueCarouselTitleId }}" data-carousel>
    <h2 class="{{ classNamePrefix }}__title" id="{{ uniqueCarouselTitleId }}">{{ title }}</h2>
    <div class="{{ classNamePrefix }}__circle {{ classNamePrefix }}__circle--one">
        {% include 'bits/spotlight-circle/spotlight-circle.twig' with {
            animation: 'animation6',
            color: 'illini-orange',
            duration: '3s',
            id: 'hero1',
            size: '750',
            stroke: '4',
            viewBoxWidth: '2560',
            viewBoxHeight: '1424',
        } %}
    </div>
    <div class="{{ classNamePrefix }}__circle {{ classNamePrefix }}__circle--two">
        {% include 'bits/spotlight-circle/spotlight-circle.twig' with {
            animation: 'animation5',
            color: 'heritage-orange',
            duration: '3s',
            id: 'hero2',
            size: '750',
            stroke: '4',
            viewBoxWidth: '2560',
            viewBoxHeight: '1424',
        } %}
    </div>
    <ul class="{{ classNamePrefix }}__slides" data-slides-wrapper-element>
        {% for slide in slides %}
            <li class="{{ classNamePrefix }}-slide" data-slide data-is-current-slide="{{ loop.first ? 'true' : 'false' }}">
                <article class="{{ classNamePrefix }}-slide__content">
                    {% if slide.image %}
                        <div class="{{ classNamePrefix }}-slide__image">
                            <figure class="captioned-image">
                                <picture class="captioned-image__picture">
                                    <source
                                        srcset="{{ slide.image.src|towebp|resize(800, null) }} 840w, {{ slide.image.src|towebp|resize(1600, null) }} 1680w"
                                        sizes="(max-width:800px) 800px,
                                                1600px"
                                        type="image/webp"
                                    >
                                    <img class="captioned-image__image" src="{{ slide.image.src|tojpg|resize(1600, null) }}" alt="{{ slide.image.altText | escape }}">
                                </picture>
                                {%  if slide.image.caption %}
                                    <figcaption class="captioned-image__caption captioned-image__caption--dark">
                                        {{ slide.image.caption | raw }}
                                    </figcaption>
                                {% endif %}
                            </figure>
                        </div>
                        <div class="{{ classNamePrefix }}-slide__gradient"></div>
                    {% endif %}
                    <div class="{{ classNamePrefix }}-slide__info">
                        <h3 class="{{ classNamePrefix }}-slide__title">{{ slide.image.caption }}</h3>
                        <div class="{{ classNamePrefix }}-slide__description">{{ slide.description | raw }}</div>
                    </div>
                </article>
            </li>
        {% endfor %}
    </ul>
    <div class="{{ classNamePrefix }}__navigation">
        <button class="{{ classNamePrefix }}__controls-previous" data-carousel-controls-previous>
            <span class="{{ classNamePrefix }}__controls-label">Go to previous slide</span>
            <span class="{{ classNamePrefix }}__controls-icon-previous">{% include 'bits/icons/left-chevron.twig' %}</span>
        </button>
        <ul class="{{ classNamePrefix }}__indicators">
            {% for slide in slides %}
                <li class="{{ classNamePrefix }}__indicator-wrap" data-carousel-indicator data-is-indicator-active="{{ loop.first ? 'true' : 'false' }}">
                    <button class="{{ classNamePrefix }}__indicator">
                        <span class="{{ classNamePrefix }}__indicator-text">Go to slide number {{ loop.index }}: {{ slide.image.caption }}</span>
                    </button>
                </li>
            {% endfor %}
        </ul>
        <button class="{{ classNamePrefix }}__controls-next" data-carousel-controls-next>
            <span class="{{ classNamePrefix }}__controls-label">Go to next slide</span>
            <span class="{{ classNamePrefix }}__controls-icon-next">{% include 'bits/icons/right-chevron.twig' %}</span>
        </button>
    </div>
</section>
 
{
  "siteUnit": "network",
  "departmentName": "Network",
  "background": "light",
  "title": "Onstage, backstage, and beyond.",
  "slides": [
    {
      "image": {
        "url": "https://picsum.photos/1920/1080?random=0.3392146626155661",
        "altText": "Two actors engage onstage in Roman costumes. One gestures toward the audience.",
        "caption": "A Funny Thing Happened on the Way to the Forum"
      },
      "description": "ok"
    },
    {
      "image": {
        "url": "https://picsum.photos/1920/1080?random=0.735696397944223",
        "altText": "Two actors engage onstage in Roman costumes. One gestures toward the audience.",
        "caption": "A Funny Thing Happened on the Way to the Forum"
      },
      "description": "ok"
    },
    {
      "image": {
        "url": "https://picsum.photos/1920/1080?random=0.5819005362996517",
        "altText": "Two actors engage onstage in Roman costumes. One gestures toward the audience.",
        "caption": "A Funny Thing Happened on the Way to the Forum"
      },
      "description": "ok"
    },
    {
      "image": {
        "url": "https://picsum.photos/1920/1080?random=0.28415636724022275",
        "altText": "Two actors engage onstage in Roman costumes. One gestures toward the audience.",
        "caption": "A Funny Thing Happened on the Way to the Forum"
      },
      "description": "ok"
    },
    {
      "image": {
        "url": "https://picsum.photos/1920/1080?random=0.1463342873600053",
        "altText": "Two actors engage onstage in Roman costumes. One gestures toward the audience.",
        "caption": "A Funny Thing Happened on the Way to the Forum"
      },
      "description": "ok"
    }
  ]
}
  • Content: 
    //.carousel
//    width 100%
//    position relative
//
//    &__navigation
//        position relative
//        z-index 2
//
//    &__controls-previous
//    &__controls-next
//        cursor pointer
//
//    &__controls-previous
//        color blue
//
//    &__controls-next
//        color red
//
//    &__indicator-text
//        pointer-events none
//
//.carousel-slide
//    position absolute
//    transition all 550ms ease-in-out
//    background-color blue
//    opacity 0
//
//    &[data-is-current-slide="true"]
//        opacity 1
//
//    &__image
//        object-fit cover
//        object-position center
//        width 100vw
//        pointer-events none
  • URL: /components/raw/carousel/carousel.styl
  • Filesystem Path: components/partials/carousel/carousel.styl
  • Size: 675 Bytes

There are no notes for this item.