Slider

Un slider permet de mettre plusieurs contenus à la suite qui défileront automatiquement, au clic sur un indicateur, ou au swipe.

Slider neutralisé sur desktop

Un slider peut parfois n'être utile que sur mobile, le contenu s'affichant normalement sur ordinateur. Utilisez la classe is-motionless-desktop pour désactiver son comportement sur ordinateur, tout en laissant le slider fonctionner parfaitement sur mobile. Cela permet ainsi de ne pas dupliquer le code HTML pour deux comportements différents.

Aperçu

Mode responsive

Slide 1

Enim culpa et ex velit. Laborum velit in ea id id non sunt eiusmod. Incididunt occaecat minim aute adipisicing. Ex incididunt tempor magna sit officia nostrud nostrud consectetur nostrud proident ut. Sit pariatur nisi proident culpa anim laboris dolore sit adipisicing eu nisi aliqua deserunt.

Slide 2

Excepteur aute cupidatat irure Lorem. Lorem cillum dolor esse sint. Adipisicing et Lorem velit nostrud pariatur ex eu laborum est. Velit eiusmod incididunt sit cupidatat adipisicing excepteur consequat cillum elit. Officia culpa id aliquip in cillum consequat Lorem excepteur sint.

Slide 3

Voluptate deserunt do ipsum tempor reprehenderit laborum ipsum laborum est qui. Dolor officia dolore duis dolor voluptate pariatur sunt velit. Amet esse sint voluptate duis id commodo dolor occaecat dolor fugiat aliqua ea.

                                                                <div class="is-motionless-desktop" data-slider="">
                                        <div class="columns" data-slider-pages="">
                                            <div class="column is-12-mobile is-4-tablet" data-slider-page="">
                                                <p class="title is-3">Slide 1</p>
                                                <p>Enim culpa et ex velit. Laborum velit in ea id id non sunt eiusmod. Incididunt
                                                    occaecat minim aute adipisicing. Ex incididunt tempor magna sit officia nostrud
                                                    nostrud consectetur nostrud proident ut. Sit pariatur nisi proident culpa anim
                                                    laboris dolore sit adipisicing eu nisi aliqua deserunt.</p>
                                            </div>
                                            <div class="column is-12-mobile is-4-tablet" data-slider-page="">
                                                <p class="title is-3">Slide 2</p>
                                                <p>Excepteur aute cupidatat irure Lorem. Lorem cillum dolor esse sint. Adipisicing et
                                                    Lorem velit nostrud pariatur ex eu laborum est. Velit eiusmod incididunt sit
                                                    cupidatat adipisicing excepteur consequat cillum elit. Officia culpa id aliquip in
                                                    cillum consequat Lorem excepteur sint.</p>
                                            </div>
                                            <div class="column is-12-mobile is-4-tablet" data-slider-page="">
                                                <p class="title is-3">Slide 3</p>
                                                <p>Voluptate deserunt do ipsum tempor reprehenderit laborum ipsum laborum est qui. Dolor
                                                    officia dolore duis dolor voluptate pariatur sunt velit. Amet esse sint voluptate
                                                    duis id commodo dolor occaecat dolor fugiat aliqua ea.</p>
                                            </div>
                                        </div>
                                    </div>

Slider animé simple

Veillez à ajouter le script Trilogy Slider afin d'animer le slider.

Aperçu

Mode responsive

Lancez l'année en

très haut débit

Jusqu'au 19/02

Lancez l'année en

très haut débit

Jusqu'au 19/02

Lancez l'année en

très haut débit

