NOT working examples

This is not a Government of Canada website

The purpose of this website is to provide a working example of the WET-BOEW-Moodle theme created by TNG Consulting Inc. together with the Government of Canada. Demo courses are only available in English however multi-language courses are supported.

Tabbed interface (Caroussel) - Broken

Style guide information

Style 1

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="https://wet-boew.github.io/v4.0-ci/demos/tabs/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>

Style 2

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>

Style 2 with thumbnails

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>

Grid

Grids example

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

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

CSS Transitions

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)

Last modified: Monday, 26 August 2019, 11:39 PM
Date modified: