Discussion :

[User Name]

Bonjour à tous,

J'ai acheté un thème sur Internet tout fait en HTML/Javascript/jQuery pour faire un site.

Ce site contient un slideshow qui défile, avec des boutons pour se repérer entre les sections ou sauter à l'une ou l'autre manuellement.

Je voudrais modifier le jQuery pour que :
1. Lorsque ma souris est dans la fenêtre du slideshow, celui-ci ne défile plus et reste sur la section affichée. Il reprend lorsque je ressors.
2. Je veux malgré tout que les boutons me permettent quand même de naviguer évidemment

J'ai essayé plein de trucs, mais ça ne m'a jamais donné le bon résultat. Voici le code:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var slidesWrapper = $('.cd-hero-slider');
 
	//check if a .cd-hero-slider exists in the DOM 
	if ( slidesWrapper.length > 0) {
		var primaryNav = $('.cd-primary-nav'),
			sliderNav = $('.cd-slider-nav'),
			navigationMarker = $('.cd-marker'),
			slidesNumber = slidesWrapper.children('li').length,
			visibleSlidePosition = 0,
			autoPlayId,
			autoPlayDelay = 5000;
 
		//upload videos (if not on mobile devices)
		uploadVideo(slidesWrapper);
 
		//autoplay slider
		setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);
 
		//on mobile - open/close primary navigation clicking/tapping the menu icon
		primaryNav.on('click', function(event){
			if($(event.target).is('.cd-primary-nav')) $(this).children('ul').toggleClass('is-visible');
		});
 
		//change visible slide
		sliderNav.on('click', 'li', function(event){
			event.preventDefault();
			var selectedItem = $(this);
			if(!selectedItem.hasClass('selected')) {
				// if it's not already selected
				var selectedPosition = selectedItem.index(),
					activePosition = slidesWrapper.find('li.selected').index();
 
				if( activePosition < selectedPosition) {
					nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
				} else {
					prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
				}
 
				//this is used for the autoplay
				visibleSlidePosition = selectedPosition;
 
				updateSliderNavigation(sliderNav, selectedPosition);
				updateNavigationMarker(navigationMarker, selectedPosition+1);
				//reset autoplay
				setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);
			}
		});
	}

Code :

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

1
2
3
4
5
6
function setAutoplay(wrapper, length, delay) {
		if(wrapper.hasClass('autoplay')) {
			clearInterval(autoPlayId);
			autoPlayId = window.setInterval(function(){autoplaySlider(length)}, delay);
		}
	}

J'ai essayé, entre autres:
- De mettre setAutoplay dans un if(!slideWrapper.hover()), mais j'ai fini par comprendre que hover ne fonctionnait pas comme ça.
- De mettre le pavé "change visible slide" dans une fonction hover, pas réussi
- D'utiliser des mouseenter et mouseleave, comme dans https://stackoverflow.com/questions/10912495/jquery-pause-slideshow-on-hover, pas réussi

Voici ma dernière tentative:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
slidesWrapper.mouseenter(function() {
		clearInterval(autoPlayId);
		sliderNav.on('click', 'li', function(event){
			event.preventDefault();
			var selectedItem = $(this);
			if(!selectedItem.hasClass('selected')) {
				// if it's not already selected
				var selectedPosition = selectedItem.index(),
					activePosition = slidesWrapper.find('li.selected').index();
 
				if( activePosition < selectedPosition) {
					nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
				} else {
					prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
				}
 
				//this is used for the autoplay
				visibleSlidePosition = selectedPosition;
 
				updateSliderNavigation(sliderNav, selectedPosition);
				updateNavigationMarker(navigationMarker, selectedPosition+1));
	})
	.mouseleave(function() {
			var selectedItem = $(this);
			if(!selectedItem.hasClass('selected')) {
				// if it's not already selected
				var selectedPosition = selectedItem.index(),
					activePosition = slidesWrapper.find('li.selected').index();
 
				if( activePosition < selectedPosition) {
					nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
				} else {
					prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
				}
 
				//this is used for the autoplay
				visibleSlidePosition = selectedPosition;
 
				updateSliderNavigation(sliderNav, selectedPosition);
				updateNavigationMarker(navigationMarker, selectedPosition+1);
				//reset autoplay
				setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);
			}
		});

A un moment donné, j'ai réussi à faire en sorte que le slideshow pause, et reprenne à la sortie de la souris, mais :
1. Les boutons ne fonctionnaient plus
2. Le slideshow reprennait de la première slide à chaque fois que je sortais la souris

Je veux bien des éclairages sur la structure de ce code et un peu d'aide.
Merci d'avance.

[User Name]

Finalement, j'ai réussi mon coup en rajoutant ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var pauseSlides = false;
 
        //What should happen when we enter or exit the slide area with the mouse
	slidesWrapper.mouseenter(function() {
		pauseSlides = true;
		clearInterval(autoPlayId);
	})
	.mouseleave(function() {
			pauseSlides = false;
			setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);
		}
	);

Et ceci en gras là-dessous :

Code :

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

1
2
3
4
5
6
7
8
function setAutoplay(wrapper, length, delay) {
		if(wrapper.hasClass('autoplay')) {
			clearInterval(autoPlayId);
			if (!pauseSlides) {
				autoPlayId = window.setInterval(function(){autoplaySlider(length)}, delay);
			}
		}
	}

Après je ne sais pas si c'est le plus simple, mais ça fonctionne.
Merci !