Diaporama redimensionnable...

Prescillia Nierichlo
Javascript

Bonjour tout le monde pour mon projet de stage, je dois mettre un carrousel/diaporama/slider dans un tout petit espace ! et je ne trouve que des grand sur diaporama :(
Il faudrai qu'il puisse tourner tout seul, si vous avez des exemples... Je tente le coup merci

8 réponses

T3kL
Réponse acceptée

Salut.
Je te conseille BxSlider, facile à mettre en oeuvre et tu peux le réduire à la taille que tu veux (dans un div avec une taille fixée). Par ailleurs il est responsive.

T3kL
Réponse acceptée

Un petit test : http://codepen.io/anon/pen/BduKr
Ne dis pas que ça ne fonctionne pas si tu ne sais pas l'utiliser..

Prescillia Nierichlo
Auteur

Merci beaucoup je vais essayer !!

Prescillia Nierichlo
Auteur

Non ça ne va pas il ne fonctionne plus quand on est à mois de 35% de sa taille initial et c'est beaucoup trop grand...
Il me faut maximum du 200px par 200px :(

Prescillia Nierichlo
Auteur

Ah bah mince désolé :( j'ai pas trouvé ou dans le css tu réduit la taille sans que ça fasse tout bugger x(
Tu peux m'aiguiller ? je ne voudrai pas faire un vulgaire copier/coller de ton code sans savoir ce que tu as fait...

Par exemple est ce que je peux changer le height?

Merci d'avance !

T3kL

Il faut que tu mettes le slider dans un div avec une taille définie (genre <div style="width:200px;"> ).
Pour la hauteur, ça dépendra du ratio L / l de ton image.

Prescillia Nierichlo
Auteur

Voila je vois que la il y a la hauteur... Mais je ne le trouve nul par dans le css et quand je le modifie directement sur mon navigateur dès que l'image change la valeur se remet a 62px :(

<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 62px;">
T3kL

Le slider adapte la hauteur automatiquement en fonction de la largeur du container. C'est à dire qu'il ne modifiera jamais le ratio Longueur / largeur afin de ne pas la déformer. Le plus simple est peut-être que tu modifies les images pour avoir une largeur de 200px, et la hauteur de ton choix.