Interface à onglets - Carrousel

Vous cherchez la BOEW v3.1?

À partir du 23 septembre 2014, la version 3.1 de la Boîte à outils de l'expérience Web n'est plus supportée. Le code source et la documentation ont été déplacés vers le dépôt wet-boew-legacy.

But

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

Carrousel - Style 1 - Exemple (`carousel-s1`)

Panneau 1 — Prenez note : Renouvellement du carnet de documents d'aviation
En savoir plus sur le transport aérien au Canada.

Panneau 2 — Prenez note : Programme d'amélioration des passages à niveau (PAPN)
En savoir plus sur le transport ferroviaire au Canada.

Panneau 3 — Prenez note : Tanker Groupe d'experts sur la sécurité
En savoir plus sur le transport maritime au Canada.

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="Panneau 1" />
				<figcaption>
					<p>
						...
					</p>
				</figcaption>
			</figure>
		</div>
		<div role="tabpanel" id="panel2" class="out fade">
			<figure>
				<img src="img/banff.jpg" alt="Panneau 2" />
				<figcaption>
					<p>
						...
					</p>
				</figcaption>
			</figure>
		</div>
		...
	</div>
</div>

Carrousel - Style 2 - Exemple

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="Panneau 1" />
				<figcaption>
					<p>
						...
					</p>
				</figcaption>
			</figure>
		</div>
		<div role="tabpanel" id="panel5" class="out fade">
			<figure>
				<img src="img/banff.jpg" alt="Panneau 2" />
				<figcaption>
					<p>
						...
					</p>
				</figcaption>
			</figure>
		</div>
		...
	</div>
</div>

Exemple en grilles

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

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}'>

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="http://www.servicecanada.gc.ca/fra/video/images/te-lj-fra.jpg" title="Trouver un emploi">
							<source type="video/webm" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-fra.webm" />
							<source type="video/mp4" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-fra.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="http://www.servicecanada.gc.ca/fra/video/te.shtml">Transcription</a>)</p>
						</figcaption>
					</figure>
				</div>
				<div role="tabpanel" id="panel20" class="out fade">
					<figure class="wb-mltmd">
						<video poster="http://www.servicecanada.gc.ca/fra/video/images/dc-td-fra.jpg" title="Développement des compétences">
							<source type="video/webm" src="http://video2.servicecanada.gc.ca/video/boew-wet/dc-td-fra.webm" />
							<source type="video/mp4" src="http://video2.servicecanada.gc.ca/video/boew-wet/dc-td-fra.mp4" />
							<track src="../multimedia/cpts-lg2-fr.html" kind="captions" data-type="text/html" srclang="fr" label="Français" />
						</video>
						<figcaption>
							<p>Développement des compétences (<a href="http://www.servicecanada.gc.ca/fra/video/dc.shtml">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>

Date de modification :: 2014-08-01

Sélection de la langue

Recherche et menus

Recherche

Interface à onglets - Carrousel

Vous cherchez la BOEW v3.1?

But

Carrousel - Style 1 - Exemple (`carousel-s1`)

Code

Carrousel - Style 2 - Exemple

Exemple

Exemple en grilles

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

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

Code

Changement de la vitesse de rotation

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

Code

Classes CSS - Exemple (`slow`, `fast`)

Code

Exemple avec le lecteur multimédia

Code

Transitions CSS

Fondu - Exemple (`fade`)

Code

Coulisse - Horizontal - Exemple (`slide`)

Code

Coulisse - Vertical - Exemple (`slidevert`)

Code

Interface à onglets - Carrousel

Vous cherchez la BOEW v3.1?

But

Carrousel - Style 1 - Exemple (carousel-s1)

Code

Carrousel - Style 2 - Exemple

Exemple

Exemple en grilles

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

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

Code

Changement de la vitesse de rotation

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

Code

Classes CSS - Exemple (slow, fast)

Code

Exemple avec le lecteur multimédia

Code

Transitions CSS

Fondu - Exemple (fade)

Code

Coulisse - Horizontal - Exemple (slide)

Code

Coulisse - Vertical - Exemple (slidevert)

Code

Carrousel - Style 1 - Exemple (`carousel-s1`)

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

Classes CSS - Exemple (`slow`, `fast`)

Fondu - Exemple (`fade`)

Coulisse - Horizontal - Exemple (`slide`)

Coulisse - Vertical - Exemple (`slidevert`)