---
{
	"title": "Interface à onglets - Carrousel",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Comprime plusieurs images et légendes superposées et fourni des controls qui permettent à l'utilisateur de choisi l'image à afficher.",
	"tag": "tabs, carousel",
	"parentdir": "tabs",
	"altLangPrefix": "tabs-carousel",
	"dateModified": "2018-04-18"
}
---
<span class="wb-prettify all-pre hide"></span>

<section class="alert alert-info">
		<h2>Éviter les carrousels promotionnels, améliorer le contenu Web</h2>
		<p> Lire l’<a href="https://blogue.canada.ca/2021/10/08/carrousels-promotionnels.html" class="alert-link">article sur le Blogue de Canada.ca</a> pour en apprendre davantage.</p>
	</section>

<section>
	<h2>But</h2>
	<p>Comprime plusieurs images et légendes superposées et fourni des controls qui permettent à l'utilisateur de choisi l'image à afficher.</p>
</section>

<section>
	<h2 id="carousel-s1">Carrousel - Style 1 - Exemple (<code>carousel-s1</code>)</h2>
	<div class="wb-tabs carousel-s1">
		<ul role="tablist">
			<li class="active"><a href="#panel1">Onglet	1: Prenez note : Renouvellement du carnet de documents d'aviation.</a></li>
			<li><a href="#panel2">Onglet 2: Prenez note : Programme d'amélioration des passages à niveau (PAPN).</a></li>
			<li><a href="#panel3">Onglet 3: Prenez note : Tanker Groupe d'experts sur la sécurité.</a></li>
		</ul>
		<div class="tabpanels">
			<div role="tabpanel" id="panel1" class="in fade">
				<a href="https://www.tc.gc.ca/fra/aviationcivile/opssvs/generale-personnel-changements-1814.htm">
					<figure>
						<img src="img/protect-environment.jpg" alt="" />
						<figcaption>
							<p>Prenez note : Renouvellement du carnet de documents d'aviation.</p>
						</figcaption>
					</figure>
				</a>
			</div>
			<div role="tabpanel" id="panel2" class="out fade">
				<a href="https://www.tc.gc.ca/fra/securiteferroviaire/publications-46.htm">
					<figure>
						<img src="img/banff.jpg" alt="" />
						<figcaption>
							<p>Prenez note : Programme d'amélioration des passages à niveau (PAPN).</p>
						</figcaption>
					</figure>
				</a>
			</div>
			<div role="tabpanel" id="panel3" class="out fade">
				<a href="https://www.tc.gc.ca/fra/comiteexpertssecuritenaviresciternes/menu.htm">
					<figure>
						<img src="img/investinourfuture.jpg" alt="" />
						<figcaption>
							<p>Prenez note : Tanker Groupe d'experts sur la sécurité.</p>
						</figcaption>
					</figure>
				</a>
			</div>
		</div>
	</div>

	<section>
		<h4>Code</h4>
		<details>
			<summary>Visualiser le code</summary>
			<pre><code>&lt;div class=&quot;wb-tabs carousel-s1&quot;&gt;
	&lt;ul role=&quot;tablist&quot;&gt;
		&lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#panel1&quot;&gt;Onglet	1: ...&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#panel2&quot;&gt;Onglet 2: ...&lt;/a&gt;&lt;/li&gt;
		...
	&lt;/ul&gt;
	&lt;div class=&quot;tabpanels&quot;&gt;
		&lt;div role=&quot;tabpanel&quot; id=&quot;panel1&quot; class=&quot;in fade&quot;&gt;
			&lt;figure&gt;
				&lt;img src=&quot;img/protect-environment.jpg&quot; alt=&quot;&quot; /&gt;
				&lt;figcaption&gt;
					&lt;p&gt;
						...
					&lt;/p&gt;
				&lt;/figcaption&gt;
			&lt;/figure&gt;
		&lt;/div&gt;
		&lt;div role=&quot;tabpanel&quot; id=&quot;panel2&quot; class=&quot;out fade&quot;&gt;
			&lt;figure&gt;
				&lt;img src=&quot;img/banff.jpg&quot; alt=&quot;&quot; /&gt;
				&lt;figcaption&gt;
					&lt;p&gt;
						...
					&lt;/p&gt;
				&lt;/figcaption&gt;
			&lt;/figure&gt;
		&lt;/div&gt;
		...
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
		</details>
	</section>
</section>

<section>
	<h2 id="carousel-s2">Carrousel - Style 2 - Exemple</h2>
	<div class="wb-tabs carousel-s2">
		<ul role="tablist">
			<li class="active"><a href="#panel4">Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation.</a></li>
			<li><a href="#panel5">Onglet 2: Prenez note : Programme d'amélioration des passages à niveau (PAPN).</a></li>
			<li><a href="#panel6">Onglet 3: Prenez note : Tanker Groupe d'experts sur la sécurité.</a></li>
		</ul>
		<div class="tabpanels">
			<div role="tabpanel" id="panel4" class="in fade">
				<a href="https://www.tc.gc.ca/fra/aviationcivile/opssvs/generale-personnel-changements-1814.htm">
					<figure>
						<img src="img/protect-environment.jpg" alt="" />
						<figcaption>
							<p>Prenez note : Renouvellement du carnet de documents d'aviation.</p>
						</figcaption>
					</figure>
				</a>
			</div>
			<div role="tabpanel" id="panel5" class="out fade">
				<a href="https://www.tc.gc.ca/fra/securiteferroviaire/publications-46.htm">
					<figure>
						<img src="img/banff.jpg" alt="" />
						<figcaption>
							<p>Prenez note : Programme d'amélioration des passages à niveau (PAPN).</p>
						</figcaption>
					</figure>
				</a>
			</div>
			<div role="tabpanel" id="panel6" class="out fade">
				<a href="https://www.tc.gc.ca/fra/comiteexpertssecuritenaviresciternes/menu.htm">
					<figure>
						<img src="img/investinourfuture.jpg" alt="" />
						<figcaption>
							<p>Prenez note : Tanker Groupe d'experts sur la sécurité.</p>
						</figcaption>
					</figure>
				</a>
			</div>
		</div>
	</div>

	<section>
		<h3>Exemple</h3>
		<details>
			<summary>Visualiser le code</summary>
			<pre><code>&lt;div class=&quot;wb-tabs carousel-s2&quot;&gt;
	&lt;ul role=&quot;tablist&quot;&gt;
		&lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#panel4&quot;&gt;Onglet 1: ...&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#panel5&quot;&gt;Onglet 2:...&lt;/a&gt;&lt;/li&gt;
		...
	&lt;/ul&gt;
	&lt;div class=&quot;tabpanels&quot;&gt;
		&lt;div role=&quot;tabpanel&quot; id=&quot;panel4&quot; class=&quot;in fade&quot;&gt;
			&lt;figure&gt;
				&lt;img src=&quot;img/protect-environment.jpg&quot; alt=&quot;&quot; /&gt;
				&lt;figcaption&gt;
					&lt;p&gt;
						...
					&lt;/p&gt;
				&lt;/figcaption&gt;
			&lt;/figure&gt;
		&lt;/div&gt;
		&lt;div role=&quot;tabpanel&quot; id=&quot;panel5&quot; class=&quot;out fade&quot;&gt;
			&lt;figure&gt;
				&lt;img src=&quot;img/banff.jpg&quot; alt=&quot;&quot; /&gt;
				&lt;figcaption&gt;
					&lt;p&gt;
						...
					&lt;/p&gt;
				&lt;/figcaption&gt;
			&lt;/figure&gt;
		&lt;/div&gt;
		...
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
		</details>
	</section>
</section>

