Antivirus offre spéciale - jusqu'à 60 % de réduction avec 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>
Auteur
Message
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 9363
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é : Feb 23 2016 à 1:31pm
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 - Feb 23 2016 à 1:45pm
Haut de la page
cannel allez vers le bas
Newbie
Newbie
Avatar

Depuis le: Mar 08 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é : Mar 15 2016 à 7:18pm
Merci c'est genial
j'adore l'informatique
Haut de la page
ridp allez vers le bas
Senior Member
Senior Member
Avatar

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

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

Depuis le: Nov 18 2007
Pays: France
Status: Inactif
Points: 254
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer ridp Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Sep 15 2016 à 10:47pm
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: Feb 14 2015
Pays: Canada, Québec
Status: Inactif
Points: 4632
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Sep 16 2016 à 12:23am
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. <a href="http://denislafrance.net" rel="nofollow">http://denislafrance.net</a>
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: Apr 20 2008
Pays: France
Status: Inactif
Points: 2078
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Sep 18 2016 à 8:08pm
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
Avatar

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

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

Depuis le: Nov 18 2007
Pays: France
Status: Inactif
Points: 254
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer ridp Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Sep 28 2016 à 8:51pm
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: Aug 14 2009
Pays: France
Status: Inactif
Points: 9363
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Sep 29 2016 à 7:51am
Un peu de lecture alors je pense. Wink
Haut de la page
ridp allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: Nov 18 2007
Pays: France
Status: Inactif
Points: 254
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer ridp Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Oct 01 2016 à 11:15pm
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>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,031 secondes.
Acheter votre vélo en ligne