Tabbed Interface - Carousel

Looking for WET v3.1?

As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.

Purpose

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

Carousel style 1 example (`carousel-s1`)

Panel 1 — Take Note: Renewal of the Aviation Document Booklet
Learn more about air transportation in Canada.

Panel 2 — Take Note: Grade Crossing Improvement Program (GCIP)
Learn more about rail transportation in Canada.

Panel 3 — Take Note: Tanker Safety Expert Panel
Learn more about marine transportation in Canada.

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

Carousel style 2 example (`carousel-s2`)

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

Grids example

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

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

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="http://www.servicecanada.gc.ca/eng/video/images/te-lj-eng.jpg" title="Looking for a Job">
							<source type="video/webm" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-eng.webm" />
							<source type="video/mp4" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-eng.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="http://www.servicecanada.gc.ca/eng/video/lj.shtml">Transcript</a>)</p>
						</figcaption>
					</figure>
				</div>
				<div role="tabpanel" id="panel20" class="out fade">
					<figure class="wb-mltmd">
						<video poster="http://www.servicecanada.gc.ca/eng/video/images/dc-td-eng.jpg" title="Training and Development">
							<source type="video/webm" src="http://video2.servicecanada.gc.ca/video/boew-wet/dc-td-eng.webm" />
							<source type="video/mp4" src="http://video2.servicecanada.gc.ca/video/boew-wet/dc-td-eng.mp4" />
							<track src="../multimedia/cpts-lg2-en.html" kind="captions" data-type="text/html" srclang="en" label="English" />
						</video>
						<figcaption>
							<p>Training and Development (<a href="http://www.servicecanada.gc.ca/eng/video/td.shtml">Transcript</a>)</p>
						</figcaption>
					</figure>
				</div>
			</div>
		</div>
	</div>
</div>

CSS Transitions

Fade example (`fade`)

Code

View code

<div class="row">
	<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>
</div>

Slide - Horizontal example (`slide`)

Code

View code

<div class="row">
	<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>
</div>

Slide - Vertical example (`slidevert`)

Code

View code

<div class="row">
	<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>
</div>

Date modified:: 2014-08-01

Language selection

Search and menus

Search

Tabbed Interface - Carousel

Looking for WET v3.1?

Purpose

Carousel style 1 example (`carousel-s1`)

Code

Carousel style 2 example (`carousel-s2`)

Code

Grids example

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

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

Code

Change rotation speed

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

Code

CSS classes example (`slow`, `fast`)

Code

Multimedia player example

Code

CSS Transitions

Fade example (`fade`)

Code

Slide - Horizontal example (`slide`)

Code

Slide - Vertical example (`slidevert`)

Code

Tabbed Interface - Carousel

Looking for WET v3.1?

Purpose

Carousel style 1 example (carousel-s1)

Code

Carousel style 2 example (carousel-s2)

Code

Grids example

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

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

Code

Change rotation speed

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

Code

CSS classes example (slow, fast)

Code

Multimedia player example

Code

CSS Transitions

Fade example (fade)

Code

Slide - Horizontal example (slide)

Code

Slide - Vertical example (slidevert)

Code

Carousel style 1 example (`carousel-s1`)

Carousel style 2 example (`carousel-s2`)

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

CSS classes example (`slow`, `fast`)

Fade example (`fade`)

Slide - Horizontal example (`slide`)

Slide - Vertical example (`slidevert`)