Tabbed Interface - Carousel

Avoid promotional carousels, improve web contents

Read the article on the canada.ca blog to learn more.

Purpose

Dynamically stacks multiple images and captions into a carousel (or slider) widget.

Code

View code 
<div class="wb-tabs carousel-s1">
	<ul role="tablist">
		<li class="active"><a href="#panel1">Tab 1: ...</a></li>
		<li><a href="#panel2">Tab 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>
  • Tab 1: Take Note: Renewal of the Aviation Document Booklet.
  • Tab 2: Take Note: Grade Crossing Improvement Program (GCIP).
  • Tab 3: Take Note: Tanker Safety Expert Panel.

Code

View code 
<div class="wb-tabs carousel-s2">
	<ul role="tablist">
		<li class="active"><a href="#panel4"><img src="img/protect-environment.jpg" alt="Tab 1: ..." /></a></li>
		<li><a href="#panel5"><img src="img/banff.jpg" alt="Tab 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>
  • Tab 1: Take Note: Renewal of the Aviation Document Booklet.
  • Tab 2: Take Note: Grade Crossing Improvement Program (GCIP).
  • Tab 3: Take Note: Tanker Safety Expert Panel.

Code

View 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="Tab 1: ..." /></a></li>
		<li><a href="#panel31"><img src="img/banff.jpg" alt="Tab 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>

Grids example

Carousel style 1 - col-sm-6 col-md-4

Carousel - Style 1 - Only one choice (slider controls and tranisitions are not applied)

Carousel style 2 - col-sm-6 col-md-8

Code

View code 
<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">
				...
			</ul>
			<div class="tabpanels">
				...
			</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">
				...
			</ul>
			<div class="tabpanels">
				...
			</div>
		</div>
	</section>
</div>

Change rotation speed

Data attribute example (data-wb-tabs='{"interval": 3}')

Code

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

CSS classes example (slow, fast)

Code

View code 
<div class="wb-tabs carousel-s2 fast">

Multimedia player example

Looking for a Job (Transcript)

Training and Development (Transcript)

Code

View 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">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>

CSS Transitions

Fade example (fade)

Code

View code 
<div class="wb-tabs carousel-s2 fast">
	<ul role="tablist">
		<li class="active"><a href="#panel21">Tab 1: ...</a></li>
		<li><a href="#panel22">Tab 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>

Slide - Horizontal example (slide)

Code

View code 
<div class="wb-tabs carousel-s2 fast">
	<ul role="tablist">
		<li class="active"><a href="#panel24">Tab 1: ...</a></li>
		<li><a href="#panel25">Tab 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>

Slide - Vertical example (slidevert)

Code

View code 
<div class="wb-tabs carousel-s2 fast">
	<ul role="tablist">
		<li class="active"><a href="#panel27">Tab 1: ...</a></li>
		<li><a href="#panel28">Tab 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>

Carousel - Style 2 - Only one choice (slider controls and tranisitions are not applied)

Date modified: