- Skip to main content
- Skip to "About this site"

# Tabbed Interface - Carousel

- Documentation
- Questions or comments?

## Purpose

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

## Carousel style 1 example (`carousel-s1`)

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

Take Note: Renewal of the Aviation Document Booklet.

Take Note: Grade Crossing Improvement Program (GCIP).

Take Note: Tanker Safety Expert Panel.

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

## Carousel style 2 example (`carousel-s2`)

Take Note: Renewal of the Aviation Document Booklet.

Take Note: Grade Crossing Improvement Program (GCIP).

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>

## Carousel style 2 with thumbnails example (`carousel-s2 show-thumbs`)

Take Note: Renewal of the Aviation Document Booklet.

Take Note: Grade Crossing Improvement Program (GCIP).

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

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

Take Note: Renewal of the Aviation Document Booklet.

Take Note: Grade Crossing Improvement Program (GCIP).

Take Note: Tanker Safety Expert Panel.

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

- Tab 1: Take Note: Renewal of the Aviation Document Booklet.

Take Note: Renewal of the Aviation Document Booklet.

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

- Tab 1: Take Note: Renewal of the Aviation Document Booklet.
- Tab 2: Take Note: Grade Crossing Improvement Program (GCIP).
- Ŧab 3: Take Note: Tanker Safety Expert Panel.

Take Note: Renewal of the Aviation Document Booklet.

Take Note: Grade Crossing Improvement Program (GCIP).

Take Note: Tanker Safety Expert Panel.

### 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}'`)

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

Take Note: Renewal of the Aviation Document Booklet.

Take Note: Grade Crossing Improvement Program (GCIP).

Take Note: Tanker Safety Expert Panel.

#### Code

View code

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

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

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

Take Note: Renewal of the Aviation Document Booklet.

Take Note: Grade Crossing Improvement Program (GCIP).

Take Note: Tanker Safety Expert Panel.

#### Code

View code

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

## Multimedia player example

- Tab 1
- Tab 2

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="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="../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="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/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`)

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

Take Note: Renewal of the Aviation Document Booklet.

Take Note: Grade Crossing Improvement Program (GCIP).

Take Note: Tanker Safety Expert Panel.

#### 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`)

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

Take Note: Renewal of the Aviation Document Booklet.

Take Note: Grade Crossing Improvement Program (GCIP).

Take Note: Tanker Safety Expert Panel.

#### 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`)

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

Take Note: Renewal of the Aviation Document Booklet.

Take Note: Grade Crossing Improvement Program (GCIP).

Take Note: Tanker Safety Expert Panel.

#### 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)

- Tab 2: Take Note: Grade Crossing Improvement Program (GCIP).

Take Note: Grade Crossing Improvement Program (GCIP).

Date modified:
  2018-04-18