WebToApp
llSlider - Le Slider simple mais qui fonctionne
Installation
<head>
  ...
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
  ...
  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
  <script src="myjspath/jquery.ui.touch-punch.min.js"></script> // Download here : http://touchpunch.furf.com
  <script src="myjspath/llSlider.min.js"></script> // Download here : /export/llSlider/llSlider.1.0.min.js
</head>
		
Exemples
Usage basique : images uniquement
Les images sont affichées avec leur taille orginale des images dans la limite de celle du container.
Html :
<div class="demo-1"></div>
			
Javascript :
// Create the array of pictures with src & alt like the <img src="" alt=""> html tag
var pictures = [
  {src: "https://66.media.tumblr.com/c927cfc68e54af2e7bb967bc4ab5b382/tumblr_pbfvl2DKN01x97sy4o1_640.jpg", alt: "Ha Long Bay"},
  {src: "https://66.media.tumblr.com/072a56099e02a1c1a0f699b30312f464/tumblr_p637q3O9pP1x97sy4o1_640.jpg", alt: "Ha Long Bay"},
  {src: "https://upload.wikimedia.org/wikipedia/commons/e/e4/Halong_ensemble_%28colour_corrected%29.jpg", alt: "Ha Long Bay"},
  {src: "https://66.media.tumblr.com/21523099a56a554a449e55ab84cd863d/tumblr_p7w6yefV9v1x97sy4o1_500.jpg", alt: "Ha Long Bay"}
];
		
$(".demo-1").llSlider({
  pictures: pictures
});
			
Hauteur automatique
Fixe la hauteur des images à celle de la plus petite.
Html :
<div class="demo-2"></div>
			
Javascript :
		
$(".demo-2").llSlider({
  pictures: pictures,
  height: "auto"
});
			
Hauteur fixe
Définis la hauteur des images à celle indiquée en pixel (400px ici)
Html :
<div class="demo-3"></div>
			
Javascript :
$(".demo-3").llSlider({
  pictures: pictures,
  height: 400
});
			
Exemple complet
Hauteur fixée + boucle + button précédent et suivant + points + autoplay
Pour voir l'autoplay, attendez 2 secondes et l'image ira à la suivante automatiquement. Si l'utilisateur touche le slider alors l'autoplay s'arrête.
Html :
<div class="demo-4"></div>
			
Javascript :
$(".demo-4").llSlider({
  pictures: pictures,
  height: 400,
  showButton: true,
  showDots: true,
  play: true,
  playDuration: 2000,
  loop: true
});