Flint Institute of Music Component Library

Hero Carousel 

<div class="hero_carousel js-hero-carousel">
    <div class="hero_carousel_inner">
        <div class="hero_carousel_embla carousel embla" data-js-embla-carousel='{"align":"center","loop":true,"inViewActiveOnly":true,"focus":false}'>
            <div class="embla__viewport" data-js-embla-carousel-viewport>
                <div class="hero_carousel_items embla__container">

                    <div id="hero-carousel-item-1" class="hero_carousel_item carousel__item embla__slide js-hero-carousel-item" aria-labelledby="page_title" data-js-embla-carousel-slide>
                        <div class="hero_carousel_item_inner">
                            <div class="hero_carousel_background">

                                <img class="hero_carousel_image" srcset="https://images.fastspot.com/fim/980x654/1 980w, https://images.fastspot.com/fim/740x494/1 740w, https://images.fastspot.com/fim/500x334/1 500w, https://images.fastspot.com/fim/300x200/1 300w" sizes="(min-width: 980px) 910px, (min-width: 780px) 705px, (min-width: 500px) calc(99.62vw - 57px), (min-width: 400px) calc(-88.75vw + 846px), calc(-181.25vw + 1180px)" src="https://images.fastspot.com/fim/300x200/1" alt="" loading="eager" width="300" height="200">

                                <div class="hero_carousel_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"258133523","type":"vimeo","title":"Fastspot Moments","display":"background","autoplay":true,"playerVars":{}}' data-target=''>
                                    <a class="lazy_video_toggle_btn js-play-btn" href="https://vimeo.com/258133523" aria-label="Play Fastspot Moments">

                                        <svg class="icon icon_video_play">
                                            <use href="/images/icons.svg#video_play" />
                                        </svg>

                                    </a>
                                    <div class="lazy_video_iframe_wrap">
                                        <div class="lazy_video_iframe_target js-iframe-target"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="hero_carousel_content">
                                <div class="hero_carousel_content_inner">
                                    <h1 class="hero_carousel_title" id="page_title">
                                        The transformative power of the arts. For all of Flint.
                                    </h1>

                                    <div class="hero_carousel_cta">

                                        <a href="#" class="cta_link">
                                            <span class="cta_link_inner">
                                                <span class="cta_link_label">Explore Programs</span>
                                                <span class="cta_link_icon" aria-hidden="true">

                                                    <svg class="icon icon_chevron_right">
                                                        <use href="/images/icons.svg#chevron_right" />
                                                    </svg>

                                                </span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <button class="js-hero-carousel-video-toggle  js-swap hero_carousel_video_toggle button_toggle" data-swap-target="#hero-carousel-item-1">
                                <span class="hero_carousel_video_toggle_inner_default hero_carousel_video_toggle_inner button_toggle_inner_default button_toggle_inner">
                                    <span class="hero_carousel_video_toggle_label_default hero_carousel_video_toggle_label button_toggle_label_default button_toggle_label">Play Video</span>
                                    <span class="hero_carousel_video_toggle_icon_default hero_carousel_video_toggle_icon button_toggle_icon_default button_toggle_icon" aria-hidden="true">

                                        <svg class="icon icon_video_play">
                                            <use href="/images/icons.svg#video_play" />
                                        </svg>

                                    </span>
                                </span>
                                <span class="hero_carousel_video_toggle_inner_active hero_carousel_video_toggle_inner button_toggle_inner_active button_toggle_inner">
                                    <span class="hero_carousel_video_toggle_label_active hero_carousel_video_toggle_label button_toggle_label_active button_toggle_label">Pause Video</span>
                                    <span class="hero_carousel_video_toggle_icon_active hero_carousel_video_toggle_icon button_toggle_icon_active button_toggle_icon" aria-hidden="true">

                                        <svg class="icon icon_video_pause">
                                            <use href="/images/icons.svg#video_pause" />
                                        </svg>

                                    </span>
                                </span>
                            </button>
                        </div>
                    </div>

                    <div id="hero-carousel-item-2" class="hero_carousel_item carousel__item embla__slide js-hero-carousel-item" aria-labelledby="hero-carousel-item-2-title" aria-describedby="hero-carousel-item-2-description" data-js-embla-carousel-slide>
                        <div class="hero_carousel_item_inner">
                            <div class="hero_carousel_background">

                                <img class="hero_carousel_image" srcset="https://images.fastspot.com/fim/980x654/2 980w, https://images.fastspot.com/fim/740x494/2 740w, https://images.fastspot.com/fim/500x334/2 500w, https://images.fastspot.com/fim/300x200/2 300w" sizes="(min-width: 980px) 910px, (min-width: 780px) 705px, (min-width: 500px) calc(99.62vw - 57px), (min-width: 400px) calc(-88.75vw + 846px), calc(-181.25vw + 1180px)" src="https://images.fastspot.com/fim/300x200/2" alt="" loading="eager" width="300" height="200">

                            </div>
                            <div class="hero_carousel_content">
                                <div class="hero_carousel_content_inner">
                                    <h2 class="hero_carousel_title" id="hero-carousel-item-2-title">
                                        The transformative power of the arts.
                                    </h2>

                                    <p class="hero_carousel_description" id="hero-carousel-item-2-description">
                                        We bring world-class music, theatre, and dance directly to our community. Experience a performance, learn a new skill, or support our ongoing mission.
                                    </p>

                                    <div class="hero_carousel_cta">

                                        <a href="#" class="cta_link">
                                            <span class="cta_link_inner">
                                                <span class="cta_link_label">Build a Package</span>
                                                <span class="cta_link_icon" aria-hidden="true">

                                                    <svg class="icon icon_chevron_right">
                                                        <use href="/images/icons.svg#chevron_right" />
                                                    </svg>

                                                </span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="hero-carousel-item-3" class="hero_carousel_item carousel__item embla__slide js-hero-carousel-item" aria-labelledby="hero-carousel-item-3-title" aria-describedby="hero-carousel-item-3-description" data-js-embla-carousel-slide>
                        <div class="hero_carousel_item_inner">
                            <div class="hero_carousel_background">

                                <img class="hero_carousel_image" srcset="https://images.fastspot.com/fim/980x654/3 980w, https://images.fastspot.com/fim/740x494/3 740w, https://images.fastspot.com/fim/500x334/3 500w, https://images.fastspot.com/fim/300x200/3 300w" sizes="(min-width: 980px) 910px, (min-width: 780px) 705px, (min-width: 500px) calc(99.62vw - 57px), (min-width: 400px) calc(-88.75vw + 846px), calc(-181.25vw + 1180px)" src="https://images.fastspot.com/fim/300x200/3" alt="" loading="eager" width="300" height="200">

                            </div>
                            <div class="hero_carousel_content">
                                <div class="hero_carousel_content_inner">
                                    <h2 class="hero_carousel_title" id="hero-carousel-item-3-title">
                                        <a class="hero_carousel_event_link" href="#">
                                            Gazillion Bubble Show
                                        </a>
                                    </h2>

                                    <div class="hero_carousel_event_meta">
                                        <p class="hero_carousel_event_program">FIM Presents</p>

                                        <p class="hero_carousel_event_tickets">
                                            <span class="hero_carousel_event_tickets_icon" aria-hidden="true">

                                                <svg class="icon icon_ticket">
                                                    <use href="/images/icons.svg#ticket" />
                                                </svg>

                                            </span>
                                            <span class="hero_carousel_event_tickets_label">
                                                Ticketed
                                            </span>
                                        </p>
                                    </div>

                                    <time datetime="2026-11-04T00:00:00+00:00" class="hero_carousel_event_date">
                                        November 4 &bull; 12:00AM
                                    </time>

                                    <div class="hero_carousel_event_location">
                                        <span class="hero_carousel_event_location_icon" aria-hidden="true">

                                            <svg class="icon icon_location">
                                                <use href="/images/icons.svg#location" />
                                            </svg>

                                        </span>
                                        <span class="hero_carousel_event_location_label">
                                            Whiting Auditorium
                                        </span>
                                    </div>

                                    <p class="hero_carousel_description" id="hero-carousel-item-3-description">
                                        We bring world-class music, theatre, and dance directly to our community. Experience a performance, learn a new skill, or support our ongoing mission.
                                    </p>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="hero-carousel-item-4" class="hero_carousel_item carousel__item embla__slide js-hero-carousel-item" aria-labelledby="hero-carousel-item-4-title" data-js-embla-carousel-slide>
                        <div class="hero_carousel_item_inner">
                            <div class="hero_carousel_background">

                                <img class="hero_carousel_image" srcset="https://images.fastspot.com/fim/980x654/4 980w, https://images.fastspot.com/fim/740x494/4 740w, https://images.fastspot.com/fim/500x334/4 500w, https://images.fastspot.com/fim/300x200/4 300w" sizes="(min-width: 980px) 910px, (min-width: 780px) 705px, (min-width: 500px) calc(99.62vw - 57px), (min-width: 400px) calc(-88.75vw + 846px), calc(-181.25vw + 1180px)" src="https://images.fastspot.com/fim/300x200/4" alt="" loading="eager" width="300" height="200">

                            </div>
                            <div class="hero_carousel_content">
                                <div class="hero_carousel_content_inner">
                                    <h2 class="hero_carousel_title" id="hero-carousel-item-4-title">
                                        Et cupidatat sint labore ut in ex aliquip.
                                    </h2>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="carousel__controls">
                <div class="fs-row">
                    <div class="fs-cell">
                        <div class="carousel__controls-inner">
                            <div class="embla__dots carousel__pagination" data-js-embla-carousel-pagination>
                            </div>
                            <div class="carousel__buttons">
                                <button type="button" class="carousel__button carousel__button--prev" data-js-embla-carousel-arrow-prev>
                                    <span class="carousel__button-inner">
                                        <span class="carousel__button-label">
                                            Previous Slide
                                        </span>
                                        <span class="carousel__button-icon" aria-hidden="true">

                                            <svg class="icon icon_chevron_left">
                                                <use href="/images/icons.svg#chevron_left" />
                                            </svg>

                                        </span>
                                    </span>
                                </button>
                                <button type="button" class="carousel__button carousel__button--next" data-js-embla-carousel-arrow-next>
                                    <span class="carousel__button-inner">
                                        <span class="carousel__button-label">
                                            Next Slide
                                        </span>
                                        <span class="carousel__button-icon" aria-hidden="true">

                                            <svg class="icon icon_chevron_right">
                                                <use href="/images/icons.svg#chevron_right" />
                                            </svg>

                                        </span>
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{% set carousel_options = {
	align: 'center',
	loop: true,
	inViewActiveOnly: true,
	focus: false,
} %}

