slider 100% responsive |
Répondre ![]() |
Page 123> |
Auteur |
![]() ![]() |
||
brolysan ![]() Profil des membres
Envoyer un message privé
Trouve les messages des membres
Visiter la page des membres
Ajouter à la liste
Admin Group ![]() ![]() Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 9906 |
![]() ![]() ![]() ![]() ![]() 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 ![]() 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 |
![]() ![]() ![]() ![]() ![]() |
||
Merci c'est genial
|
|||
j'adore l'informatique
|
|||
![]() |
|||
ridp ![]() Senior Member ![]() Depuis le: 18 Nov 2007 Pays: France Status: Inactif Points: 268 |
![]() ![]() ![]() ![]() ![]() |
||
bonsoir,
que dire sinon merci kenavo |
|||
![]() |
|||
ridp ![]() Senior Member ![]() Depuis le: 18 Nov 2007 Pays: France Status: Inactif Points: 268 |
![]() ![]() ![]() ![]() ![]() |
||
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 ![]() Profil des membres
Envoyer un message privé
Trouve les messages des membres
Visiter la page des membres
Ajouter à la liste
Admin Group ![]() ![]() Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 5717 |
![]() ![]() ![]() ![]() ![]() |
||
![]() |
|||
Maurice306 ![]() Profil des membres
Envoyer un message privé
Trouve les messages des membres
Visiter la page des membres
Ajouter à la liste
Senior Member ![]() ![]() Depuis le: 20 Avr 2008 Pays: France Status: Inactif Points: 2074 |
![]() ![]() ![]() ![]() ![]() |
||
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: 268 |
![]() ![]() ![]() ![]() ![]() |
||
bonsoir,
et oui c'est vraiment un forum formidable. Merci |
|||
![]() |
|||
ridp ![]() Senior Member ![]() Depuis le: 18 Nov 2007 Pays: France Status: Inactif Points: 268 |
![]() ![]() ![]() ![]() ![]() |
||
bonsoir,
est-il important et surtout possible, de mette un attribut alt sur les images du slider. Merci |
|||
![]() |
|||
brolysan ![]() Profil des membres
Envoyer un message privé
Trouve les messages des membres
Visiter la page des membres
Ajouter à la liste
Admin Group ![]() ![]() Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 9906 |
![]() ![]() ![]() ![]() ![]() |
||
Un peu de lecture alors je pense.
![]() |
|||
![]() |
|||
ridp ![]() Senior Member ![]() Depuis le: 18 Nov 2007 Pays: France Status: Inactif Points: 268 |
![]() ![]() ![]() ![]() ![]() |
||
Bonsoir,
merci pour la lecture, je vais commencer à rajouter l'attribut alt sur mes images du slider. Merci |
|||
![]() |
Répondre ![]() |
Page 123> |
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 |