openElement

   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 :

<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.

Voici un site utilisant ce slider.

Edité par brolysan - 23 Feb 2016 à 14:45