<div class="hero_carousel js-hero-carousel">
	<div class="hero_carousel_inner">
		<div class="hero_carousel_embla carousel embla" data-js-embla-carousel='{{ carousel_options|json_encode }}'>
			<div class="embla__viewport" data-js-embla-carousel-viewport>
				<div class="hero_carousel_items embla__container">
					{% set h1_used = false %}
					{% for slide in slides %}
						{% set id = uniqid('hero-carousel-item') %}
						{% set heading = not h1_used and slide.title ? 'h1' : 'h2' %}
						{% set title_id = heading == 'h1' ? 'page_title' : id ~ '-title' %}
						{% if heading == 'h1' %}
							{% set h1_used = true %}
						{% endif %}

						<div
							id="{{ id }}"
							class="hero_carousel_item carousel__item embla__slide js-hero-carousel-item"
							{% if slide.title %}
								aria-labelledby="{{ title_id }}"
							{% endif %}
							{% if slide.description %}
								aria-describedby="{{ id }}-description"
							{% endif %}
							data-js-embla-carousel-slide
						>
							<div class="hero_carousel_item_inner">
								<div class="hero_carousel_background">
									{% include "@partial-image" with {
										class: 'hero_carousel',
										image: slide.image,
										alt: '',
										sources: [
											img.classic.med,
											img.classic.sml,
											img.classic.xsml,
											img.classic.xxsml
										],
										loading: 'eager',
										sizes: [
											'(min-width: 980px) 910px',
											'(min-width: 780px) 705px',
											'(min-width: 500px) calc(99.62vw - 57px)',
											'(min-width: 400px) calc(-88.75vw + 846px)',
											'calc(-181.25vw + 1180px)',
										]
									} %}

									{% if slide.video %}
										{% include "@partial-lazy-video" with {
											class: 'hero_carousel',
											id: slide.video.id,
											type: slide.video.type,
											title: slide.video.title,
											display: "background",
											autoplay: true,
											playerVars: {}
										} %}

									{% endif %}
								</div>
								<div class="hero_carousel_content">
									<div class="hero_carousel_content_inner">
										{% if slide.title %}
											<{{ heading }} class="hero_carousel_title" id="{{ title_id }}">
												{% if slide.type == 'event' and slide.link %}
													<a class="hero_carousel_event_link" href="{{ slide.link }}">
												{% endif %}
													{{ slide.title }}
												{% if slide.type == 'event' and slide.link %}
													</a>
												{% endif %}
											</{{ heading }}>
										{% endif %}

										{% if slide.type == 'event' %}
											{% if slide.program or slide.tickets %}
												<div class="hero_carousel_event_meta">
													{% if slide.program %}
														<p class="hero_carousel_event_program">{{ slide.program }}</p>
													{% endif %}

													{% if slide.tickets %}
														<p class="hero_carousel_event_tickets">
															<span class="hero_carousel_event_tickets_icon" aria-hidden="true">
																{{ icon('ticket') }}
															</span>
															<span class="hero_carousel_event_tickets_label">
																Ticketed
															</span>
														</p>
													{% endif %}
												</div>
											{% endif %}

											{% if slide.date %}
												<time datetime="{{ slide.date|date('c') }}" class="hero_carousel_event_date">
													{{ slide.date|date('F j') }} &bull; {{ slide.date|date('g:iA') }}
												</time>
											{% endif %}

											{% if slide.location %}
												<div class="hero_carousel_event_location">
													<span class="hero_carousel_event_location_icon" aria-hidden="true">
														{{ icon('location') }}
													</span>
													<span class="hero_carousel_event_location_label">
														{{ slide.location }}
													</span>
												</div>
											{% endif %}
										{% endif %}


										{% if slide.description %}
											<p class="hero_carousel_description" id="{{ id }}-description">
												{{ slide.description }}
											</p>
										{% endif %}

										{% if slide.cta and slide.type != 'event' %}
											<div class="hero_carousel_cta">
												{% include '@partial-link' with {
													class: 'cta',
													title: slide.cta.title,
													url: slide.cta.url,
													target: slide.cta.target,
													icon: 'chevron_right',
												} %}
											</div>
										{% endif %}
									</div>
								</div>
								{% if slide.video %}
									{% include '@partial-button-toggle' with {
										class: 'hero_carousel_video',
										title: 'Play Video',
										icon: 'video_play',
										active_title: 'Pause Video',
										active_icon: 'video_pause',
										swap_target: '#' ~ id,
									} %}
								{% endif %}
							</div>
						</div>
					{% endfor %}
				</div>
			</div>

			<div class="carousel__controls">
				<div class="fs-row">
					<div class="fs-cell">
						<div class="carousel__controls-inner">
							<div
								class="embla__dots carousel__pagination"
								data-js-embla-carousel-pagination
							>
							</div>
							<div class="carousel__buttons">
								<button
									type="button"
									class="carousel__button carousel__button--prev"
									data-js-embla-carousel-arrow-prev
								>
									<span class="carousel__button-inner">
										<span class="carousel__button-label">
											Previous Slide
										</span>
										<span class="carousel__button-icon" aria-hidden="true">
											{{ icon('chevron_left') }}
										</span>
									</span>
								</button>
								<button
									type="button"
									class="carousel__button carousel__button--next"
									data-js-embla-carousel-arrow-next
								>
									<span class="carousel__button-inner">
										<span class="carousel__button-label">
											Next Slide
										</span>
										<span class="carousel__button-icon" aria-hidden="true">
											{{ icon('chevron_right') }}
										</span>
									</span>
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.