Jusqu'au 19/02

                                                                <div data-slider="">
                                        <div data-slider-duration="5000"></div>
                
                                        <div data-slides-container="" class="columns is-mobile is-0">
                                        <span class="icon is-medium is-circled has-background-white has-text-secondary" data-slider-prev="" aria-label="Précédent">
                                          <i class="tri-arrow-left" aria-hidden="true"></i>
                                        </span>
                                            <div data-slide="" class="column">
                                                <div class="columns">
                                                    <div class="column is-5 is-hidden-mobile">
                                                        <img src="https://www.bouyguestelecom.fr/static/wbm/assets/hub-npm/images/trois-smartphones-face-couleurs.jpg" alt="placeholder">
                                                    </div>
                                                    <div class="column is-4">
                                                        <p class="title is-size-5 is-marginless">Lancez l'année en</p>
                                                        <h2 class="title is-2 is-marginless">très haut débit</h2>
                                                    </div>
                                                    <div class="column is-5 is-hidden-desktop is-hidden-tablet">
                                                        <img src="https://www.bouyguestelecom.fr/static/wbm/assets/hub-npm/images/trois-smartphones-face-couleurs.jpg" alt="placeholder">
                                                    </div>
                                                    <div class="column is-3">
                                                        <p class="suptitle">Jusqu'au 19/02</p>
                                                        <button class="button  is-tertiary">J'en profite</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div data-slide="" class="column">
                                                <div class="columns">
                                                    <div class="column is-5 is-hidden-mobile">
                                                        <img src="https://www.bouyguestelecom.fr/static/wbm/assets/hub-npm/images/trois-smartphones-face-couleurs.jpg" alt="placeholder">
                                                    </div>
                                                    <div class="column is-4">
                                                        <p class="title is-size-5 is-marginless">Lancez l'année en</p>
                                                        <h2 class="title is-2 is-marginless">très haut débit</h2>
                                                    </div>
                                                    <div class="column is-5 is-hidden-desktop is-hidden-tablet">
                                                        <img src="https://www.bouyguestelecom.fr/static/wbm/assets/hub-npm/images/trois-smartphones-face-couleurs.jpg" alt="placeholder">
                                                    </div>
                                                    <div class="column is-3">
                                                        <p class="suptitle">Jusqu'au 19/02</p>
                                                        <button class="button  is-tertiary">J'en profite</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div data-slide="" class="column">
                                                <div class="columns">
                                                    <div class="column is-5 is-hidden-mobile">
                                                        <img src="https://www.bouyguestelecom.fr/static/wbm/assets/hub-npm/images/trois-smartphones-face-couleurs.jpg" alt="placeholder">
                                                    </div>
                                                    <div class="column is-4">
                                                        <p class="title is-size-5 is-marginless">Lancez l'année en</p>
                                                        <h2 class="title is-2 is-marginless">très haut débit</h2>
                                                    </div>
                                                    <div class="column is-5 is-hidden-desktop is-hidden-tablet">
                                                        <img src="https://www.bouyguestelecom.fr/static/wbm/assets/hub-npm/images/trois-smartphones-face-couleurs.jpg" alt="placeholder">
                                                    </div>
                                                    <div class="column is-3">
                                                        <p class="suptitle">Jusqu'au 19/02</p>
                                                        <button class="button  is-tertiary">J'en profite</button>
                                                    </div>
                                                </div>
                                            </div>
                
                                            <span class="icon is-medium is-circled has-background-white has-text-secondary" data-slider-next="" aria-label="Suivant">
                                                <i class="tri-arrow-right" aria-hidden="true"></i>
                                            </span>
                                        </div>
                                        <div data-progress-bar-container=""></div>
                                    </div>

Slider animé avec plusieurs colonnes

Une version du slider qui vous permet d'afficher plusieurs colonnes en même temps. Comme son nom l'indique, l'idée est d'utiliser la classe CSS Trilogy columns.

Aperçu

Mode responsive

Lancez l'année en

très haut débit

Jusqu'au 19/02

Lancez l'année en

très haut débit

Jusqu'au 19/02

Lancez l'année en

très haut débit

