Component Library

Carousel 

<div class="iastate22-carousel-holder">
    <div class="iastate22-carousel">
        <div class="carousel__slide">
            <div class="carousel__slide-image" style="background-image:url(../../img/carousel-slide_fpo.jpg)"></div>
            <div class="carousel__slide-content">
                <p class="carousel__slide-content-caption">Image caption lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip consequat.</p>
                <h3 class="carousel__slide-content-title">Image Slide Short Descriptive Title Lorem</h3>
                <p class="carousel__slide-content-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
        <div class="carousel__slide">
            <div class="video-embed">
                <div class="video-embed__media-wrap">
                    <img src="../../img/IMG-Inline_Center_FPO.jpg" alt="" width="1200" height="673" />
                    <div class="video-embed__video" aria-label="YouTube Video: " data-vid="LjOmcZkXVcU"></div>
                </div>
            </div>
            <div class="carousel__slide-content">
                <p class="carousel__slide-content-caption">Image caption lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip consequat.</p>
                <h3 class="carousel__slide-content-title">YouTube Video Example</h3>
                <p class="carousel__slide-content-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
        <div class="carousel__slide">
            <div class="video-embed">
                <div class="video-embed__media-wrap">
                    <img src="https://vumbnail.com/74317943.jpg" alt="Video Poster">
                    <div data-vimeo-id="74317943" class="video--vim"></div>
                </div>
            </div>
            <div class="carousel__slide-content">
                <p class="carousel__slide-content-caption">Image caption lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip consequat.</p>
                <h3 class="carousel__slide-content-title">Vimeo Video Example</h3>
                <p class="carousel__slide-content-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
    <div class="carousel__nav">
        <div class="carousel__nav-sizer"></div>
        <button class="carousel__nav-previous" aria-label="Previous slide">
          <span class="visible-for-screen-readers">Previous slide</span>
      </button>
        <button class="carousel__nav-next" aria-label="Next slide">
          <span class="visible-for-screen-readers">Next slide</span>
      </button>
    </div>
</div>
 
<div class="iastate22-carousel-holder">
    <div class="iastate22-carousel">
        {% for slide in slides %}
            <div class="carousel__slide">
              {% if slide.carousel_content == "image" %}
              <div class="carousel__slide-image" style="background-image:url({{ slide.image|path }})"></div>
              {% elseif slide.carousel_content == "video" %}
              <div class="video-embed">
                <div class="video-embed__media-wrap">
                  {% if slide.carousel_video.video.poster_image.url %}
                    <img src="{{ slide.carousel_video.video.poster_image.url }}" alt="{{ slide.carousel_video.video.poster_image.alt }}" width="{{ slide.carousel_video.video.poster_image.width }}" height="{{ slide.carousel_video.video.poster_image.height }}" />
                  {% else %}
                    {% if slide.carousel_video.video.source == "youtube" %}
                      <img src="https://img.youtube.com/vi/{{ slide.carousel_video.video.youtube_video_id }}/maxresdefault.jpg" alt="Video Poster">
                    {% elseif slide.carousel_video.video.source == "vimeo" %}
                      <img src="https://vumbnail.com/{{ slide.carousel_video.video.vimeo_video_id }}.jpg" alt="Video Poster">
                    {% endif %}
                  {% endif %}
                  {% if slide.carousel_video.video.source == "youtube" %}
                    <div class="video-embed__video" aria-label="YouTube Video: {{ slide.carousel_video.video.title }}" data-vid="{{ slide.carousel_video.video.youtube_video_id }}"></div>
                    {% elseif slide.carousel_video.video.source == "vimeo" %}
                    <div data-vimeo-id="{{ slide.carousel_video.video.vimeo_video_id }}" class="video--vim"></div>
                    {% endif %}
                </div>
                {% if fields.media_caption_toggle == true %}
                    <div class="video-embed__caption">{{ fields.media_caption }}</div>
                {% endif %}
              </div>
            {% endif %}
              <div class="carousel__slide-content">
                  {% if slide.caption %}<p class="carousel__slide-content-caption">{{ slide.caption }}</p>{% endif %}
                  {% if slide.title %}<h3 class="carousel__slide-content-title">{{ slide.title }}</h3>{% endif %}
                  {% if slide.body %}<p class="carousel__slide-content-body">{{ slide.body }}</p>{% endif %}
              </div>
          </div>
      {% endfor %}
    </div>
    <div class="carousel__nav">
      <div class="carousel__nav-sizer"></div>
      <button class="carousel__nav-previous" aria-label="Previous slide">
          <span class="visible-for-screen-readers">Previous slide</span>
      </button>
      <button class="carousel__nav-next" aria-label="Next slide">
          <span class="visible-for-screen-readers">Next slide</span>
      </button>
    </div>
</div>
 
{
  "slides": [
    {
      "carousel_content": "image",
      "image": "../../img/carousel-slide_fpo.jpg",
      "caption": "Image caption lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip consequat.",
      "title": "Image Slide Short Descriptive Title Lorem",
      "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    },
    {
      "carousel_content": "video",
      "carousel_video": {
        "video": {
          "poster_image": {
            "url": "../../img/IMG-Inline_Center_FPO.jpg",
            "alt": "",
            "width": "1200",
            "height": "673"
          },
          "source": "youtube",
          "youtube_video_id": "LjOmcZkXVcU",
          "vimeo_video_id": ""
        }
      },
      "caption": "Image caption lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip consequat.",
      "title": "YouTube Video Example",
      "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    },
    {
      "carousel_content": "video",
      "carousel_video": {
        "video": {
          "poster_image": {
            "url": "",
            "alt": "",
            "width": "1200",
            "height": "673"
          },
          "source": "vimeo",
          "youtube_video_id": "",
          "vimeo_video_id": "74317943"
        }
      },
      "caption": "Image caption lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip consequat.",
      "title": "Vimeo Video Example",
      "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    }
  ]
}
  • Content: 
    @import "~flickity/css/flickity";

.paragraph-widget--carousel {
  @extend %extended-component-width;
}

.flickity-viewport {
  transition: height 0.3s ease-in-out;
}

.iastate22-carousel-holder {
  position: relative;

  .iastate22-carousel {
    background: $white;
  }

  .carousel__slide {
    width: 100%;
    .video-embed__media-wrap {
      &:before {
        padding-top: 57.5%;
      }
    }
    .video-embed__video-hover {
      &:after {
        opacity: 0;
      }
    }
  }

  .carousel__slide-image {
    height: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 57.45%;
  }

  .carousel__slide-content {
    text-align: left;
    margin-top: rem(70);
    @include media-breakpoint-up(lg) {
      margin-top: rem(15);
    }
    .carousel__slide-content-caption {
      @extend %caption;
    }
  }

  .carousel__nav {
    pointer-events: none;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
  }

  .carousel__nav-sizer {
    width: 100%;
    padding-top: 57.45%;
    height: 0;
    left: 0;
    top: 0;
  }

  .carousel__nav-previous,
  .carousel__nav-next {
    border: none;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: initial;
    position: absolute;
    top: 50%;
    width: rem(44);
    height: rem(44);
    background-color: $iastate-maroon;
    transform: translate(50%, -50%);
    transition: 0.3s background-color ease-in-out;
    @include media-breakpoint-up(lg) {
      width: rem(60);
      height: rem(60);
    }
    &:hover {
      background-color: $iastate-red;
    }
    &::after {
      content: "";
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23.437' height='21.469'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath data-name='Path 52' d='m11.145.734 10.818 10-10.818 10'/%3E%3Cpath data-name='Path 1510' d='M21.257 10.734H-.001'/%3E%3C/g%3E%3C/svg%3E");
      background-repeat: no-repeat no-repeat;
      background-position: center center;
      background-size: cover;
      position: absolute;
      width: rem(25);
      height: rem(23);
      top: rem(10);
      left: rem(10);
      @include media-breakpoint-up(lg) {
        width: rem(30);
        height: rem(26);
        top: rem(17);
        left: rem(15);
      }
    }
  }

  .carousel__nav-previous {
    left: 0;
    transform: translate(-50%, -50%);
    &::after {
      transform: rotate(180deg);
    }
  }

  .carousel__nav-next {
    right: 0;
  }

  .carousel__nav-dots {
    padding-top: 60%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    pointer-events: none;
    @include media-breakpoint-up(lg) {
      padding-top: 52%;
    }
    li {
      margin: 0 rem(12);
      .dot {
        cursor: pointer;
        pointer-events: initial;
        border-radius: 50%;
        width: rem(20);
        height: rem(20);
        background-color: rgba($grey, 0.5);
        border: none;
        appearance: none;
        @include media-breakpoint-up(lg) {
          background-color: rgba($white, 0.5);
        }
        &.is-selected {
          background-color: $iastate-red;
          @include media-breakpoint-up(lg) {
            background-color: $white;
          }
        }
      }
    }
  }
}
  • URL: /components/raw/carousel/_carousel.scss
  • Filesystem Path: src/components/carousel/_carousel.scss
  • Size: 3.4 KB

Carousel

This is a custom component (the class has been prefaced with .iastate22-[classname]).

  • The carousel uses the flickity library
  • The image is added as a background image
  • Optional elements are the caption, title and body sections and the wallpaper image (if using a video in a slide)
  • The slide allows for use of either a YouTube or Vimeo video called by using the appropriate video ID and selecting a service in the config. If no wallpaper image is supplied, the default wallpaper image from either YouTube or Vimeo will be displayed.
  • The custom styles are imported into the index.scss file as @import "../components/carousel/carousel";
  • The .ts file for the javascript is imported into the index.ts file as import carouselsInit from "./components/carousel"; and called as carouselsInit();