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)

  • Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation.
  • Onglet 2: Prenez note : Programme d'amélioration des passages à niveau (PAPN).
  • Onglet 3: Prenez note : Tanker Groupe d'experts sur la sécurité.

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

Carrousel - Style 1 - col-sm-6 col-md-4

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

Carrousel - Style 2 - col-sm-6 col-md-8

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

Trouver un emploi (Transcription)

Développement des compétences (Transcription)

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)

  • Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation.
Date de modification :