Framework Component Library

Carousel: Default 

<div class="carousel card-group" id="carousel-2">
    <div class="card-group__header">
        <div class="fw-container">
            <h2 class="card-group__title" id="carousel-2__title">Card Carousel</h2>
            <div class="card-group__description" id="carousel-2__description">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
            </div>
        </div>
    </div>
    <section class="swiper carousel__swiper" data-js-carousel='{"spaceBetween":"--fw-column-gap-px","slidesOffsetBefore":"--fw-container-gutter-px","slidesOffsetAfter":"--fw-container-gutter-px"}' aria-labelledby="carousel-2__title" aria-describedby="carousel-2__description">
        <div class="swiper-wrapper">

            <div class="swiper-slide carousel__item" id="carousel-2__item-1" data-js-carousel-item aria-labelledby="carousel-2__item-1-title" aria-describedby="carousel-2__item-1-description">
                <div class="card-group__item">
                    <figure class="card-group__item-figure">

                        <img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="lazy" width="300" height="200">
                    </figure>
                    <div class="card-group__item-body">
                        <h3 class="card-group__item-title" id="carousel-2__item-1-title">Card One</h3>
                        <div class="card-group__item-description" id="carousel-2__item-1-description">
                            <p>Aenean lacinia bibendum nulla sed consectetur.</p>
                        </div>
                    </div>
                    <div class="card-group__item-links">

                        <a class="button-text--large
 				" href="#">
                            <span class="button-text--large__inner"> <span class="button-text--large__label">Bibendum</span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="swiper-slide carousel__item" id="carousel-2__item-2" data-js-carousel-item aria-labelledby="carousel-2__item-2-title" aria-describedby="carousel-2__item-2-description">
                <div class="card-group__item">
                    <figure class="card-group__item-figure">

                        <img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/2 740w, https://images.fastspot.com/framework/500x334/2 500w, https://images.fastspot.com/framework/300x200/2 300w" src="https://images.fastspot.com/framework/300x200/2" alt="" loading="lazy" width="300" height="200">
                    </figure>
                    <div class="card-group__item-body">
                        <h3 class="card-group__item-title" id="carousel-2__item-2-title">Card Two</h3>
                        <div class="card-group__item-description" id="carousel-2__item-2-description">
                            <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
                        </div>
                    </div>
                    <div class="card-group__item-links">

                        <a class="button-text--large
 				" href="#">
                            <span class="button-text--large__inner"> <span class="button-text--large__label">Fringilla</span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="swiper-slide carousel__item" id="carousel-2__item-3" data-js-carousel-item aria-labelledby="carousel-2__item-3-title" aria-describedby="carousel-2__item-3-description">
                <div class="card-group__item">
                    <figure class="card-group__item-figure">

                        <img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/3 740w, https://images.fastspot.com/framework/500x334/3 500w, https://images.fastspot.com/framework/300x200/3 300w" src="https://images.fastspot.com/framework/300x200/3" alt="" loading="lazy" width="300" height="200">
                    </figure>
                    <div class="card-group__item-body">
                        <h3 class="card-group__item-title" id="carousel-2__item-3-title">Card Three</h3>
                        <div class="card-group__item-description" id="carousel-2__item-3-description">
                            <p>Cras mattis consectetur purus sit amet fermentum.</p>
                        </div>
                    </div>
                    <div class="card-group__item-links">

                        <a class="button-text--large
 				" href="#">
                            <span class="button-text--large__inner"> <span class="button-text--large__label">Mattis Consectetur</span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="swiper-slide carousel__item" id="carousel-2__item-4" data-js-carousel-item aria-labelledby="carousel-2__item-4-title" aria-describedby="carousel-2__item-4-description">
                <div class="card-group__item">
                    <figure class="card-group__item-figure">

                        <img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/4 740w, https://images.fastspot.com/framework/500x334/4 500w, https://images.fastspot.com/framework/300x200/4 300w" src="https://images.fastspot.com/framework/300x200/4" alt="" loading="lazy" width="300" height="200">
                    </figure>
                    <div class="card-group__item-body">
                        <h3 class="card-group__item-title" id="carousel-2__item-4-title">Card Four</h3>
                        <div class="card-group__item-description" id="carousel-2__item-4-description">
                            <p>Vestibulum id ligula porta felis euismod semper.</p>
                        </div>
                    </div>
                    <div class="card-group__item-links">

                        <a class="button-text--large
 				" href="#">
                            <span class="button-text--large__inner"> <span class="button-text--large__label">Porta Felis</span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="swiper-slide carousel__item" id="carousel-2__item-5" data-js-carousel-item aria-labelledby="carousel-2__item-5-title" aria-describedby="carousel-2__item-5-description">
                <div class="card-group__item">
                    <figure class="card-group__item-figure">

                        <img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="lazy" width="300" height="200">
                    </figure>
                    <div class="card-group__item-body">
                        <h3 class="card-group__item-title" id="carousel-2__item-5-title">Card Five</h3>
                        <div class="card-group__item-description" id="carousel-2__item-5-description">
                            <p>Maecenas sed diam eget risus varius blandit sit amet.</p>
                        </div>
                    </div>
                    <div class="card-group__item-links">

                        <a class="button-text--large
 				" href="#">
                            <span class="button-text--large__inner"> <span class="button-text--large__label">Varius Blandit</span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="swiper-slide carousel__item" id="carousel-2__item-6" data-js-carousel-item aria-labelledby="carousel-2__item-6-title" aria-describedby="carousel-2__item-6-description">
                <div class="card-group__item">
                    <figure class="card-group__item-figure">

                        <img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/2 740w, https://images.fastspot.com/framework/500x334/2 500w, https://images.fastspot.com/framework/300x200/2 300w" src="https://images.fastspot.com/framework/300x200/2" alt="" loading="lazy" width="300" height="200">
                    </figure>
                    <div class="card-group__item-body">
                        <h3 class="card-group__item-title" id="carousel-2__item-6-title">Card Six</h3>
                        <div class="card-group__item-description" id="carousel-2__item-6-description">
                            <p>Praesent commodo cursus magna vel scelerisque nisl.</p>
                        </div>
                    </div>
                    <div class="card-group__item-links">

                        <a class="button-text--large
 				" href="#">
                            <span class="button-text--large__inner"> <span class="button-text--large__label">Scelerisque Nisl</span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="swiper-controls carousel__controls">
            <div class="fw-container">
                <div class="carousel__controls-inner">
                    <div class="swiper-buttons carousel__buttons">

                        <button class="swiper-button
 		 			swiper-button--prev
 				carousel__button swiper-button-prev" data-js-carousel-arrow-prev="">
                            <span class="swiper-button__inner"> <span class="swiper-button__label">Previous Slide</span>
                                <span class="swiper-button__icon" aria-hidden="true"><svg class="icon icon--arrow-left">
                                        <use href="/images/icons.svg?1.0.0#arrow-left" />
                                    </svg></span>
                            </span>
                        </button>

                        <button class="swiper-button
 		 			swiper-button--next
 				carousel__button swiper-button-next" data-js-carousel-arrow-next="">
                            <span class="swiper-button__inner"> <span class="swiper-button__label">Next Slide</span>
                                <span class="swiper-button__icon" aria-hidden="true"><svg class="icon icon--arrow-right">
                                        <use href="/images/icons.svg?1.0.0#arrow-right" />
                                    </svg></span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
 