<h2>Carrousel - Style 1 - Exemple (<code>carousel-s1</code>)</h2>
<div class="wb-tabs carousel-s1">
	<ul role="tablist">
		<li class="active"><a href="#panels1">Onglet	1: Prenez note : Renouvellement du carnet de documents d'aviation.</a></li>
		<li><a href="#panels2">Onglet 2: Prenez note : Programme d'amélioration des passages à niveau (PAPN).</a></li>
		<li><a href="#panels3">Onglet 3: Prenez note : Tanker Groupe d'experts sur la sécurité.</a></li>
	</ul>
	<div class="tabpanels">
		<div role="tabpanel" id="panels1" class="in fade">
			<a href="https://www.tc.gc.ca/fra/aviationcivile/opssvs/generale-personnel-changements-1814.htm">
				<figure>
					<img src="img/protect-environment.jpg" alt="" />
					<figcaption>
						<p>Prenez note : Renouvellement du carnet de documents d'aviation.</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div role="tabpanel" id="panels2" class="out fade">
			<a href="https://www.tc.gc.ca/fra/securiteferroviaire/publications-46.htm">
				<figure>
					<img src="img/banff.jpg" alt="" />
					<figcaption>
						<p>Prenez note : Programme d'amélioration des passages à niveau (PAPN).</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div role="tabpanel" id="panels3" class="out fade">
			<a href="https://www.tc.gc.ca/fra/comiteexpertssecuritenaviresciternes/menu.htm">
				<figure>
					<img src="img/investinourfuture.jpg" alt="" />
					<figcaption>
						<p>Prenez note : Tanker Groupe d'experts sur la sécurité.</p>
					</figcaption>
				</figure>
			</a>
		</div>
	</div>
</div>

<section>
	<h2 id="carousel-s2-thmb">Carrousel - Style 2 avec imagette - Exemple (<code>carousel-s2 show-thumbs</code>)</h2>
	<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: Prenez note : Renouvellement du carnet de documents d'aviation." /></a></li>
			<li><a href="#panel31"><img src="img/banff.jpg" alt="Onglet 2: Prenez note : Programme d'amélioration des passages à niveau (PAPN)." /></a></li>
			<li><a href="#panel32"><img src="img/investinourfuture.jpg" alt="Onglet 3: Prenez note : Tanker Groupe d'experts sur la sécurité." /></a></li>
		</ul>
		<div class="tabpanels">
			<div role="tabpanel" id="panel30" class="in fade">
				<a href="https://www.tc.gc.ca/fra/aviationcivile/opssvs/generale-personnel-changements-1814.htm">
					<figure>
						<img src="img/protect-environment.jpg" alt="" />
						<figcaption>
							<p>Prenez note : Renouvellement du carnet de documents d'aviation.</p>
						</figcaption>
					</figure>
				</a>
			</div>
			<div role="tabpanel" id="panel31" class="out fade">
				<a href="https://www.tc.gc.ca/fra/securiteferroviaire/publications-46.htm">
					<figure>
						<img src="img/banff.jpg" alt="" />
						<figcaption>
							<p>Prenez note : Programme d'amélioration des passages à niveau (PAPN).</p>
						</figcaption>
					</figure>
				</a>
			</div>
			<div role="tabpanel" id="panel32" class="out fade">
				<a href="https://www.tc.gc.ca/fra/comiteexpertssecuritenaviresciternes/menu.htm">
					<figure>
						<img src="img/investinourfuture.jpg" alt="" />
						<figcaption>
							<p>Prenez note : Tanker Groupe d'experts sur la sécurité.</p>
						</figcaption>
					</figure>
				</a>
			</div>
		</div>
	</div>

	<section>
		<h3>Code</h3>
		<details>
			<summary>Visualiser le code</summary>
			<pre><code>&lt;div class=&quot;wb-tabs carousel-s2  show-thumbs&quot;&gt;
	&lt;ul role=&quot;tablist&quot;&gt;
		&lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#panel30&quot;&gt;&lt;img src=&quot;img/protect-environment.jpg&quot; alt=&quot;Onglet 1: ...&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#panel31&quot;&gt;&lt;img src=&quot;img/banff.jpg&quot; alt=&quot;Onglet 2: ...&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
		...
	&lt;/ul&gt;
	&lt;div class=&quot;tabpanels&quot;&gt;
		&lt;div role=&quot;tabpanel&quot; id=&quot;panel30&quot; class=&quot;in fade&quot;&gt;
			&lt;figure&gt;
				&lt;img src=&quot;img/protect-environment.jpg&quot; alt=&quot;&quot; /&gt;
				&lt;figcaption&gt;
					&lt;p&gt;
						...
					&lt;/p&gt;
				&lt;/figcaption&gt;
			&lt;/figure&gt;
		&lt;/div&gt;
		&lt;div role=&quot;tabpanel&quot; id=&quot;panel31&quot; class=&quot;out fade&quot;&gt;
			&lt;figure&gt;
				&lt;img src=&quot;img/banff.jpg&quot; alt=&quot;&quot; /&gt;
				&lt;figcaption&gt;
					&lt;p&gt;
						...
					&lt;/p&gt;
				&lt;/figcaption&gt;
			&lt;/figure&gt;
		&lt;/div&gt;
		...
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
		</details>
	</section>
