---
{
	"title": "Tabbed Interface - Carousel",
	"language": "en",
	"category": "Plugins",
	"description": "Dynamically stacks multiple images and captions into a carousel (or slider) widget.",
	"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>Avoid promotional carousels, improve web contents</h2>
		<p> Read the <a href="https://blog.canada.ca/2021/10/08/promotional-carousels.html" class="alert-link">article on the canada.ca blog</a> to learn more.</p>
	</section>

<section>
	<h2>Purpose</h2>
	<p>Dynamically stacks multiple images and captions into a carousel (or slider) widget.</p>
</section>

<section>
	<h2 id="carousel-s1">Carousel style 1 example (<code>carousel-s1</code>)</h2>
	<div class="wb-tabs carousel-s1">
		<ul role="tablist">
			<li class="active"><a href="#panel1">Tab 1: Take Note: Renewal of the Aviation Document Booklet.</a></li>
			<li><a href="#panel2">Tab 2: Take Note: Grade Crossing Improvement Program (GCIP).</a></li>
			<li><a href="#panel3">Tab 3: Take Note: Tanker Safety Expert Panel.</a></li>
		</ul>
		<div class="tabpanels">
			<div role="tabpanel" id="panel1" class="in fade">
				<a href="https://www.tc.gc.ca/eng/civilaviation/opssvs/general-personnel-changes-1814.htm">
					<figure>
						<img src="img/protect-environment.jpg" alt="" />
						<figcaption>
							<p>Take Note: Renewal of the Aviation Document Booklet.</p>
						</figcaption>
					</figure>
				</a>
			</div>
			<div role="tabpanel" id="panel2" class="out fade">
				<a href="https://www.tc.gc.ca/eng/railsafety/publications-46.htm">
					<figure>
						<img src="img/banff.jpg" alt="" />
						<figcaption>
							<p>Take Note: Grade Crossing Improvement Program (GCIP).</p>
						</figcaption>
					</figure>
				</a>
			</div>
			<div role="tabpanel" id="panel3" class="out fade">
				<a href="https://www.tc.gc.ca/eng/tankersafetyexpertpanel/menu.htm">
					<figure>
						<img src="img/investinourfuture.jpg" alt="" />
						<figcaption>
							<p>Take Note: Tanker Safety Expert Panel.</p>
						</figcaption>
					</figure>
				</a>
			</div>
		</div>
	</div>

	<section>
		<h3>Code</h3>
		<details>
			<summary>View 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;Tab 1: ...&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#panel2&quot;&gt;Tab 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">Carousel style 2 example (<code>carousel-s2</code>)</h2>
	<div class="wb-tabs carousel-s2">
		<ul role="tablist">
			<li class="active"><a href="#panel4"><img src="img/protect-environment.jpg" alt="Tab 1: Take Note: Renewal of the Aviation Document Booklet." /></a></li>
			<li><a href="#panel5"><img src="img/banff.jpg" alt="Tab 2: Take Note: Grade Crossing Improvement Program (GCIP)." /></a></li>
			<li><a href="#panel6"><img src="img/investinourfuture.jpg" alt="Tab 3: Take Note: Tanker Safety Expert Panel." /></a></li>
		</ul>
		<div class="tabpanels">
			<div role="tabpanel" id="panel4" class="in fade">
				<a href="https://www.tc.gc.ca/eng/civilaviation/opssvs/general-personnel-changes-1814.htm">
					<figure>
						<img src="img/protect-environment.jpg" alt="" />
						<figcaption>
							<p>Take Note: Renewal of the Aviation Document Booklet.</p>
						</figcaption>
					</figure>
				</a>
			</div>
			<div role="tabpanel" id="panel5" class="out fade">
				<a href="https://www.tc.gc.ca/eng/railsafety/publications-46.htm">
					<figure>
						<img src="img/banff.jpg" alt="" />
						<figcaption>
							<p>Take Note: Grade Crossing Improvement Program (GCIP).</p>
						</figcaption>
					</figure>
				</a>
			</div>
			<div role="tabpanel" id="panel6" class="out fade">
				<a href="https://www.tc.gc.ca/eng/tankersafetyexpertpanel/menu.htm">
					<figure>
						<img src="img/investinourfuture.jpg" alt="" />
						<figcaption>
							<p>Take Note: Tanker Safety Expert Panel.</p>
						</figcaption>
					</figure>
				</a>
			</div>
		</div>
	</div>

	<section>
		<h3>Code</h3>
		<details>
			<summary>View 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;&lt;img src=&quot;img/protect-environment.jpg&quot; alt=&quot;Tab 1: ...&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#panel5&quot;&gt;&lt;img src=&quot;img/banff.jpg&quot; alt=&quot;Tab 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;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>

<section>
	<h2 id="carousel-s2-thmb">Carousel style 2 with thumbnails example (<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="Tab 1: Take Note: Renewal of the Aviation Document Booklet." /></a></li>
			<li><a href="#panel31"><img src="img/banff.jpg" alt="Tab 2: Take Note: Grade Crossing Improvement Program (GCIP)." /></a></li>
			<li><a href="#panel32"><img src="img/investinourfuture.jpg" alt="Tab 3: Take Note: Tanker Safety Expert Panel." /></a></li>
		</ul>
		<div class="tabpanels">
			<div role="tabpanel" id="panel30" class="in fade">
				<a href="https://www.tc.gc.ca/eng/civilaviation/opssvs/general-personnel-changes-1814.htm">
					<figure>
						<img src="img/protect-environment.jpg" alt="" />
						<figcaption>
							<p>Take Note: Renewal of the Aviation Document Booklet.</p>
						</figcaption>
					</figure>
				</a>
			</div>
			<div role="tabpanel" id="panel31" class="out fade">
				<a href="https://www.tc.gc.ca/eng/railsafety/publications-46.htm">
					<figure>
						<img src="img/banff.jpg" alt="" />
						<figcaption>
							<p>Take Note: Grade Crossing Improvement Program (GCIP).</p>
						</figcaption>
					</figure>
				</a>
			</div>
			<div role="tabpanel" id="panel32" class="out fade">
				<a href="https://www.tc.gc.ca/eng/tankersafetyexpertpanel/menu.htm">
					<figure>
						<img src="img/investinourfuture.jpg" alt="" />
						<figcaption>
							<p>Take Note: Tanker Safety Expert Panel.</p>
						</figcaption>
					</figure>
				</a>
			</div>
		</div>
	</div>

	<section>
		<h3>Code</h3>
		<details>
			<summary>View 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;Tab 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;Tab 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>Grids example</h2>
	<div class="row">
		<section class="col-sm-6 col-md-4">
			<h3>Carousel style 1 - col-sm-6 col-md-4</h3>
			<div class="wb-tabs carousel-s1">
				<ul role="tablist">
					<li class="active"><a href="#panel7">Tab 1: Take Note: Renewal of the Aviation Document Booklet.</a></li>
					<li><a href="#panel8">Tab 2: Take Note: Grade Crossing Improvement Program (GCIP).</a></li>
					<li><a href="#panel9">Tab 3: Take Note: Tanker Safety Expert Panel.</a></li>
				</ul>
				<div class="tabpanels">
					<div role="tabpanel" id="panel7" class="in fade">
						<a href="https://www.tc.gc.ca/eng/civilaviation/opssvs/general-personnel-changes-1814.htm">
							<figure>
								<img src="img/protect-environment.jpg" alt="" />
								<figcaption>
									<p>Take Note: Renewal of the Aviation Document Booklet.</p>
								</figcaption>
							</figure>
						</a>
					</div>
					<div role="tabpanel" id="panel8" class="out fade">
						<a href="https://www.tc.gc.ca/eng/railsafety/publications-46.htm">
							<figure>
								<img src="img/banff.jpg" alt="" />
								<figcaption>
									<p>Take Note: Grade Crossing Improvement Program (GCIP).</p>
								</figcaption>
							</figure>
						</a>
					</div>
					<div role="tabpanel" id="panel9" class="out fade">
						<a href="https://www.tc.gc.ca/eng/tankersafetyexpertpanel/menu.htm">
							<figure>
								<img src="img/investinourfuture.jpg" alt="" />
								<figcaption>
									<p>Take Note: Tanker Safety Expert Panel.</p>
								</figcaption>
							</figure>
						</a>
					</div>
				</div>
			</div>
			<!--

			-->
			<h3>Carousel - Style 1 - Only one choice (slider controls and tranisitions are not applied)</h3>
			<div class="wb-tabs carousel-s1">
				<ul role="tablist">
					<li><a href="#panels7">Tab 1: Take Note: Renewal of the Aviation Document Booklet.</a></li>
				</ul>
				<div class="tabpanels">
					<div role="tabpanel" id="panels7" class="in fade">
						<a href="https://www.tc.gc.ca/eng/civilaviation/opssvs/general-personnel-changes-1814.htm">
							<figure>
								<img src="img/protect-environment.jpg" alt="" />
								<figcaption>
									<p>Take Note: Renewal of the Aviation Document Booklet.</p>
								</figcaption>
							</figure>
						</a>
					</div>
				</div>
			</div>
		</section>
		<section class="col-sm-6 col-md-8">
			<h3>Carousel style 2 - col-sm-6 col-md-8</h3>
			<div class="wb-tabs carousel-s2">
				<ul role="tablist">
					<li class="active"><a href="#panel10">Tab 1: Take Note: Renewal of the Aviation Document Booklet.</a></li>
					<li><a href="#panel11">Tab 2: Take Note: Grade Crossing Improvement Program (GCIP).</a></li>
					<li><a href="#panel12">Ŧab 3: Take Note: Tanker Safety Expert Panel.</a></li>
				</ul>
				<div class="tabpanels">
					<div role="tabpanel" id="panel10" class="in fade">
						<a href="https://www.tc.gc.ca/eng/civilaviation/opssvs/general-personnel-changes-1814.htm">
							<figure>
								<img src="img/protect-environment.jpg" alt="" />
								<figcaption>
									<p>Take Note: Renewal of the Aviation Document Booklet.</p>
								</figcaption>
							</figure>
						</a>
					</div>
					<div role="tabpanel" id="panel11" class="out fade">
						<a href="https://www.tc.gc.ca/eng/railsafety/publications-46.htm">
							<figure>
								<img src="img/banff.jpg" alt="" />
								<figcaption>
									<p>Take Note: Grade Crossing Improvement Program (GCIP).</p>
								</figcaption>
							</figure>
						</a>
					</div>
					<div role="tabpanel" id="panel12" class="out fade">
						<a href="https://www.tc.gc.ca/eng/tankersafetyexpertpanel/menu.htm">
							<figure>
								<img src="img/investinourfuture.jpg" alt="" />
								<figcaption>
									<p>Take Note: Tanker Safety Expert Panel.</p>
								</figcaption>
							</figure>
						</a>
					</div>
				</div>
			</div>
		</section>
	</div>

	<section>
		<h3>Code</h3>
		<details>
			<summary>View 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;Carousel 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;Carousel 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>Change rotation speed</h2>
	<section>
		<h3>Data attribute example (<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">Tab 1: Take Note: Renewal of the Aviation Document Booklet.</a></li>
				<li><a href="#panel14">Tab 2: Take Note: Grade Crossing Improvement Program (GCIP).</a></li>
				<li><a href="#panel15">Tab 3: Take Note: Tanker Safety Expert Panel.</a></li>
			</ul>
			<div class="tabpanels">
				<div role="tabpanel" id="panel13" class="in fade">
					<a href="https://www.tc.gc.ca/eng/civilaviation/opssvs/general-personnel-changes-1814.htm">
						<figure>
							<img src="img/protect-environment.jpg" alt="" />
							<figcaption>
								<p>Take Note: Renewal of the Aviation Document Booklet.</p>
							</figcaption>
						</figure>
					</a>
				</div>
				<div role="tabpanel" id="panel14" class="out fade">
					<a href="https://www.tc.gc.ca/eng/railsafety/publications-46.htm">
						<figure>
							<img src="img/banff.jpg" alt="" />
							<figcaption>
								<p>Take Note: Grade Crossing Improvement Program (GCIP).</p>
							</figcaption>
						</figure>
					</a>
				</div>
				<div role="tabpanel" id="panel15" class="out fade">
					<a href="https://www.tc.gc.ca/eng/tankersafetyexpertpanel/menu.htm">
						<figure>
							<img src="img/investinourfuture.jpg" alt="" />
							<figcaption>
								<p>Take Note: Tanker Safety Expert Panel.</p>
							</figcaption>
						</figure>
					</a>
				</div>
			</div>
		</div>

		<section>
			<h4>Code</h4>
			<details>
				<summary>View 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>CSS classes example (<code>slow</code>, <code>fast</code>)</h3>
		<div class="wb-tabs carousel-s2 fast">
			<ul role="tablist">
				<li class="active"><a href="#panel16">Tab 1: Take Note: Renewal of the Aviation Document Booklet.</a></li>
				<li><a href="#panel17">Tab 2: Take Note: Grade Crossing Improvement Program (GCIP).</a></li>
				<li><a href="#panel18">Tab 3: Take Note: Tanker Safety Expert Panel.</a></li>
			</ul>
			<div class="tabpanels">
				<div role="tabpanel" id="panel16" class="in fade">
					<a href="https://www.tc.gc.ca/eng/civilaviation/opssvs/general-personnel-changes-1814.htm">
						<figure>
							<img src="img/protect-environment.jpg" alt="" />
							<figcaption>
								<p>Take Note: Renewal of the Aviation Document Booklet.</p>
							</figcaption>
						</figure>
					</a>
				</div>
				<div role="tabpanel" id="panel17" class="out fade">
					<a href="https://www.tc.gc.ca/eng/railsafety/publications-46.htm">
						<figure>
							<img src="img/banff.jpg" alt="" />
							<figcaption>
								<p>Take Note: Grade Crossing Improvement Program (GCIP).</p>
							</figcaption>
						</figure>
					</a>
				</div>
				<div role="tabpanel" id="panel18" class="out fade">
					<a href="https://www.tc.gc.ca/eng/tankersafetyexpertpanel/menu.htm">
						<figure>
							<img src="img/investinourfuture.jpg" alt="" />
							<figcaption>
								<p>Take Note: Tanker Safety Expert Panel.</p>
							</figcaption>
						</figure>
					</a>
				</div>
			</div>
		</div>

		<section>
			<h4>Code</h4>
			<details>
				<summary>View code</summary>
				<pre><code>&lt;div class=&quot;wb-tabs carousel-s2 fast&quot;&gt;</code></pre>
			</details>
		</section>
	</section>
</section>

<section>
	<h2>Multimedia player example</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">Tab 1</a></li>
					<li><a href="#panel20">Tab 2</a></li>
				</ul>
				<div class="tabpanels">
					<div role="tabpanel" id="panel19" class="in fade">
						<figure class="wb-mltmd">
							<video poster="../multimedia/demo/video1-en.jpg" title="Looking for a Job">
								<source type="video/webm" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.webm" />
								<source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.mp4" />
								<track src="../multimedia/cpts-lg-en.html" kind="captions" data-type="text/html" srclang="en" label="English" />
							</video>
							<figcaption>
								<p>Looking for a Job (<a href="../multimedia/cpts-lg-en.html">Transcript</a>)</p>
							</figcaption>
						</figure>
					</div>
					<div role="tabpanel" id="panel20" class="out fade">
						<figure class="wb-mltmd">
							<video poster="../multimedia/demo/video2-en.jpg" title="Training and Development">
								<source type="video/webm" src="https://wet-boew.github.io/wet-boew-attachments/videos/video2-en.webm" />
								<source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video2-en.mp4" />
								<track src="../multimedia/demo/video2-captions-en.xml" kind="captions" data-type="application/ttml+xml" srclang="en" label="English" />
							</video>
							<figcaption>
								<p>Training and Development (<a href="../multimedia/cpts-lg2-en.html">Transcript</a>)</p>
							</figcaption>
						</figure>
					</div>
				</div>
			</div>
		</div>
	</div>

	<section>
		<h3>Code</h3>
		<details>
			<summary>View 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;Tab 1&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href=&quot;#panel20&quot;&gt;Tab 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-en.jpg&quot; title=&quot;Looking for a Job&quot;&gt;
							&lt;source type=&quot;video/webm&quot; src=&quot;https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.webm&quot; /&gt;
							&lt;source type=&quot;video/mp4&quot; src=&quot;https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.mp4&quot; /&gt;
							&lt;track src=&quot;../multimedia/cpts-lg-en.html&quot; kind=&quot;captions&quot; data-type=&quot;text/html&quot; srclang=&quot;en&quot; label=&quot;English&quot; /&gt;
						&lt;/video&gt;
						&lt;figcaption&gt;
							&lt;p&gt;Looking for a Job (&lt;a href=&quot;../multimedia/cpts-lg-en.html&quot;&gt;Transcript&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-en.jpg&quot; title=&quot;Training and Development&quot;&gt;
							&lt;source type=&quot;video/webm&quot; src=&quot;https://wet-boew.github.io/wet-boew-attachments/videos/video2-en.webm&quot; /&gt;
							&lt;source type=&quot;video/mp4&quot; src=&quot;https://wet-boew.github.io/wet-boew-attachments/videos/video2-en.mp4&quot; /&gt;
							&lt;track src=&quot;../multimedia/demo/video2-captions-en.xml&quot; kind=&quot;captions&quot; data-type=&quot;application/ttml+xml&quot; srclang=&quot;en&quot; label=&quot;English&quot; /&gt;
						&lt;/video&gt;
						&lt;figcaption&gt;
							&lt;p&gt;Training and Development (&lt;a href=&quot;../multimedia/cpts-lg2-en.html&quot;&gt;Transcript&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>CSS Transitions</h2>
	<section>
		<h3 id="fade">Fade example (<code>fade</code>)</h3>
		<div class="wb-tabs carousel-s2 fast">
			<ul role="tablist">
				<li class="active"><a href="#panel21">Tab 1: Take Note: Renewal of the Aviation Document Booklet.</a></li>
				<li><a href="#panel22">Tab 2: Take Note: Grade Crossing Improvement Program (GCIP).</a></li>
				<li><a href="#panel23">Tab 3: Take Note: Tanker Safety Expert Panel.</a></li>
			</ul>
			<div class="tabpanels">
				<div role="tabpanel" id="panel21" class="in fade">
					<a href="https://www.tc.gc.ca/eng/civilaviation/opssvs/general-personnel-changes-1814.htm">
						<figure>
							<img src="img/protect-environment.jpg" alt="" />
							<figcaption>
								<p>Take Note: Renewal of the Aviation Document Booklet.</p>
							</figcaption>
						</figure>
					</a>
				</div>
				<div role="tabpanel" id="panel22" class="out fade">
					<a href="https://www.tc.gc.ca/eng/railsafety/publications-46.htm">
						<figure>
							<img src="img/banff.jpg" alt="" />
							<figcaption>
								<p>Take Note: Grade Crossing Improvement Program (GCIP).</p>
							</figcaption>
						</figure>
					</a>
				</div>
				<div role="tabpanel" id="panel23" class="out fade">
					<a href="https://www.tc.gc.ca/eng/tankersafetyexpertpanel/menu.htm">
						<figure>
							<img src="img/investinourfuture.jpg" alt="" />
							<figcaption>
								<p>Take Note: Tanker Safety Expert Panel.</p>
							</figcaption>
						</figure>
					</a>
				</div>
			</div>
		</div>

		<section>
			<h4>Code</h4>
			<details>
				<summary>View code</summary>
				<pre><code>&lt;div class=&quot;wb-tabs carousel-s2 fast&quot;&gt;
	&lt;ul role=&quot;tablist&quot;&gt;
		&lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#panel21&quot;&gt;Tab 1: ...&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#panel22&quot;&gt;Tab 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">Slide - Horizontal example (<code>slide</code>)</h3>
		<div class="wb-tabs carousel-s2 fast">
			<ul role="tablist">
				<li class="active"><a href="#panel24">Tab 1: Take Note: Renewal of the Aviation Document Booklet.</a></li>
				<li><a href="#panel25">Tab 2: Take Note: Grade Crossing Improvement Program (GCIP).</a></li>
				<li><a href="#panel26">Tab 3: Take Note: Tanker Safety Expert Panel.</a></li>
			</ul>
			<div class="tabpanels">
				<div role="tabpanel" id="panel24" class="slide in">
					<a href="https://www.tc.gc.ca/eng/civilaviation/opssvs/general-personnel-changes-1814.htm">
						<figure>
							<img src="img/protect-environment.jpg" alt="" />
							<figcaption>
								<p>Take Note: Renewal of the Aviation Document Booklet.</p>
							</figcaption>
						</figure>
					</a>
				</div>
				<div role="tabpanel" id="panel25" class="slide out">
					<a href="https://www.tc.gc.ca/eng/railsafety/publications-46.htm">
						<figure>
							<img src="img/banff.jpg" alt="" />
							<figcaption>
								<p>Take Note: Grade Crossing Improvement Program (GCIP).</p>
							</figcaption>
						</figure>
					</a>
				</div>
				<div role="tabpanel" id="panel26" class="slide out">
					<a href="https://www.tc.gc.ca/eng/tankersafetyexpertpanel/menu.htm">
						<figure>
							<img src="img/investinourfuture.jpg" alt="" />
							<figcaption>
								<p>Take Note: Tanker Safety Expert Panel.</p>
							</figcaption>
						</figure>
					</a>
				</div>
			</div>
		</div>

		<section>
			<h4>Code</h4>
			<details>
				<summary>View code</summary>
				<pre><code>&lt;div class=&quot;wb-tabs carousel-s2 fast&quot;&gt;
	&lt;ul role=&quot;tablist&quot;&gt;
		&lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#panel24&quot;&gt;Tab 1: ...&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#panel25&quot;&gt;Tab 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">Slide - Vertical example (<code>slidevert</code>)</h3>
		<div class="wb-tabs carousel-s2 fast">
			<ul role="tablist">
				<li class="active"><a href="#panel27">Tab 1: Take Note: Renewal of the Aviation Document Booklet.</a></li>
				<li><a href="#panel28">Tab 2: Take Note: Grade Crossing Improvement Program (GCIP).</a></li>
				<li><a href="#panel29">Tab 3: Take Note: Tanker Safety Expert Panel.</a></li>
			</ul>
			<div class="tabpanels">
				<div role="tabpanel" id="panel27" class="slidevert in">
					<a href="https://www.tc.gc.ca/eng/civilaviation/opssvs/general-personnel-changes-1814.htm">
						<figure>
							<img src="img/protect-environment.jpg" alt="" />
							<figcaption>
								<p>Take Note: Renewal of the Aviation Document Booklet.</p>
							</figcaption>
						</figure>
					</a>
				</div>
				<div role="tabpanel" id="panel28" class="slidevert out">
					<a href="https://www.tc.gc.ca/eng/railsafety/publications-46.htm">
						<figure>
							<img src="img/banff.jpg" alt="" />
							<figcaption>
								<p>Take Note: Grade Crossing Improvement Program (GCIP).</p>
							</figcaption>
						</figure>
					</a>
				</div>
				<div role="tabpanel" id="panel29" class="slidevert out">
					<a href="https://www.tc.gc.ca/eng/tankersafetyexpertpanel/menu.htm">
						<figure>
							<img src="img/investinourfuture.jpg" alt="" />
							<figcaption>
								<p>Take Note: Tanker Safety Expert Panel.</p>
							</figcaption>
						</figure>
					</a>
				</div>
			</div>
		</div>

		<section>
			<h4>Code</h4>
			<details>
				<summary>View code</summary>
				<pre><code>&lt;div class=&quot;wb-tabs carousel-s2 fast&quot;&gt;
	&lt;ul role=&quot;tablist&quot;&gt;
		&lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#panel27&quot;&gt;Tab 1: ...&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#panel28&quot;&gt;Tab 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>
		<h3>Carousel - Style 2 - Only one choice (slider controls and tranisitions are not applied)</h3>
		<div class="wb-tabs carousel-s2 show-thumbs playing slow">
			<ul role="tablist">
				<li><a href="#paneln2">Tab 2: Take Note: Grade Crossing Improvement Program (GCIP).</a></li>
			</ul>
			<div class="tabpanels">
				<div role="tabpanel" id="paneln2" class="in fade">
					<a href="https://www.tc.gc.ca/eng/railsafety/publications-46.htm">
						<figure>
							<img src="img/banff.jpg" alt="" />
							<figcaption>
								<p>Take Note: Grade Crossing Improvement Program (GCIP).</p>
							</figcaption>
						</figure>
					</a>
				</div>
			</div>
		</div>
	</section>
</section>
