components-carousel - EAC design system

Carousel

Documentation about carousel

Carousel expanded

Custom slide with custom html start here

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Action

<div class="caroussel caroussel--expanded" data-setting-autoplay="true" data-setting-navigation="true">
	

	<div class="caroussel__swiper swiper">
		<div class="swiper-wrapper">
			
							
				<div class="swiper-slide">
					<figure>
						<img src="https://picsum.photos/1200/675?grayscale0" alt="Alternative text" />
					</figure>

									</div>
							
				<div class="swiper-slide">
					<figure>
						<img src="https://picsum.photos/1200/675?grayscale1" alt="Alternative text" />
					</figure>

									</div>
							
				<div class="swiper-slide">
					<figure>
						<img src="https://picsum.photos/1200/675?grayscale2" alt="Alternative text" />
					</figure>

									</div>
							
				<div class="swiper-slide">
					<figure>
						<img src="https://picsum.photos/1200/675?grayscale3" alt="Alternative text" />
					</figure>

									</div>
							
				<div class="swiper-slide">
					<figure>
						<img src="https://picsum.photos/1200/675?grayscale4" alt="Alternative text" />
					</figure>

									</div>
												<div class="swiper-slide bckg">
						<div class="pad max-h">
							<h2 class="h3">Custom slide with custom html start here</h2>
							<p class="b-sp--xs">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
								<a href="/" target="_self" class="btn btn--primary btn--small">
	<span class="btn__content">
				<span class="btn__label">Action</span>
					<div class="svg-icon svg-icon-arrow-right">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right" clip-path="url(#clip0_3_2140)"><path id="Vector" d="M0.75 12H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12.75 22.5L23.25 12L12.75 1.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2140"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
			</div>
			</span>
		</a>
							</div>
					</div>
							</div>
	</div>

			<div class="toolbar caroussel-navigation">
				<button type="button" class="btn btn--secondary btn--icon btn--standard btn-prev">
	<span class="btn__content">
				<span class="u-sr-accessible"></span>
					<div class="svg-icon svg-icon-arrow-left-1">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-left-1"><path id="Vector" d="M16.2501 23.25L5.53006 12.53C5.46039 12.4604 5.40513 12.3778 5.36742 12.2869C5.32971 12.1959 5.3103 12.0984 5.3103 12C5.3103 11.9016 5.32971 11.8041 5.36742 11.7131C5.40513 11.6222 5.46039 11.5396 5.53006 11.47L16.2501 0.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
			</div>
			</span>
		</button>
	
			<div class="pagination pagination--secondary">
		<span id="pagination-current" class="pagination__page">1</span>&nbsp;
		<span class="pagination__separator">&#8212;</span>&nbsp;
		<span id="pagination-total" class="pagination__page">6</span>
	</div>
				<button type="button" class="btn btn--secondary btn--icon btn--standard btn-next">
	<span class="btn__content">
				<span class="u-sr-accessible"></span>
					<div class="svg-icon svg-icon-arrow-right-1">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right-1"><path id="Vector" d="M5.5 0.75L16.22 11.47C16.2897 11.5396 16.3449 11.6222 16.3826 11.7131C16.4203 11.8041 16.4398 11.9016 16.4398 12C16.4398 12.0984 16.4203 12.1959 16.3826 12.2869C16.3449 12.3778 16.2897 12.4604 16.22 12.53L5.5 23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
			</div>
			</span>
		</button>
			</div>
	</div>

Carousel with thumbnails

Thumbnails acts as navigation.

Les Deals du moment

-15, -30 et -50% sur toute une sélection d'articles. Profitez en!

Voir les produits

Les sorties de 2025

Découvrez les sorties en smarthpones pour 2025

Voir les produits

La TV Samsung

Livraison offerte pour toutes les TV Samsung de dernières génération.

Voir le produit

<div class="caroussel caroussel--thumbnails" data-setting-autoplay="true" data-setting-navigation="true">
			<div class="caroussel-thumbnails  grid-col-4">
			<div class="caroussel-thumbnails__item active">
				<h2 class="h3 text-bold">Les Deals du moment</h2>

				<p class="p">-15, -30 et -50% sur toute une sélection d'articles. Profitez en!</p>

					<a href="/" target="_self" class="btn btn--primary btn--small">
	<span class="btn__content">
					<div class="svg-icon svg-icon-arrow-right">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right" clip-path="url(#clip0_3_2140)"><path id="Vector" d="M0.75 12H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12.75 22.5L23.25 12L12.75 1.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2140"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
			</div>
				<span class="btn__label">Voir les produits</span>
			</span>
		</a>
				</div>

			<div class="caroussel-thumbnails__item">
				<h2 class="h3 text-bold">Les sorties de 2025</h2>

				<p class="p">Découvrez les sorties en smarthpones pour 2025</p>

					<a href="/" target="_self" class="btn btn--primary btn--small">
	<span class="btn__content">
					<div class="svg-icon svg-icon-arrow-right">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right" clip-path="url(#clip0_3_2140)"><path id="Vector" d="M0.75 12H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12.75 22.5L23.25 12L12.75 1.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2140"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
			</div>
				<span class="btn__label">Voir les produits</span>
			</span>
		</a>
				</div>

			<div class="caroussel-thumbnails__item">
				<h2 class="h3 text-bold">La TV Samsung</h2>

				<p class="p">Livraison offerte pour toutes les TV Samsung de dernières génération.</p>

					<a href="/" target="_self" class="btn btn--primary btn--small">
	<span class="btn__content">
					<div class="svg-icon svg-icon-arrow-right">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right" clip-path="url(#clip0_3_2140)"><path id="Vector" d="M0.75 12H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12.75 22.5L23.25 12L12.75 1.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2140"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
			</div>
				<span class="btn__label">Voir le produit</span>
			</span>
		</a>
				</div>
		</div>
	

	<div class="caroussel__swiper swiper grid-col-8">
		<div class="swiper-wrapper">
			
							
				<div class="swiper-slide">
					<figure>
						<img src="https://picsum.photos/1200/675?grayscale0" alt="Alternative text" />
					</figure>

									</div>
							
				<div class="swiper-slide">
					<figure>
						<img src="https://picsum.photos/1200/675?grayscale1" alt="Alternative text" />
					</figure>

									</div>
							
				<div class="swiper-slide">
					<figure>
						<img src="https://picsum.photos/1200/675?grayscale2" alt="Alternative text" />
					</figure>

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

			<div class="toolbar caroussel-navigation">
				<button type="button" class="btn btn--secondary btn--icon btn--standard btn-prev">
	<span class="btn__content">
				<span class="u-sr-accessible"></span>
					<div class="svg-icon svg-icon-arrow-left-1">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-left-1"><path id="Vector" d="M16.2501 23.25L5.53006 12.53C5.46039 12.4604 5.40513 12.3778 5.36742 12.2869C5.32971 12.1959 5.3103 12.0984 5.3103 12C5.3103 11.9016 5.32971 11.8041 5.36742 11.7131C5.40513 11.6222 5.46039 11.5396 5.53006 11.47L16.2501 0.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
			</div>
			</span>
		</button>
	
			<div class="pagination pagination--secondary">
		<span id="pagination-current" class="pagination__page">1</span>&nbsp;
		<span class="pagination__separator">&#8212;</span>&nbsp;
		<span id="pagination-total" class="pagination__page">3</span>
	</div>
				<button type="button" class="btn btn--secondary btn--icon btn--standard btn-next">
	<span class="btn__content">
				<span class="u-sr-accessible"></span>
					<div class="svg-icon svg-icon-arrow-right-1">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right-1"><path id="Vector" d="M5.5 0.75L16.22 11.47C16.2897 11.5396 16.3449 11.6222 16.3826 11.7131C16.4203 11.8041 16.4398 11.9016 16.4398 12C16.4398 12.0984 16.4203 12.1959 16.3826 12.2869C16.3449 12.3778 16.2897 12.4604 16.22 12.53L5.5 23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
			</div>
			</span>
		</button>
			</div>
	</div>

Carousel condensed

<div class="caroussel caroussel--condensed" data-setting-autoplay="true" data-setting-navigation="true">
	

	<div class="caroussel__swiper swiper">
		<div class="swiper-wrapper">
			
							
				<div class="swiper-slide">
					<figure>
						<img src="https://picsum.photos/1200/675?grayscale0" alt="Alternative text" />
					</figure>

												<button type="button" class="btn btn--secondary btn--standard slide-action">
	<span class="btn__content">
				<span class="btn__label">Débimètre VW/Audi/Seat/Skoda 1.4/1.9/2.0 TDI 0</span>
			</span>
								<div class="price">
	<span class="price__currency">€</span><span class="price__amount">20,00</span>
</div>				</button>
										</div>
							
				<div class="swiper-slide">
					<figure>
						<img src="https://picsum.photos/1200/675?grayscale1" alt="Alternative text" />
					</figure>

												<button type="button" class="btn btn--secondary btn--standard slide-action">
	<span class="btn__content">
				<span class="btn__label">Débimètre VW/Audi/Seat/Skoda 1.4/1.9/2.0 TDI 1</span>
			</span>
								<div class="price">
	<span class="price__currency">€</span><span class="price__amount">20,00</span>
</div>				</button>
										</div>
							
				<div class="swiper-slide">
					<figure>
						<img src="https://picsum.photos/1200/675?grayscale2" alt="Alternative text" />
					</figure>

												<button type="button" class="btn btn--secondary btn--standard slide-action">
	<span class="btn__content">
				<span class="btn__label">Débimètre VW/Audi/Seat/Skoda 1.4/1.9/2.0 TDI 2</span>
			</span>
								<div class="price">
	<span class="price__currency">€</span><span class="price__amount">20,00</span>
</div>				</button>
										</div>
							
				<div class="swiper-slide">
					<figure>
						<img src="https://picsum.photos/1200/675?grayscale3" alt="Alternative text" />
					</figure>

												<button type="button" class="btn btn--secondary btn--standard slide-action">
	<span class="btn__content">
				<span class="btn__label">Débimètre VW/Audi/Seat/Skoda 1.4/1.9/2.0 TDI 3</span>
			</span>
								<div class="price">
	<span class="price__currency">€</span><span class="price__amount">20,00</span>
</div>				</button>
										</div>
					</div>
	</div>

			<div class="toolbar caroussel-navigation">
				<button type="button" class="btn btn--secondary btn--icon btn--standard btn-prev">
	<span class="btn__content">
				<span class="u-sr-accessible"></span>
					<div class="svg-icon svg-icon-arrow-left-1">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-left-1"><path id="Vector" d="M16.2501 23.25L5.53006 12.53C5.46039 12.4604 5.40513 12.3778 5.36742 12.2869C5.32971 12.1959 5.3103 12.0984 5.3103 12C5.3103 11.9016 5.32971 11.8041 5.36742 11.7131C5.40513 11.6222 5.46039 11.5396 5.53006 11.47L16.2501 0.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
			</div>
			</span>
		</button>
	
			<div class="pagination pagination--secondary">
		<span id="pagination-current" class="pagination__page">1</span>&nbsp;
		<span class="pagination__separator">&#8212;</span>&nbsp;
		<span id="pagination-total" class="pagination__page">4</span>
	</div>
				<button type="button" class="btn btn--secondary btn--icon btn--standard btn-next">
	<span class="btn__content">
				<span class="u-sr-accessible"></span>
					<div class="svg-icon svg-icon-arrow-right-1">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right-1"><path id="Vector" d="M5.5 0.75L16.22 11.47C16.2897 11.5396 16.3449 11.6222 16.3826 11.7131C16.4203 11.8041 16.4398 11.9016 16.4398 12C16.4398 12.0984 16.4203 12.1959 16.3826 12.2869C16.3449 12.3778 16.2897 12.4604 16.22 12.53L5.5 23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
			</div>
			</span>
		</button>
			</div>
	</div>

List of arguments for carousel

Argument	Type	Description	Possible Values
type	array	Specifies the type of carousel. E.g., with thumbnails, condensed. or expanded	thumbnails, condensed, expanded
label	boolean	Whether to display a label inside the slides.	false / true
slidesnumber	number	The number of slides in the carousel.	3
navigation	boolean	Whether to show navigation arrows.	false / true

Design System