</section>

<section>
	<h2>Exemple en grilles</h2>
	<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">
					<li class="active"><a href="#panel7">Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation.</a></li>
					<li><a href="#panel8">Onglet 2: Prenez note : Programme d'amélioration des passages à niveau (PAPN).</a></li>
					<li><a href="#panel9">Onglet 3: Prenez note : Tanker Groupe d'experts sur la sécurité.</a></li>
				</ul>
				<div class="tabpanels">
					<div role="tabpanel" id="panel7" class="in fade">
						<a href="https://www.tc.gc.ca/fra/aviationcivile/opssvs/generale-personnel-changements-1814.htm">
							<figure>
								<img src="img/protect-environment.jpg" alt="" />
								<figcaption>
									<p>Prenez note : Renouvellement du carnet de documents d'aviation.</p>
								</figcaption>
							</figure>
						</a>
					</div>
					<div role="tabpanel" id="panel8" class="out fade">
						<a href="https://www.tc.gc.ca/fra/securiteferroviaire/publications-46.htm">
							<figure>
								<img src="img/banff.jpg" alt="" />
								<figcaption>
									<p>Prenez note : Programme d'amélioration des passages à niveau (PAPN).</p>
								</figcaption>
							</figure>
						</a>
					</div>
					<div role="tabpanel" id="panel9" class="out fade">
						<a href="https://www.tc.gc.ca/fra/comiteexpertssecuritenaviresciternes/menu.htm">
							<figure>
								<img src="img/investinourfuture.jpg" alt="" />
								<figcaption>
									<p>Prenez note : Tanker Groupe d'experts sur la sécurité.</p>
								</figcaption>
							</figure>
						</a>
					</div>
				</div>
			</div>

			<h3>Carrousel - Style 1 - Une option (pas des légendes superposées et des controls)</h3>
			<div class="wb-tabs carousel-s1">
				<ul role="tablist">
					<li><a href="#panels7">Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation.</a></li>
				</ul>
				<div class="tabpanels">
					<div role="tabpanel" id="panels7" class="in fade">
						<a href="https://www.tc.gc.ca/fra/aviationcivile/opssvs/generale-personnel-changements-1814.htm">
							<figure>
								<img src="img/protect-environment.jpg" alt="" />
								<figcaption>
									<p>Prenez note : Renouvellement du carnet de documents d'aviation.</p>
								</figcaption>
							</figure>
						</a>
					</div>
				</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">
					<li class="active"><a href="#panel10">Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation.</a></li>
					<li><a href="#panel11">Onglet 2: Prenez note : Programme d'amélioration des passages à niveau (PAPN).</a></li>
					<li><a href="#panel12">Onglet 3: Prenez note : Tanker Groupe d'experts sur la sécurité.</a></li>
				</ul>
				<div class="tabpanels">
					<div role="tabpanel" id="panel10" class="in fade">
						<a href="https://www.tc.gc.ca/fra/aviationcivile/opssvs/generale-personnel-changements-1814.htm">
							<figure>
								<img src="img/protect-environment.jpg" alt="" />
								<figcaption>
									<p>Prenez note : Renouvellement du carnet de documents d'aviation.</p>
								</figcaption>
							</figure>
						</a>
					</div>
					<div role="tabpanel" id="panel11" class="out fade">
						<a href="https://www.tc.gc.ca/fra/securiteferroviaire/publications-46.htm">
							<figure>
								<img src="img/banff.jpg" alt="" />
								<figcaption>
									<p>Prenez note : Programme d'amélioration des passages à niveau (PAPN).</p>
								</figcaption>
							</figure>
						</a>
					</div>
					<div role="tabpanel" id="panel12" class="out fade">
						<a href="https://www.tc.gc.ca/fra/comiteexpertssecuritenaviresciternes/menu.htm">
							<figure>
								<img src="img/investinourfuture.jpg" alt="" />
								<figcaption>
									<p>Prenez note : Tanker Groupe d'experts sur la sécurité.</p>
								</figcaption>
							</figure>
						</a>
					</div>
				</div>
			</div>
		</section>
	</div>

	<section>
		<h3>Code</h3>
		<details>
			<summary>Visualiser le code</summary>
			<pre><code>&lt;div class=&quot;row&quot;&gt;
	&lt;section class=&quot;col-sm-6 col-md-4&quot;&gt;
		&lt;h3&gt;Carrousel - Style 1 - col-sm-6 col-md-4&lt;/h3&gt;
		&lt;div class=&quot;wb-tabs carousel-s1&quot;&gt;
			&lt;ul role=&quot;tablist&quot;&gt;
				...
			&lt;/ul&gt;
			&lt;div class=&quot;tabpanels&quot;&gt;
				...
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/section&gt;
	&lt;section class=&quot;col-sm-6 col-md-8&quot;&gt;
		&lt;h3&gt;Carrousel - Style 2 - col-sm-6 col-md-8&lt;/h3&gt;
		&lt;div class=&quot;wb-tabs carousel-s2&quot;&gt;
			&lt;ul role=&quot;tablist&quot;&gt;
				...
			&lt;/ul&gt;
			&lt;div class=&quot;tabpanels&quot;&gt;
				...
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/section&gt;
&lt;/div&gt;</code></pre>
		</details>
	</section>