{% set id = uniqid('carousel') %}

<div class="carousel card-group{% for modifier in modifiers|default([]) %} carousel--{{ modifier }}{% endfor %}" id="{{ id }}">
	<div class="card-group__header">
		<div class="fw-container">
			<h2 class="card-group__title" id="{{ id ~ '__title' }}">
				{{- group_title -}}
			</h2>
			<div class="card-group__description" id="{{ id ~ '__description' }}">
				<p>{{ group_description }}</p>
			</div>
		</div>
	</div>
	<section
		class="swiper carousel__swiper"
		data-js-carousel='{{ carousel_config|json_encode }}'
		aria-labelledby="{{ id ~ '__title' }}"
		aria-describedby="{{ id ~ '__description' }}"
	>
		<div class="swiper-wrapper">
			{% for item in items %}
				{% set item_id = id ~ '__item-' ~ loop.index %}

				<div
					class="swiper-slide carousel__item{{ item.video is defined ? ' carousel__item--video' : '' }}"
					id="{{ item_id }}"
					data-js-carousel-item
					aria-labelledby="{{ item_id ~ '-title' }}"
					aria-describedby="{{ item_id ~ '-description' }}"
				>
					<div class="card-group__item">
						{% if item.image %}
							<figure class="card-group__item-figure">
								{% include '@partial-image' with {
									class: 'card-group__item-image',
									alt: item.alt|default(''),
									image: item.image,
									loading: 'lazy',
									crop: 'classic',
									max: 'sml'
								} only %}
							</figure>
						{% endif %}
						<div class="card-group__item-body">
							<h3 class="card-group__item-title" id="{{ item_id ~ '-title' }}">{{ item.title }}</h3>
							<div class="card-group__item-description" id="{{ item_id ~ '-description' }}">
								<p>{{ item.description }}</p>
							</div>
						</div>
						{% if item.link is defined %}
							<div class="card-group__item-links">
								{% include '@partial-link' with {
									classes: {
										base: 'button-text--large'
									},
									title: item.link.title,
									url: item.link.url,
									icon: null
								} only %}
							</div>
						{% endif %}
					</div>
				</div>
			{% endfor %}
		</div>

		<div class="swiper-controls carousel__controls">
			<div class="fw-container">
				<div class="carousel__controls-inner">
					{% if controls.pagination == true %}
						<div class="swiper-pagination carousel__progress">
						</div>
					{% endif %}
					{% if controls.buttons == true %}
						<div class="swiper-buttons carousel__buttons">
							{% include '@partial-button' with {
								classes: {
									base: 'swiper-button',
									modifiers: ['prev'],
									utility: 'carousel__button swiper-button-prev'
								},
								attributes: {
									'data-js-carousel-arrow-prev': ''
								},
								title: 'Previous Slide',
								icon: 'arrow-left'
							} only %}
							{% include '@partial-button' with {
								classes: {
									base: 'swiper-button',
									modifiers: ['next'],
									utility: 'carousel__button swiper-button-next'
								},
								attributes: {
									'data-js-carousel-arrow-next': ''
								},
								title: 'Next Slide',
								icon: 'arrow-right'
							} only %}
						</div>
					{% endif %}
				</div>
			</div>
		</div>
	</section>
</div>

No notes defined.