BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - slider 100% responsive
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

slider 100% responsive

 Répondre Répondre Page  123 5>
Auteur
Message
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (4) Thanks(4)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Sujet: slider 100% responsive
    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 Embarrassed, 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 :

<link rel="stylesheet" href="flexslider/flexslider.css" type="text/css">
<script src="flexslider/jquery.flexslider.js"></script>

Mettez ensuite un autre bloc de code source
Spécifier le type en javascript et sa position en Endbody
Copiez ce code :

//script pour le slider responsive
$(window).load(function() {
    $('.flexslider').flexslider();
  });

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 :

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="Files/Image/FLEXSLIDER_IMAGES/IMG001.jpg" />
    </li>
    <li>
      <img src="Files/Image/FLEXSLIDER_IMAGES/IMG02.jpg" />
    </li>
     <li>
      <img src="Files/Image/FLEXSLIDER_IMAGES/IMG03.jpg" />
    </li>
     <li>
      <img src="Files/Image/FLEXSLIDER_IMAGES/IMG04.jpg" />
    </li>
     <li>
      <img src="Files/Image/FLEXSLIDER_IMAGES/IMG05.jpg" />
    </li>
  </ul>
</div>

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.





Edité par brolysan - 23 Feb 2016 à 14:45
Haut de la page
cannel allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 08 Mar 2016
Pays: Cote d'ivoire
Status: Inactif
Points: 8
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer cannel Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 15 Mar 2016 à 20:18
Merci c'est genial
j'adore l'informatique
Haut de la page
ridp allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Nov 2007
Pays: France
Status: Inactif
Points: 286
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer ridp Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 15 Mar 2016 à 22:32
bonsoir,
que dire sinon merci

kenavo
Haut de la page
ridp allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Nov 2007
Pays: France
Status: Inactif
Points: 286
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer ridp Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 15 Sep 2016 à 23:47
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
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 16 Sep 2016 à 01:23
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member


Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 2066
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 18 Sep 2016 à 21:08
Message posté par brolysan brolysan a écrit:

Voici un tutoriel pour avoir un slider 100% responsive qui s'adapte à la fois en hauteur et largeur.

Toujours très serviable pour la communauté Thumbs Up Clap
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 !!!
Haut de la page
ridp allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Nov 2007
Pays: France
Status: Inactif
Points: 286
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer ridp Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 18 Sep 2016 à 23:01
bonsoir,
et oui c'est vraiment un forum formidable.

Merci
Haut de la page
ridp allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Nov 2007
Pays: France
Status: Inactif
Points: 286
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer ridp Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 28 Sep 2016 à 21:51
bonsoir,
est-il important et surtout possible, de mette un attribut alt sur les images du slider.

Merci
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 29 Sep 2016 à 08:51
Un peu de lecture alors je pense. Wink
Haut de la page
ridp allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Nov 2007
Pays: France
Status: Inactif
Points: 286
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer ridp Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 02 Oct 2016 à 00:15
Bonsoir,
merci pour la lecture, je vais commencer à rajouter l'attribut alt sur mes images du slider.

Merci
Haut de la page
 Répondre Répondre Page  123 5>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.094 secondes.