Slider

Options

Classe Niveau Description
.slider Parent Créer un diaporama.
.sliderNav Parent Ajouter les flèches précédent et suivant.
.sliderDots Parent Ajouter les points de navigation.
.sliderExpand Parent Permettre l'affichage en plein écran du diaporama.
.sliderAuto Parent Faire défiler automatiquement les diaporamas.
.sliderAutoHeight Parent La hauteur du diaporama change suivant la hauteur des images.
.fullscreenSlider Parent Créer un diaporama uniquement visible en plein écran.
.openFullscreenSlider Afficher le slider renseigné dans l'attribut data-target.
data-color Parent Définir la couleur du thème.
data-caption Enfant Créer une légende à une image.

Un diaporama d'images à une hauteur fixe par défault, calculée sur la hauteur de la plus petite image.
La classe sliderAutoHeight permet d'inverser ce comportement.

Un diaporama de contenu n'a pas de hauteur fixe sauf si les hauteur des diapositives sont fixées par une classe (.height50 par exemple).
Un diaporama de contenu possède une marge intérieure suivant les éléments de navigation affichées (flèches / points de navigation).

Dans un diaporama en plein écran, les points de navigation sont visibles uniquement si le nombre de diapositives est inférieure à 10.

Ne pas utiliser la classe .sliderExpand avec un diaporama de contenu.

Slider avec images

Exemple 1

  • Aperçu
  • Code
<div class="slider sliderDots sliderNav sliderExpand sliderAuto" data-color="white">
    <img src="https://loremflickr.com/1920/1080/all?random=1" data-caption="Image 1">
    <img src="https://loremflickr.com/1920/1080/all?random=2" data-caption="Image 2">
    <img src="https://loremflickr.com/1920/1080/all?random=3" data-caption="Image 3">
    <img src="https://loremflickr.com/1920/1080/all?random=4" data-caption="Image 4">
    <img src="https://loremflickr.com/1920/1080/all?random=5" data-caption="Image 5">
    <img src="https://loremflickr.com/1920/1080/all?random=6" data-caption="Image 6">
    <img src="https://loremflickr.com/1920/1080/all?random=7" data-caption="Image 7">
</div>

Exemple 2

  • Aperçu
  • Code
<div class="slider sliderNav sliderExpand" data-color="blue">
    <img src="https://loremflickr.com/1920/1080/all?random=1">
    <img src="https://loremflickr.com/1200/1200/all?random=2">
    <img src="https://loremflickr.com/640/320/all?random=3">
    <img src="https://loremflickr.com/1920/1200/all?random=4">
    <img src="https://loremflickr.com/1024/2048/all?random=5">
</div>

Exemple 3

  • Aperçu
  • Code
<div class="slider sliderNav sliderAutoHeight" data-color="red">
    <img src="https://loremflickr.com/1920/1080/all?random=1">
    <img src="https://loremflickr.com/1200/1200/all?random=2">
    <img src="https://loremflickr.com/640/320/all?random=3">
    <img src="https://loremflickr.com/1920/1200/all?random=4">
    <img src="https://loremflickr.com/1024/2048/all?random=5">
</div>

Slider avec contenu

Exemple 1

  • Aperçu
  • Code

Proin eu convallis neque. Donec sed sem dui. Maecenas ut pellentesque eros. Curabitur nunc ligula, dignissim et lobortis et, tristique quis eros. Suspendisse rhoncus est in felis dapibus bibendum. Etiam libero magna, molestie quis orci vel, aliquet pulvinar ipsum. Aenean id elit quis enim hendrerit aliquet. Phasellus tempus risus risus, a condimentum turpis lobortis eget.

Proin eu convallis neque. Donec sed sem dui. Maecenas ut pellentesque eros. Curabitur nunc ligula, dignissim et lobortis et, tristique quis eros. Suspendisse rhoncus est in felis dapibus bibendum. Etiam libero magna, molestie quis orci vel, aliquet pulvinar ipsum. Aenean id elit quis enim hendrerit aliquet. Phasellus tempus risus risus, a condimentum turpis lobortis eget.

