This is not a Government of Canada website
The purpose of this website is to provide a working example of the WET-BOEW-GCWeb theme created by TNG Consulting Inc. together with the Government of Canada for Moodle software . Demo courses are only available in English however multi-language courses are supported.
Tabbed interface (Caroussel) - Broken
Style 1
Carousel style 1 example (carousel-s1)
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
Carousel style 2 example (carousel-s2)
- Previous
-
Item1 of 3
- Next
- Play - Start tab rotation
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
Carousel style 2 with thumbnails example (carousel-s2 show-thumbs)
- Previous
-
Item1 of 3
- Next
- Play - Start tab rotation
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
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
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