[Résolu] [dewslider] Alternative en Jquery / CSS3

Bonjour,

J'ai longtemps utilisé dewslider sur mon site, mais je suis à la recherche d'une alternative en JQuery. Je sollicite ainsi votre aide, du moins vos retours sur les alternatives, car une recherche "slider Jquery" est quelque peu... dense.

Mon besoin est le suivant :
- Chargement des images en JSON ou XML (Je ne suis pas trop fan d'avoir dans le code source de la page la liste des images)
- Avoir une légende par image
- Avoir un lien sur la légende, différent selon l'image

C'est assez ISO dewslider vous allez me dire.

Par avance merci,
Modifié par Aurelienazerty (20 Jul 2015 - 15:05)

Du coup, j'ai résolu mon problème comme un grand.

Donc j'ai tout fait en CSS3, le résultat se trouve sur mon site : http://www.team-azerty.com

Dans les grandes lignes voilà ce que j'ai suivi ce tuto:CSS3 – Créer un slideshow automatique et contrôlable.

Après, pour éviter d'avoir en dur dans mon code les images, j'ai fait un appel Ajax qui va lire un JSon (généré en PHP qui va prendre X image au hasard) et qui ajoute dynamiquement les images dans le <div class="slider">.

Ce que j'ai modifié dans la feuille de style pour que ça fonctionne avec X images, c'est un php qui génère ce CSS justement :

[...]
#slideshow .slider {
	position: absolute;
	left:0; top:0;
	width: <?php echo ($nbPhotos*100) ?>%;
	height: 200px;
}
[..]
#slideshow .slider {
	animation: slider <?php echo ($nbPhotos*8) ?>s infinite;
}
[..]
#slideshow figcaption {
	animation: figcaptionner 8s infinite;
}
#slideshow .container {
	animation: blureffect 8s infinite;
}
@keyframes slider {
	<?php
	$pas = round(100 / ($nbPhotos), 4);
	$deltat = round(20 / ($nbPhotos), 4);
	for ($i = 0; $i < $nbPhotos; $i++) {
		echo ($i*$pas) . "%, ";
		echo ((($i+1)*$pas)-$deltat) . "% ";
		if ($i == 0) {
			echo ", 100% ";
		}
		echo "{ left: -" . $i*100 . "%;}\n";
	}
	?>
}
@keyframes timeliner {
	0%, 100% { width: 0;}
	90% { width: 300px;}
}

@keyframes blureffect {
	0% { opacity: 0;}
	10%{ opacity: 1;}
	80%{ opacity: 1;}
	90%{ opacity: 0;}
	100%{ opacity: 0;}
}
@keyframes figcaptionner {
	0% { bottom: -55px;}
	20%{ bottom: 5px;}
	60%{ bottom: 5px;}
	90%{ bottom: -55px;}
	100%{ bottom: -55px;}
}

Le principe de cette animation CSS, c'est de décaler toutes les 8s par la gauche les images, et j'ai rajouté un petit effet blur entre les transitions d'images.
Dans la CSS d'origine, il y avait 4 images et l'auteur avait fait des animations de 32s, alors si sur le slider, je trouvais ça logique, pour les autres effets, c'était compliqué, moi, j'ai tout ramené sur 8s.
Par rapport au tuto, la taille des mes images est légèrement différentes, du coup, si vous le récupérez, il faudra sûrement modifier ça.

Voilà dans les grandes lignes.
Modifié par Aurelienazerty (20 Jul 2015 - 19:01)