slider 100% responsive |
Répondre | Page 123 5> |
Auteur |
Sujet Recherche Options des sujets
|
||
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(4)
Envoyé : 23 Feb 2016 à 14:31 |
||
Voici un tutoriel pour avoir un slider 100% responsive qui s'adapte à la fois en hauteur et largeur.
Il s'agit du plugin flexslider. Comme indiqué sur leur site, la mise en place du plugin est du plus simple mais pour ceux qui ne comprennent pas l'anglais ou qui n'ont pas la force de tester dans OE , voici le tutoriel. Téléchargez le plugin directement sur leur site, ou bien cliquez sur ce lien. Une fois téléchargé, décompressez le fichier zip et ouvrez le dossier woothemes-FlexSlider-9a419a0 Copier l'ensemble des éléments à l'intérieur et allez dans votre projet (celui qui est dans Mes documents / openelement) Créez un dossier au nom de flexslider Ouvrez le, et coller les éléments copiés avant dedans Deuxième phase : Créez un dossier pour les images en passant par l'icone Ressources d'OE (onglet Projet) Donnez lui le nom FLEXSLIDER_IMAGES Mettez dedans vos images que vous souhaitez voir apparaître dans votre slider Troisième phase : Mettez un bloc de code source sur votre page. Spécifier le type en Otherscript et sa position en Header Copiez ce code :
Mettez ensuite un autre bloc de code source Spécifier le type en javascript et sa position en Endbody Copiez ce code :
Quatrième phase : Mettez ensuite un bloc de code visuel sur votre page. Si votre projet est en relative (ou le panneau d'éléments où vous mettez le bloc de code visuel), pensez à centrer celui-ci. Mettez lui ensuite une une largeur à 100% (et non en pixels) N'importe quelle hauteur ne posera pas de souci par contre. Dedans, mettez le code suivant :
Comme vous pouvez le voir, j'ai indiqué les liens des images contenu dans mon dossier créé auparavant. Testez et vous verrez que votre slider s'adapte automatiquement selon les images que vous avez mises. Si bien sur vous mettez des images plus hautes que larges, ne vous en étonnez pas. Il faut impérativement donc les retravailler avant pour essayer de garder un aspect ratio cohérent. Voici un site utilisant ce slider. Edité par brolysan - 23 Feb 2016 à 14:45 |
|||
cannel
Newbie Depuis le: 08 Mar 2016 Pays: Cote d'ivoire Status: Inactif Points: 8 |
Options des messages
Thanks(1)
|
||
Merci c'est genial
|
|||
j'adore l'informatique
|
|||
ridp
Senior Member Depuis le: 18 Nov 2007 Pays: France Status: Inactif Points: 286 |
Options des messages
Thanks(1)
|
||
bonsoir,
que dire sinon merci kenavo |
|||
ridp
Senior Member Depuis le: 18 Nov 2007 Pays: France Status: Inactif Points: 286 |
Options des messages
Thanks(0)
|
||
bonsoir,
il y a t'il une possibilité de modifier la taille des photos par défaut (1600*500) pour éviter la bande blanche. Modifier aussi le temps de pause entre chaque photos. merci |
|||
Hobby001
Admin Group Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6507 |
Options des messages
Thanks(0)
|
||
Maurice306
Senior Member Depuis le: 20 Avr 2008 Pays: France Status: Inactif Points: 2066 |
Options des messages
Thanks(0)
|
||
Toujours très serviable pour la communauté
|
|||
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
|
|||
ridp
Senior Member Depuis le: 18 Nov 2007 Pays: France Status: Inactif Points: 286 |
Options des messages
Thanks(0)
|
||
bonsoir,
et oui c'est vraiment un forum formidable. Merci |
|||
ridp
Senior Member Depuis le: 18 Nov 2007 Pays: France Status: Inactif Points: 286 |
Options des messages
Thanks(0)
|
||
bonsoir,
est-il important et surtout possible, de mette un attribut alt sur les images du slider. Merci |
|||
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
|
||
Un peu de lecture alors je pense.
|
|||
ridp
Senior Member Depuis le: 18 Nov 2007 Pays: France Status: Inactif Points: 286 |
Options des messages
Thanks(0)
|
||
Bonsoir,
merci pour la lecture, je vais commencer à rajouter l'attribut alt sur mes images du slider. Merci |
|||
Répondre | Page 123 5> |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |