- Passer au contenu principal
- Passer à « À propos de ce site »

# Interface à onglets - Carrousel

- Documentation
- Questions ou commentaires?

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

- Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation.
- Onglet 2: Prenez note : Programme d'amélioration des passages à niveau (PAPN).
- Onglet 3: Prenez note : Tanker Groupe d'experts sur la sécurité.

Prenez note : Renouvellement du carnet de documents d'aviation.

Prenez note : Programme d'amélioration des passages à niveau (PAPN).

Prenez note : Tanker Groupe d'experts sur la sécurité.

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

- Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation.
- Onglet 2: Prenez note : Programme d'amélioration des passages à niveau (PAPN).
- Onglet 3: Prenez note : Tanker Groupe d'experts sur la sécurité.

Prenez note : Renouvellement du carnet de documents d'aviation.

Prenez note : Programme d'amélioration des passages à niveau (PAPN).

Prenez note : Tanker Groupe d'experts sur la sécurité.

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

- Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation.
- Onglet 2: Prenez note : Programme d'amélioration des passages à niveau (PAPN).
- Onglet 3: Prenez note : Tanker Groupe d'experts sur la sécurité.

Prenez note : Renouvellement du carnet de documents d'aviation.

Prenez note : Programme d'amélioration des passages à niveau (PAPN).

Prenez note : Tanker Groupe d'experts sur la sécurité.

## Carrousel - Style 2 avec imagette - Exemple (`carousel-s2 show-thumbs`)

Prenez note : Renouvellement du carnet de documents d'aviation.

Prenez note : Programme d'amélioration des passages à niveau (PAPN).

Prenez note : Tanker Groupe d'experts sur la sécurité.

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

- Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation.
- Onglet 2: Prenez note : Programme d'amélioration des passages à niveau (PAPN).
- Onglet 3: Prenez note : Tanker Groupe d'experts sur la sécurité.

Prenez note : Renouvellement du carnet de documents d'aviation.

Prenez note : Programme d'amélioration des passages à niveau (PAPN).

Prenez note : Tanker Groupe d'experts sur la sécurité.

### Carrousel - Style 1 - Une option (pas des légendes superposées et des controls)

- Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation.

Prenez note : Renouvellement du carnet de documents d'aviation.

### Carrousel - Style 2 - col-sm-6 col-md-8

- Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation.
- Onglet 2: Prenez note : Programme d'amélioration des passages à niveau (PAPN).
- Onglet 3: Prenez note : Tanker Groupe d'experts sur la sécurité.

Prenez note : Renouvellement du carnet de documents d'aviation.

Prenez note : Programme d'amélioration des passages à niveau (PAPN).

Prenez note : Tanker Groupe d'experts sur la sécurité.

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

- Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation.
- Onglet 2: Prenez note : Programme d'amélioration des passages à niveau (PAPN).
- Onglet 3: Prenez note : Tanker Groupe d'experts sur la sécurité.

Prenez note : Renouvellement du carnet de documents d'aviation.

Prenez note : Programme d'amélioration des passages à niveau (PAPN).

Prenez note : Tanker Groupe d'experts sur la sécurité.

#### Code

Visualiser le code

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

### Classes CSS - Exemple (`slow`, `fast`)

- Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation.
- Onglet 2: Prenez note : Programme d'amélioration des passages à niveau (PAPN).
- Onglet 3: Prenez note : Tanker Groupe d'experts sur la sécurité.

Prenez note : Renouvellement du carnet de documents d'aviation.

Prenez note : Programme d'amélioration des passages à niveau (PAPN).

Prenez note : Tanker Groupe d'experts sur la sécurité.

#### Code

Visualiser le code

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

## Exemple avec le lecteur multimédia

- Onglet 1
- Onglet 2

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

- Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation.
- Onglet 2: Prenez note : Programme d'amélioration des passages à niveau (PAPN).
- Onglet 3: Prenez note : Tanker Groupe d'experts sur la sécurité.

Prenez note : Renouvellement du carnet de documents d'aviation.

Prenez note : Programme d'amélioration des passages à niveau (PAPN).

Prenez note : Tanker Groupe d'experts sur la sécurité.

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

- Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation.
- Onglet 2: Prenez note : Programme d'amélioration des passages à niveau (PAPN).
- Onglet 3: Prenez note : Tanker Groupe d'experts sur la sécurité.

Prenez note : Renouvellement du carnet de documents d'aviation.

Prenez note : Programme d'amélioration des passages à niveau (PAPN).

Prenez note : Tanker Groupe d'experts sur la sécurité.

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

- Onglet 1: Prenez note : Renouvellement du carnet de documents d'aviation.
- Onglet 2: Prenez note : Programme d'amélioration des passages à niveau (PAPN).
- Onglet 3: Prenez note : Tanker Groupe d'experts sur la sécurité.

Prenez note : Renouvellement du carnet de documents d'aviation.

Prenez note : Programme d'amélioration des passages à niveau (PAPN).

Prenez note : Tanker Groupe d'experts sur la sécurité.

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

Prenez note : Renouvellement du carnet de documents d'aviation.

Date de modification :
  2018-04-18