</section>

<section>
	<h2>Changement de la vitesse de rotation</h2>
	<section>
		<h3>Attribut &#171;&#160;data&#160;&#187; - Exemple (<code>data-wb-tabs='{"interval": 3}'</code>)</h3>
		<div class="wb-tabs carousel-s2" data-wb-tabs='{"interval": 3}'>
			<ul role="tablist">
				<li class="active"><a href="#panel13">Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation.</a></li>
				<li><a href="#panel14">Onglet 2: Prenez note : Programme d'amélioration des passages à niveau (PAPN).</a></li>
				<li><a href="#panel15">Onglet 3: Prenez note : Tanker Groupe d'experts sur la sécurité.</a></li>
			</ul>
			<div class="tabpanels">
				<div role="tabpanel" id="panel13" class="in fade">
					<a href="https://www.tc.gc.ca/fra/aviationcivile/opssvs/generale-personnel-changements-1814.htm">
						<figure>
							<img src="img/protect-environment.jpg" alt="" />
							<figcaption>
								<p>Prenez note : Renouvellement du carnet de documents d'aviation.</p>
							</figcaption>
						</figure>
					</a>
				</div>
				<div role="tabpanel" id="panel14" class="out fade">
					<a href="https://www.tc.gc.ca/fra/securiteferroviaire/publications-46.htm">
						<figure>
							<img src="img/banff.jpg" alt="" />
							<figcaption>
								<p>Prenez note : Programme d'amélioration des passages à niveau (PAPN).</p>
							</figcaption>
						</figure>
					</a>
				</div>
				<div role="tabpanel" id="panel15" class="out fade">
					<a href="https://www.tc.gc.ca/fra/comiteexpertssecuritenaviresciternes/menu.htm">
						<figure>
							<img src="img/investinourfuture.jpg" alt="" />
							<figcaption>
								<p>Prenez note : Tanker Groupe d'experts sur la sécurité.</p>
							</figcaption>
						</figure>
					</a>
				</div>
			</div>
		</div>

		<section>
			<h4>Code</h4>
			<details>
				<summary>Visualiser le code</summary>
				<pre><code>&lt;div class=&quot;wb-tabs carousel-s2&quot; data-wb-tabs='{&quot;interval&quot;: 3}'&gt;</code></pre>
			</details>
		</section>
	</section>

	<section>
		<h3>Classes CSS - Exemple (<code lang="en">slow</code>, <code lang="en">fast</code>)</h3>
		<div class="wb-tabs carousel-s2" data-wb-tabs='{"interval": 3}'>
			<ul role="tablist">
				<li class="active"><a href="#panel16">Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation.</a></li>
				<li><a href="#panel17">Onglet 2: Prenez note : Programme d'amélioration des passages à niveau (PAPN).</a></li>
				<li><a href="#panel18">Onglet 3: Prenez note : Tanker Groupe d'experts sur la sécurité.</a></li>
			</ul>
			<div class="tabpanels">
				<div role="tabpanel" id="panel16" class="in fade">
					<a href="https://www.tc.gc.ca/fra/aviationcivile/opssvs/generale-personnel-changements-1814.htm">
						<figure>
							<img src="img/protect-environment.jpg" alt="" />
							<figcaption>
								<p>Prenez note : Renouvellement du carnet de documents d'aviation.</p>
							</figcaption>
						</figure>
					</a>
				</div>
				<div role="tabpanel" id="panel17" class="out fade">
					<a href="https://www.tc.gc.ca/fra/securiteferroviaire/publications-46.htm">
						<figure>
							<img src="img/banff.jpg" alt="" />
							<figcaption>
								<p>Prenez note : Programme d'amélioration des passages à niveau (PAPN).</p>
							</figcaption>
						</figure>
					</a>
				</div>
				<div role="tabpanel" id="panel18" class="out fade">
					<a href="https://www.tc.gc.ca/fra/comiteexpertssecuritenaviresciternes/menu.htm">
						<figure>
							<img src="img/investinourfuture.jpg" alt="" />
							<figcaption>
								<p>Prenez note : Tanker Groupe d'experts sur la sécurité.</p>
							</figcaption>
						</figure>
					</a>
				</div>
			</div>
		</div>

		<section>
			<h4>Code</h4>
			<details>
				<summary>Visualiser le code</summary>
				<pre><code>&lt;div class=&quot;wb-tabs carousel-s2&quot; data-wb-tabs='{&quot;interval&quot;: 3}'&gt;</code></pre>
			</details>
		</section>
	</section>
