Interface à onglets - Carrousel
But
Comprime plusieurs images et légendes superposées et fourni des controls qui permettent à l'utilisateur de choisi l'image à afficher.
Carrousel - Style 1 - Exemple (carousel-s1)
Code
Visualiser le code
<div class="wb-tabs carousel-s1">
<ul role="tablist">
<li class="active"><a href="#panel1">Onglet 1: ...</a></li>
<li><a href="#panel2">Onglet 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>Carrousel - Style 2 - Exemple
Exemple
Visualiser le code
<div class="wb-tabs carousel-s2">
<ul role="tablist">
<li class="active"><a href="#panel4">Onglet 1: ...</a></li>
<li><a href="#panel5">Onglet 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>Carrousel - Style 1 - Exemple (carousel-s1)
Carrousel - Style 2 avec imagette - Exemple (carousel-s2 show-thumbs)
Code
Visualiser le 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="Onglet 1: ..." /></a></li>
<li><a href="#panel31"><img src="img/banff.jpg" alt="Onglet 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>Exemple en grilles
Carrousel - Style 1 - col-sm-6 col-md-4
Carrousel - Style 1 - Une option (pas des légendes superposées et des controls)
Carrousel - Style 2 - col-sm-6 col-md-8
Code
Visualiser le code
<div class="row">
<section class="col-sm-6 col-md-4">
<h3>Carrousel - 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>Carrousel - 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>Changement de la vitesse de rotation
Attribut « data » - Exemple (data-wb-tabs='{"interval": 3}')
Code
Visualiser le code
<div class="wb-tabs carousel-s2" data-wb-tabs='{"interval": 3}'>Classes CSS - Exemple (slow, fast)
Code
Visualiser le code
<div class="wb-tabs carousel-s2" data-wb-tabs='{"interval": 3}'>Exemple avec le lecteur multimédia
Trouver un emploi (Transcription)
Développement des compétences (Transcription)
Code
Visualiser le 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">Onglet 1</a></li>
<li><a href="#panel20">Onglet 2</a></li>
</ul>
<div class="tabpanels">
<div role="tabpanel" id="panel19" class="in fade">
<figure class="wb-mltmd">
<video poster="../multimedia/demo/video1-fr.jpg" title="Trouver un emploi">
<source type="video/webm" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-fra.webm" />
<source type="video/mp4" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-fra.mp4" />
<track src="../multimedia/cpts-lg-fr.html" kind="captions" data-type="text/html" srclang="fr" label="Français" />
</video>
<figcaption>
<p>Trouver un emploi (<a href="../multimedia/cpts-lg-fr.html">Transcription</a>)</p>
</figcaption>
</figure>
</div>
<div role="tabpanel" id="panel20" class="out fade">
<figure class="wb-mltmd">
<video poster="../multimedia/demo/video2-fr.jpg" title="Développement des compétences">
<source type="video/webm" src="http://video2.servicecanada.gc.ca/video/boew-wet/dc-td-fra.webm" />
<source type="video/mp4" src="http://video2.servicecanada.gc.ca/video/boew-wet/dc-td-fra.mp4" />
<track src="../multimedia/demo/video2-captions-fr.xml" kind="captions" data-type="application/ttml+xml" srclang="fr" label="Français" />
</video>
<figcaption>
<p>Développement des compétences (<a href="../multimedia/cpts-lg2-fr.html">Transcription</a>)</p>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>Transitions CSS
Fondu - Exemple (fade)
Code
Visualiser le code
<div class="wb-tabs carousel-s2">
<ul role="tablist">
<li class="active"><a href="#panel21">Onglet 1: ...</a></li>
<li><a href="#panel22">Onglet 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>Coulisse - Horizontal - Exemple (slide)
Code
Visualiser le code
<div class="wb-tabs carousel-s2">
<ul role="tablist">
<li class="active"><a href="#panel24">Onglet 1: ...</a></li>
<li><a href="#panel25">Onglet 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>Coulisse - Vertical - Exemple (slidevert)
Code
Visualiser le code
<div class="wb-tabs carousel-s2">
<ul role="tablist">
<li class="active"><a href="#panel27">Onglet 1: ...</a></li>
<li><a href="#panel28">Onglet 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>Carrousel - Style 2 - Une option (pas des légendes superposées et des controls)
Signaler un problème sur cette page
- Date de modification :