Flint Institute of Music Component Library

Ticker 

<div class="ticker">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="ticker_inner">
                <h2 id="ticker-1-title" class="ticker_title">The Latest</h2>
                <section class="ticker_carousel carousel carousel--overflow embla" data-js-embla-carousel='{"focus":false}' aria-labelledby="ticker-1-title">
                    <div class="embla__viewport" data-js-embla-carousel-viewport>
                        <div class="ticker_items embla__container">
                            <div id="ticker-1-item-1" class="ticker_item embla__slide carousel__item" data-js-embla-carousel-slide>
                                <div class="ticker_item_inner">
                                    <figure class="ticker_item_figure">

                                        <img class="ticker_item_image" srcset="https://images.fastspot.com/fim/300x300/1 300w, https://images.fastspot.com/fim/100x100/1 100w" sizes="(min-width: 1680px) 80px, (min-width: 800px) calc(1.51vw + 55px), calc(1.25vw + 56px)" src="https://images.fastspot.com/fim/100x100/1" alt="" loading="lazy" width="100" height="100">
                                    </figure>
                                    <div class="ticker_item_text">
                                        <p><a href="#">Millage funding</a> brings free music to county parks, interactive workshops and pop-up concerts across the county.</p>
                                    </div>
                                </div>
                            </div>
                            <div id="ticker-1-item-2" class="ticker_item embla__slide carousel__item" data-js-embla-carousel-slide>
                                <div class="ticker_item_inner">
                                    <figure class="ticker_item_figure">

                                        <img class="ticker_item_image" srcset="https://images.fastspot.com/fim/300x300/2 300w, https://images.fastspot.com/fim/100x100/2 100w" sizes="(min-width: 1680px) 80px, (min-width: 800px) calc(1.51vw + 55px), calc(1.25vw + 56px)" src="https://images.fastspot.com/fim/100x100/2" alt="" loading="lazy" width="100" height="100">
                                    </figure>
                                    <div class="ticker_item_text">
                                        <p>Youth Orchestra prepares for annual autumn gala. Tickets are moving fast for the <a href="#">FSPA showcase.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div id="ticker-1-item-3" class="ticker_item embla__slide carousel__item" data-js-embla-carousel-slide>
                                <div class="ticker_item_inner">
                                    <figure class="ticker_item_figure">

                                        <img class="ticker_item_image" srcset="https://images.fastspot.com/fim/300x300/3 300w, https://images.fastspot.com/fim/100x100/3 100w" sizes="(min-width: 1680px) 80px, (min-width: 800px) calc(1.51vw + 55px), calc(1.25vw + 56px)" src="https://images.fastspot.com/fim/100x100/3" alt="" loading="lazy" width="100" height="100">
                                    </figure>
                                    <div class="ticker_item_text">
                                        <p><a href="#">New partnerships</a> expand outreach programs. Reaching more students and families this season.</p>
                                    </div>
                                </div>
                            </div>
                            <div id="ticker-1-item-4" class="ticker_item embla__slide carousel__item" data-js-embla-carousel-slide>
                                <div class="ticker_item_inner">
                                    <figure class="ticker_item_figure">

                                        <img class="ticker_item_image" srcset="https://images.fastspot.com/fim/300x300/4 300w, https://images.fastspot.com/fim/100x100/4 100w" sizes="(min-width: 1680px) 80px, (min-width: 800px) calc(1.51vw + 55px), calc(1.25vw + 56px)" src="https://images.fastspot.com/fim/100x100/4" alt="" loading="lazy" width="100" height="100">
                                    </figure>
                                    <div class="ticker_item_text">
                                        <p>Cast announced for upcoming production. <a href="#">Meet the artists bringing the story to life.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div id="ticker-1-item-5" class="ticker_item embla__slide carousel__item" data-js-embla-carousel-slide>
                                <div class="ticker_item_inner">
                                    <figure class="ticker_item_figure">

                                        <img class="ticker_item_image" srcset="https://images.fastspot.com/fim/300x300/5 300w, https://images.fastspot.com/fim/100x100/5 100w" sizes="(min-width: 1680px) 80px, (min-width: 800px) calc(1.51vw + 55px), calc(1.25vw + 56px)" src="https://images.fastspot.com/fim/100x100/5" alt="" loading="lazy" width="100" height="100">
                                    </figure>
                                    <div class="ticker_item_text">
                                        <p><a href="#">Millage funding</a> brings free music to county parks, interactive workshops and pop-up concerts across the county.</p>
                                    </div>
                                </div>
                            </div>
                            <div id="ticker-1-item-6" class="ticker_item embla__slide carousel__item" data-js-embla-carousel-slide>
                                <div class="ticker_item_inner">
                                    <figure class="ticker_item_figure">

                                        <img class="ticker_item_image" srcset="https://images.fastspot.com/fim/300x300/6 300w, https://images.fastspot.com/fim/100x100/6 100w" sizes="(min-width: 1680px) 80px, (min-width: 800px) calc(1.51vw + 55px), calc(1.25vw + 56px)" src="https://images.fastspot.com/fim/100x100/6" alt="" loading="lazy" width="100" height="100">
                                    </figure>
                                    <div class="ticker_item_text">
                                        <p>Youth Orchestra prepares for annual autumn gala. Tickets are moving fast for the <a href="#">FSPA showcase.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div id="ticker-1-item-7" class="ticker_item embla__slide carousel__item" data-js-embla-carousel-slide>
                                <div class="ticker_item_inner">
                                    <figure class="ticker_item_figure">

                                        <img class="ticker_item_image" srcset="https://images.fastspot.com/fim/300x300/7 300w, https://images.fastspot.com/fim/100x100/7 100w" sizes="(min-width: 1680px) 80px, (min-width: 800px) calc(1.51vw + 55px), calc(1.25vw + 56px)" src="https://images.fastspot.com/fim/100x100/7" alt="" loading="lazy" width="100" height="100">
                                    </figure>
                                    <div class="ticker_item_text">
                                        <p><a href="#">New partnerships</a> expand outreach programs. Reaching more students and families this season.</p>
                                    </div>
                                </div>
                            </div>
                            <div id="ticker-1-item-8" class="ticker_item embla__slide carousel__item" data-js-embla-carousel-slide>
                                <div class="ticker_item_inner">
                                    <figure class="ticker_item_figure">

                                        <img class="ticker_item_image" srcset="https://images.fastspot.com/fim/300x300/8 300w, https://images.fastspot.com/fim/100x100/8 100w" sizes="(min-width: 1680px) 80px, (min-width: 800px) calc(1.51vw + 55px), calc(1.25vw + 56px)" src="https://images.fastspot.com/fim/100x100/8" alt="" loading="lazy" width="100" height="100">
                                    </figure>
                                    <div class="ticker_item_text">
                                        <p>Cast announced for upcoming production. <a href="#">Meet the artists bringing the story to life.</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="carousel__controls">
                        <div class="carousel__controls-inner">
                            <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>
                </section>
            </div>
        </div>
    </div>
</div>
 
{% set id = uniqid('ticker') %}

{% set carousel_options = {
	focus: false,
} %}

<div class="ticker">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="ticker_inner">
				<h2 id="{{ id }}-title" class="ticker_title">{{ title }}</h2>
				<section class="ticker_carousel carousel carousel--overflow embla" data-js-embla-carousel='{{ carousel_options|json_encode }}' aria-labelledby="{{ id }}-title">
					<div class="embla__viewport" data-js-embla-carousel-viewport>
						<div class="ticker_items embla__container">
							{% for item in items %}
								<div id="{{ id }}-item-{{ loop.index }}" class="ticker_item embla__slide carousel__item" data-js-embla-carousel-slide>
									<div class="ticker_item_inner">
										{% if item.image %}
											<figure class="ticker_item_figure">
												{% include '@partial-image' with {
													class: 'ticker_item',
													image: item.image,
													alt: '',
													sources: [
														img.square.xxsml,
														img.square.thumb,
													],
													loading: 'lazy',
													sizes: [
														'(min-width: 1680px) 80px',
														'(min-width: 800px) calc(1.51vw + 55px)',
														'calc(1.25vw + 56px)',
													]
												} %}
											</figure>
										{% endif %}
										<div class="ticker_item_text">
											{{ item.text|raw }}
										</div>
									</div>
								</div>
							{% endfor %}
						</div>
					</div>

					<div class="carousel__controls">
						<div class="carousel__controls-inner">
							<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>
				</section>
			</div>
		</div>
	</div>
</div>

No notes defined.