</section>

<section>
	<h2>Exemple avec le lecteur multimédia</h2>
	<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>

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

<section>
	<h2>Transitions CSS</h2>
	<section>
		<h3 id="fade">Fondu - Exemple (<code lang="fr">fade</code>)</h3>
		<div class="wb-tabs carousel-s2">
			<ul role="tablist">
				<li class="active"><a href="#panel21">Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation.</a></li>
				<li><a href="#panel22">Onglet 2: Prenez note : Programme d'amélioration des passages à niveau (PAPN).</a></li>
				<li><a href="#panel23">Onglet 3: Prenez note : Tanker Groupe d'experts sur la sécurité.</a></li>
			</ul>
			<div class="tabpanels">
				<div role="tabpanel" id="panel21" class="in fade">
					<a href="https://www.tc.gc.ca/fra/aviationcivile/opssvs/generale-personnel-changements-1814.htm">
						<figure>
							<img src="img/protect-environment.jpg" alt="" />
							<figcaption>
								<p>Prenez note : Renouvellement du carnet de documents d'aviation.</p>
							</figcaption>
						</figure>
					</a>
				</div>
				<div role="tabpanel" id="panel22" class="out fade">
					<a href="https://www.tc.gc.ca/fra/securiteferroviaire/publications-46.htm">
						<figure>
							<img src="img/banff.jpg" alt="" />
							<figcaption>
								<p>Prenez note : Programme d'amélioration des passages à niveau (PAPN).</p>
							</figcaption>
						</figure>
					</a>
				</div>
				<div role="tabpanel" id="panel23" class="out fade">
					<a href="https://www.tc.gc.ca/fra/comiteexpertssecuritenaviresciternes/menu.htm">
						<figure>
							<img src="img/investinourfuture.jpg" alt="" />
							<figcaption>
								<p>Prenez note : Tanker Groupe d'experts sur la sécurité.</p>
							</figcaption>
						</figure>
					</a>
				</div>
			</div>
		</div>

		<section>
			<h4>Code</h4>
			<details>
				<summary>Visualiser le code</summary>
				<pre><code>&lt;div class=&quot;wb-tabs carousel-s2&quot;&gt;
	&lt;ul role=&quot;tablist&quot;&gt;
		&lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#panel21&quot;&gt;Onglet 1: ...&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#panel22&quot;&gt;Onglet 2: ...&lt;/a&gt;&lt;/li&gt;
		...
	&lt;/ul&gt;
	&lt;div class=&quot;tabpanels&quot;&gt;
		&lt;div role=&quot;tabpanel&quot; id=&quot;panel21&quot; class=&quot;in fade&quot;&gt;
			...
		&lt;/div&gt;
		&lt;div role=&quot;tabpanel&quot; id=&quot;panel22&quot; class=&quot;out fade&quot;&gt;
			...
		&lt;/div&gt;
		...
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
			</details>
		</section>
	</section>

	<section>
		<h3 id="slide">Coulisse - Horizontal - Exemple (<code lang="fr">slide</code>)</h3>
		<div class="wb-tabs carousel-s2">
			<ul role="tablist">
				<li class="active"><a href="#panel24">Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation.</a></li>
				<li><a href="#panel25">Onglet 2: Prenez note : Programme d'amélioration des passages à niveau (PAPN).</a></li>
				<li><a href="#panel26">Onglet 3: Prenez note : Tanker Groupe d'experts sur la sécurité.</a></li>
			</ul>
			<div class="tabpanels">
				<div role="tabpanel" id="panel24" class="slide in">
					<a href="https://www.tc.gc.ca/fra/aviationcivile/opssvs/generale-personnel-changements-1814.htm">
						<figure>
							<img src="img/protect-environment.jpg" alt="" />
							<figcaption>
								<p>Prenez note : Renouvellement du carnet de documents d'aviation.</p>
							</figcaption>
						</figure>
					</a>
				</div>
				<div role="tabpanel" id="panel25" class="slide out">
					<a href="https://www.tc.gc.ca/fra/securiteferroviaire/publications-46.htm">
						<figure>
							<img src="img/banff.jpg" alt="" />
							<figcaption>
								<p>Prenez note : Programme d'amélioration des passages à niveau (PAPN).</p>
							</figcaption>
						</figure>
					</a>
				</div>
				<div role="tabpanel" id="panel26" class="slide out">
					<a href="https://www.tc.gc.ca/fra/comiteexpertssecuritenaviresciternes/menu.htm">
						<figure>
							<img src="img/investinourfuture.jpg" alt="" />
							<figcaption>
								<p>Prenez note : Tanker Groupe d'experts sur la sécurité.</p>
							</figcaption>
						</figure>
					</a>
				</div>
			</div>
		</div>

		<section>
			<h4>Code</h4>
			<details>
				<summary>Visualiser le code</summary>
				<pre><code>&lt;div class=&quot;wb-tabs carousel-s2&quot;&gt;
	&lt;ul role=&quot;tablist&quot;&gt;
		&lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#panel24&quot;&gt;Onglet 1: ...&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#panel25&quot;&gt;Onglet 2: ...&lt;/a&gt;&lt;/li&gt;
		...
	&lt;/ul&gt;
	&lt;div class=&quot;tabpanels&quot;&gt;
		&lt;div role=&quot;tabpanel&quot; id=&quot;panel24&quot; class=&quot;slide in&quot;&gt;
			...
		&lt;/div&gt;
		&lt;div role=&quot;tabpanel&quot; id=&quot;panel25&quot; class=&quot;slide out&quot;&gt;
			...
		&lt;/div&gt;
		...
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
			</details>
		</section>
	</section>

	<section>
		<h3 id="slidevert">Coulisse - Vertical - Exemple (<code lang="fr">slidevert</code>)</h3>
		<div class="wb-tabs carousel-s2">
			<ul role="tablist">
				<li class="active"><a href="#panel27">Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation.</a></li>
				<li><a href="#panel28">Onglet 2: Prenez note : Programme d'amélioration des passages à niveau (PAPN).</a></li>
				<li><a href="#panel29">Onglet 3: Prenez note : Tanker Groupe d'experts sur la sécurité.</a></li>
			</ul>
			<div class="tabpanels">
				<div role="tabpanel" id="panel27" class="slidevert in">
					<a href="https://www.tc.gc.ca/fra/aviationcivile/opssvs/generale-personnel-changements-1814.htm">
						<figure>
							<img src="img/protect-environment.jpg" alt="" />
							<figcaption>
								<p>Prenez note : Renouvellement du carnet de documents d'aviation.</p>
							</figcaption>
						</figure>
					</a>
				</div>
				<div role="tabpanel" id="panel28" class="slidevert out">
					<a href="https://www.tc.gc.ca/fra/securiteferroviaire/publications-46.htm">
						<figure>
							<img src="img/banff.jpg" alt="" />
							<figcaption>
								<p>Prenez note : Programme d'amélioration des passages à niveau (PAPN).</p>
							</figcaption>
						</figure>
					</a>
				</div>
				<div role="tabpanel" id="panel29" class="slidevert out">
					<a href="https://www.tc.gc.ca/fra/comiteexpertssecuritenaviresciternes/menu.htm">
						<figure>
							<img src="img/investinourfuture.jpg" alt="" />
							<figcaption>
								<p>Prenez note : Tanker Groupe d'experts sur la sécurité.</p>
							</figcaption>
						</figure>
					</a>
				</div>
			</div>
		</div>

		<section>
			<h4>Code</h4>
			<details>
				<summary>Visualiser le code</summary>
				<pre><code>&lt;div class=&quot;wb-tabs carousel-s2&quot;&gt;
	&lt;ul role=&quot;tablist&quot;&gt;
		&lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#panel27&quot;&gt;Onglet 1: ...&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#panel28&quot;&gt;Onglet 2: ...&lt;/a&gt;&lt;/li&gt;
		...
	&lt;/ul&gt;
	&lt;div class=&quot;tabpanels&quot;&gt;
		&lt;div role=&quot;tabpanel&quot; id=&quot;panel27&quot; class=&quot;slidevert in&quot;&gt;
			...
		&lt;/div&gt;
		&lt;div role=&quot;tabpanel&quot; id=&quot;panel28&quot; class=&quot;slidevert out&quot;&gt;
			...
		&lt;/div&gt;
		...
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
			</details>
		</section>
	</section>
	<section>
		<h2>Carrousel - Style 2 - Une option (pas des légendes superposées et des controls)</h2>
		<div class="wb-tabs carousel-s2 show-thumbs">
			<ul role="tablist">
				<li class="active"><a href="#panels30"><img src="img/protect-environment.jpg" alt="Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation." /></a></li>
			</ul>
			<div class="tabpanels">
				<div role="tabpanel" id="panels30" class="in fade">
					<a href="https://www.tc.gc.ca/fra/aviationcivile/opssvs/generale-personnel-changements-1814.htm">
						<figure>
							<img src="img/protect-environment.jpg" alt="" />
							<figcaption>
								<p>Prenez note : Renouvellement du carnet de documents d'aviation.</p>
							</figcaption>
						</figure>
					</a>
				</div>
			</div>
		</div>
	</section>
</section>
