Interface à onglets - Carrousel

Éviter les carrousels promotionnels, améliorer le contenu Web

Lire l’article sur le Blogue de Canada.ca pour en apprendre davantage.

But

Comprime plusieurs images et légendes superposées et fourni des controls qui permettent à l'utilisateur de choisi l'image à afficher.

Code

Visualiser le code
<div class="wb-tabs carousel-s1">
	<ul role="tablist">
		<li class="active"><a href="#panel1">Onglet	1: ...</a></li>
		<li><a href="#panel2">Onglet 2: ...</a></li>
		...
	</ul>
	<div class="tabpanels">
		<div role="tabpanel" id="panel1" class="in fade">
			<figure>
				<img src="img/protect-environment.jpg" alt="" />
				<figcaption>
					<p>
						...
					</p>
				</figcaption>
			</figure>
		</div>
		<div role="tabpanel" id="panel2" class="out fade">
			<figure>
				<img src="img/banff.jpg" alt="" />
				<figcaption>
					<p>
						...
					</p>
				</figcaption>
			</figure>
		</div>
		...
	</div>
</div>

Exemple

Visualiser le code
<div class="wb-tabs carousel-s2">
	<ul role="tablist">
		<li class="active"><a href="#panel4">Onglet 1: ...</a></li>
		<li><a href="#panel5">Onglet 2:...</a></li>
		...
	</ul>
	<div class="tabpanels">
		<div role="tabpanel" id="panel4" class="in fade">
			<figure>
				<img src="img/protect-environment.jpg" alt="" />
				<figcaption>
					<p>
						...
					</p>
				</figcaption>
			</figure>
		</div>
		<div role="tabpanel" id="panel5" class="out fade">
			<figure>
				<img src="img/banff.jpg" alt="" />
				<figcaption>
					<p>
						...
					</p>
				</figcaption>
			</figure>
		</div>
		...
	</div>
</div>

Carrousel - Style 1 - Exemple (carousel-s1)

Code

Visualiser le code
<div class="wb-tabs carousel-s2  show-thumbs">
	<ul role="tablist">
		<li class="active"><a href="#panel30"><img src="img/protect-environment.jpg" alt="Onglet 1: ..." /></a></li>
		<li><a href="#panel31"><img src="img/banff.jpg" alt="Onglet 2: ..." /></a></li>
		...
	</ul>
	<div class="tabpanels">
		<div role="tabpanel" id="panel30" class="in fade">
			<figure>
				<img src="img/protect-environment.jpg" alt="" />
				<figcaption>
					<p>
						...
					</p>
				</figcaption>
			</figure>
		</div>
		<div role="tabpanel" id="panel31" class="out fade">
			<figure>
				<img src="img/banff.jpg" alt="" />
				<figcaption>
					<p>
						...
					</p>
				</figcaption>
			</figure>
		</div>
		...
	</div>
</div>

Exemple en grilles

Code

Visualiser le code
<div class="row">
	<section class="col-sm-6 col-md-4">
		<h3>Carrousel - Style 1 - col-sm-6 col-md-4</h3>
		<div class="wb-tabs carousel-s1">
			<ul role="tablist">
				...
			</ul>
			<div class="tabpanels">
				...
			</div>
		</div>
	</section>
	<section class="col-sm-6 col-md-8">
		<h3>Carrousel - Style 2 - col-sm-6 col-md-8</h3>
		<div class="wb-tabs carousel-s2">
			<ul role="tablist">
				...
			</ul>
			<div class="tabpanels">
				...
			</div>
		</div>
	</section>
</div>

Changement de la vitesse de rotation

Attribut « data » - Exemple (data-wb-tabs='{"interval": 3}')

Code

Visualiser le code
<div class="wb-tabs carousel-s2" data-wb-tabs='{"interval": 3}'>

Classes CSS - Exemple (slow, fast)

Code

Visualiser le code
<div class="wb-tabs carousel-s2" data-wb-tabs='{"interval": 3}'>

Exemple avec le lecteur multimédia

Code

Visualiser le code
<div class="row">
	<div class="col-xs-12 col-sm-6">
		<div class="wb-tabs carousel-s2">
			<ul role="tablist">
				<li class="active"><a href="#panel19">Onglet 1</a></li>
				<li><a href="#panel20">Onglet 2</a></li>
			</ul>
			<div class="tabpanels">
				<div role="tabpanel" id="panel19" class="in fade">
					<figure class="wb-mltmd">
						<video poster="../multimedia/demo/video1-fr.jpg" title="Trouver un emploi">
							<source type="video/webm" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-fr.webm" />
							<source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-fr.mp4" />
							<track src="../multimedia/cpts-lg-fr.html" kind="captions" data-type="text/html" srclang="fr" label="Français" />
						</video>
						<figcaption>
							<p>Trouver un emploi (<a href="../multimedia/cpts-lg-fr.html">Transcription</a>)</p>
						</figcaption>
					</figure>
				</div>
				<div role="tabpanel" id="panel20" class="out fade">
					<figure class="wb-mltmd">
						<video poster="../multimedia/demo/video2-fr.jpg" title="Développement des compétences">
							<source type="video/webm" src="https://wet-boew.github.io/wet-boew-attachments/videos/video2-fr.webm" />
							<source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video2-fr.mp4" />
							<track src="../multimedia/demo/video2-captions-fr.xml" kind="captions" data-type="application/ttml+xml" srclang="fr" label="Français" />
						</video>
						<figcaption>
							<p>Développement des compétences (<a href="../multimedia/cpts-lg2-fr.html">Transcription</a>)</p>
						</figcaption>
					</figure>
				</div>
			</div>
		</div>
	</div>
</div>

Transitions CSS

Fondu - Exemple (fade)

Code

Visualiser le code
<div class="wb-tabs carousel-s2">
	<ul role="tablist">
		<li class="active"><a href="#panel21">Onglet 1: ...</a></li>
		<li><a href="#panel22">Onglet 2: ...</a></li>
		...
	</ul>
	<div class="tabpanels">
		<div role="tabpanel" id="panel21" class="in fade">
			...
		</div>
		<div role="tabpanel" id="panel22" class="out fade">
			...
		</div>
		...
	</div>
</div>

Coulisse - Horizontal - Exemple (slide)

Code

Visualiser le code
<div class="wb-tabs carousel-s2">
	<ul role="tablist">
		<li class="active"><a href="#panel24">Onglet 1: ...</a></li>
		<li><a href="#panel25">Onglet 2: ...</a></li>
		...
	</ul>
	<div class="tabpanels">
		<div role="tabpanel" id="panel24" class="slide in">
			...
		</div>
		<div role="tabpanel" id="panel25" class="slide out">
			...
		</div>
		...
	</div>
</div>

Coulisse - Vertical - Exemple (slidevert)

Code

Visualiser le code
<div class="wb-tabs carousel-s2">
	<ul role="tablist">
		<li class="active"><a href="#panel27">Onglet 1: ...</a></li>
		<li><a href="#panel28">Onglet 2: ...</a></li>
		...
	</ul>
	<div class="tabpanels">
		<div role="tabpanel" id="panel27" class="slidevert in">
			...
		</div>
		<div role="tabpanel" id="panel28" class="slidevert out">
			...
		</div>
		...
	</div>
</div>

Carrousel - Style 2 - Une option (pas des légendes superposées et des controls)

Date de modification :