Jusqu'au 19/02

                                                                <div data-slider="">
                                        <div data-slider-duration="0"></div>
                
                                        <div data-slides-container="" class="columns is-mobile is-0">
                                            <span class="icon is-medium is-circled has-background-white has-text-secondary" data-slider-prev="" aria-label="Précédent">
                                              <i class="tri-arrow-left" aria-hidden="true"></i>
                                            </span>
                                            <div data-slide="" class="column is-6-desktop is-11-mobile">
                                                <div class="columns">
                                                    <div class="column is-5 is-hidden-mobile">
                                                        <img src="https://www.bouyguestelecom.fr/static/wbm/assets/hub-npm/images/trois-smartphones-face-couleurs.jpg" alt="placeholder">
                                                    </div>
                                                    <div class="column is-4">
                                                        <p class="title is-size-5 is-marginless">Lancez l'année en</p>
                                                        <h2 class="title is-2 is-marginless">très haut débit</h2>
                                                    </div>
                                                    <div class="column is-5 is-hidden-desktop is-hidden-tablet">
                                                        <img src="https://www.bouyguestelecom.fr/static/wbm/assets/hub-npm/images/trois-smartphones-face-couleurs.jpg" alt="placeholder">
                                                    </div>
                                                    <div class="column is-3">
                                                        <p class="suptitle">Jusqu'au 19/02</p>
                                                        <button class="button  is-tertiary">J'en profite</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div data-slide="" class="column is-6-desktop is-11-mobile">
                                                <div class="columns">
                                                    <div class="column is-5 is-hidden-mobile">
                                                        <img src="https://www.bouyguestelecom.fr/static/wbm/assets/hub-npm/images/trois-smartphones-face-couleurs.jpg" alt="placeholder">
                                                    </div>
                                                    <div class="column is-4">
                                                        <p class="title is-size-5 is-marginless">Lancez l'année en</p>
                                                        <h2 class="title is-2 is-marginless">très haut débit</h2>
                                                    </div>
                                                    <div class="column is-5 is-hidden-desktop is-hidden-tablet">
                                                        <img src="https://www.bouyguestelecom.fr/static/wbm/assets/hub-npm/images/trois-smartphones-face-couleurs.jpg" alt="placeholder">
                                                    </div>
                                                    <div class="column is-3">
                                                        <p class="suptitle">Jusqu'au 19/02</p>
                                                        <button class="button  is-tertiary">J'en profite</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div data-slide="" class="column is-6-desktop is-11-mobile">
                                                <div class="columns">
                                                    <div class="column is-5 is-hidden-mobile">
                                                        <img src="https://www.bouyguestelecom.fr/static/wbm/assets/hub-npm/images/trois-smartphones-face-couleurs.jpg" alt="placeholder">
                                                    </div>
                                                    <div class="column is-4">
                                                        <p class="title is-size-5 is-marginless">Lancez l'année en</p>
                                                        <h2 class="title is-2 is-marginless">très haut débit</h2>
                                                    </div>
                                                    <div class="column is-5 is-hidden-desktop is-hidden-tablet">
                                                        <img src="https://www.bouyguestelecom.fr/static/wbm/assets/hub-npm/images/trois-smartphones-face-couleurs.jpg" alt="placeholder">
                                                    </div>
                                                    <div class="column is-3">
                                                        <p class="suptitle">Jusqu'au 19/02</p>
                                                        <button class="button  is-tertiary">J'en profite</button>
                                                    </div>
                                                </div>
                                            </div>
                
                                            <span class="icon is-medium is-circled has-background-white has-text-secondary" data-slider-next="" aria-label="Suivant">
                                              <i class="tri-arrow-right" aria-hidden="true"></i>
                                            </span>
                                        </div>
                
                                        <div data-slider-dots="" class="is-inverted"></div>
                                    </div>

Slider animé avec preview

Une version du slider avec la slide suivante prévisualisable. Utilisez la classe is-11 de manière à laisser apparente une partie de la slide suivante.

Aperçu

Mode responsive

                                                                <div data-slider="">
                                        <div data-slider-duration="5000"></div>
                
                                        <div data-slides-container="" class="columns is-mobile is-0">
                                            <span class="icon is-medium is-circled has-background-white has-text-secondary" data-slider-prev="" aria-label="Précédent">
                                                <i class="tri-arrow-left" aria-hidden="true"></i>
                                            </span>
                                            <div data-slide="" class="column is-11">
                                                <img src="/shiba-inu.6b93d6c0.jpg" alt="Un shiba">
                                            </div>
                                            <div data-slide="" class="column is-11">
                                                <img src="/shiba-inu.6b93d6c0.jpg" alt="Un shiba">
                                            </div>
                                            <div data-slide="" class="column is-11">
                                                <img src="/shiba-inu.6b93d6c0.jpg" alt="Un shiba">
                                            </div>
                
                                            <span class="icon is-medium is-circled has-background-white has-text-secondary" data-slider-next="" aria-label="Suivant">
                                                <i class="tri-arrow-right" aria-hidden="true"></i>
                                            </span>
                                        </div>
                
                                        <div data-slider-dots="" class="is-inverted"></div>
                                    </div>