Proin eu convallis neque. Donec sed sem dui. Maecenas ut pellentesque eros. Curabitur nunc ligula, dignissim et lobortis et, tristique quis eros. Suspendisse rhoncus est in felis dapibus bibendum. Etiam libero magna, molestie quis orci vel, aliquet pulvinar ipsum. Aenean id elit quis enim hendrerit aliquet. Phasellus tempus risus risus, a condimentum turpis lobortis eget.

<div class="slider sliderNav sliderDots" data-color="green">
    <div>
        <div class="card radius shadow removePadding">
            <img src="https://framework.surikat.fr/0.2/web/images/wallpapers/01.jpg">
            <p class="padding">Proin eu convallis neque. Donec sed sem dui. Maecenas ut pellentesque eros. Curabitur nunc ligula, dignissim et lobortis et, tristique quis eros. Suspendisse rhoncus est in felis dapibus bibendum. Etiam libero magna, molestie quis orci vel, aliquet pulvinar ipsum. Aenean id elit quis enim hendrerit aliquet. Phasellus tempus risus risus, a condimentum turpis lobortis eget.</p>
        </div>
    </div>
    <div>
        <div class="grid6 grid12M gutter">
            <div>
                <p>Proin eu convallis neque. Donec sed sem dui. Maecenas ut pellentesque eros. Curabitur nunc ligula, dignissim et lobortis et, tristique quis eros. Suspendisse rhoncus est in felis dapibus bibendum. Etiam libero magna, molestie quis orci vel, aliquet pulvinar ipsum. Aenean id elit quis enim hendrerit aliquet. Phasellus tempus risus risus, a condimentum turpis lobortis eget.</p>
            </div>
            <div>
                <p>Proin eu convallis neque. Donec sed sem dui. Maecenas ut pellentesque eros. Curabitur nunc ligula, dignissim et lobortis et, tristique quis eros. Suspendisse rhoncus est in felis dapibus bibendum. Etiam libero magna, molestie quis orci vel, aliquet pulvinar ipsum. Aenean id elit quis enim hendrerit aliquet. Phasellus tempus risus risus, a condimentum turpis lobortis eget.</p>
            </div>
        </div>
    </div>
</div>

Exemple 2

Cascade d'eau

Proin eu convallis neque. Donec sed sem dui. Maecenas ut pellentesque eros. Curabitur nunc ligula, dignissim et lobortis et, tristique quis eros. Suspendisse rhoncus est in felis dapibus bibendum. Etiam libero magna, molestie quis orci vel, aliquet pulvinar ipsum. Aenean id elit quis enim hendrerit aliquet. Phasellus tempus risus risus, a condimentum turpis lobortis eget.

Plage de sable fins

<div class="slider sliderNav">
    <div class="height50">
        <img class="imgCover" src="https://framework.surikat.fr/0.2/web/images/wallpapers/01.jpg">
        <p class="positionCenter fs30 white">Cascade d'eau</p>
    </div>
    <div class="height50">
        <p class="positionCenter width75">Proin eu convallis neque. Donec sed sem dui. Maecenas ut pellentesque eros. Curabitur nunc ligula, dignissim et lobortis et, tristique quis eros. Suspendisse rhoncus est in felis dapibus bibendum. Etiam libero magna, molestie quis orci vel, aliquet pulvinar ipsum. Aenean id elit quis enim hendrerit aliquet. Phasellus tempus risus risus, a condimentum turpis lobortis eget.</p>
    </div>
    <div class="height50">
        <img class="imgCover" src="https://framework.surikat.fr/0.2/web/images/wallpapers/landscape.jpg">
        <p class="positionCenter fs30 white">Plage de sable fins</p>
    </div>
</div>

Slider plein écran

  • Aperçu
  • Code
<div class="fullscreenSlider" id="fullscreenSlider1">
        <img src="https://framework.surikat.fr/0.2/web/images/wallpapers/01.jpg" data-caption="Cascade d'eau">
        <img src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg" data-caption="Forêt d'automne">
        <img src="https://framework.surikat.fr/0.2/web/images/wallpapers/03.jpg" data-caption="Coucher de soleil">
    </div>
    <div class="center paddingXXL">
        <button class="openFullscreenSlider bgColor1" data-target="fullscreenSlider1">Afficher le diaporama</button>
    </div>