hover pour slideshow

**mantraax** · 23/03/2015, 09h08

Bonjour,

j'essaie de réaliser un slideshow avec une fonction Hover sur les vignettes qui contrôlerait indirectement la timeline comme sur le site de la bnp: https://www.secure.bnpparibas.net/ba...Page?type=site

je pense avoir besoin de javascript mais je n'y connait pas grand chose en java

Pourriez vous m'aider svp?

Voici mon code: http://codepen.io/anon/pen/raoEYm

Merci

**headmax** · 23/03/2015, 10h45

Salut voici un petit exemple il faut nettoyer le css maintenant bonne chance

.

http://codepen.io/anon/pen/KwbOzq

**Chen norris** · 23/03/2015, 10h53

Algo réalisé très vite fait en supposant que tu utilises JQuery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function() {
	// Au survol d'un des boutons
	$("#dots li").mouseover(function(this) {
		// Calcul du nombre de pixels duquel on doit déplacer le slider latéralement
		var nbPixels = ... // ne connaissant pas la taille de tes images, je te laisse gérer ce calcul
		// Déplacement latéral de ton slider
		$("#slideshow div.slider").scrollLeft(nbPixels);
		// Sinon, voici une version qui anime ce déplacement latéral
		$("#slideshow div.slider").animate({ scrollLeft: nbPixels }, 'fast');
	});
});

Selon que tu utilises JQuery ou une autre librairie javascript (voire pas de librairie du tout), je te laisse adapter ce code à tes besoins

(voire le débogguer car pas testé de mon côté ^^)

Dernière petite remarque : à mon avis, inutile de multiplier les imbrications de <div> : container et slider me semblent faire doublon. Ce serait sans doute plus propre de n'en garder qu'un seul.

**mantraax** · 23/03/2015, 17h25

Merci beaucoup,

c'est vraiment plaisant de voir que certaine personne use de leur temps pour aider les autres

@headmax j'ai adapter le css et le html et recopier le javascript (je n'aime pas bêtement recopier je vais essayer de le comprendre mais il est hard)
il y a juste un hic le javascript fonctionne sous "codepen" mais après avoir créé un fichier .js , l'avoir placé dans un dossier nommé "js" et fait appel de ce fichier dans mon html rien ne fonctionne, c'est bizarre...
Aurais-je oublié quelque chose?

@chen norris j'ai trouvé ton code simple à comprendre et du coup intéressant à adapter à mon niveau lamentable mais après avoir rentré mes valeurs rien ne se passe...

Merci encore de votre aide

**headmax** · 23/03/2015, 17h41

Salut,

Pour ton problème c'est a cause d'une librairie manquante jquery donc il faut que tu rajoute celle ligne au debut de ta balise <head>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<head>
<!-- au tout debut avant tout autre balise -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
...

gl