Changer sens défilement carousel BXSlider + arrêter + démarrer

**jytest** · 03/10/2013, 18h53

Bonsoir,

Je viens de créer un carousel,
depuis la base de bxslider 2.0.
J'ai créé des flèches gauche et droite.

Quelque chose m'échappe dans ce jquery...

Je n'arrive pas à changer le sens de défilement en cliquant
sur l'une ou l'autre des flèches.
Je n'arrive pas non plus à stopper / à redémarrer le carousel
en cliquent et recliquant sur le slider.

Voici le lien de la page

Pouvez-vous m'aider.
D'avance, un immense merci

**NoSmoking** · 03/10/2013, 19h00

Bonjour,
peut être qu'en jetant un rapide coup d'oeil dans la console d'erreur cela t'aiderait

ReferenceError: vitrine is not defined slider.php (ligne 91)
vitrine.goToNextSlide();

**jytest** · 03/10/2013, 19h14

J'ai pourtant fait :

Code :

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

1
2
3
4
5
6
7
8
9
var vitrine = $('.vitrine-bagues').bxSlider({
	minSlides: 3.05,
	maxSlides: 3.05,
	slideWidth: 138,
	slideMargin: 0,
	ticker: true,
	speed: 25000,
	autoDirection: 'next'
});

Peux-tu m'aider ?
je suis loin de maîtriser jquery !
D'avance un très grand merci !

**NoSmoking** · 03/10/2013, 19h52

Problème de scope, regarde où est déclarée ta variable et où elle est appelée.

**jytest** · 03/10/2013, 20h29

Je viens de revoir mon code.
Cela ne fonctionne pas non plus !

J'ai pourtant une page référence...
Mais je n'y arrive pas !
Qu'est-ce qui foire ?

**jytest** · 04/10/2013, 08h49

Pouvez-vous m'aider en jetant un oeil sur mon code, svp ?
Je crois pourtant tout avoir intégré correctement,
suivant les conseils du concepteur

Merci d'avance.

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Promotions jusqu'a 70%</title>
 
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
	font-family: Arial, Verdana, Helvetica, sans-serif;
}
html {
	width: 100%;
	height: 100%;
}
body {
	width: 100%;
	height: 100px;
	background-color: #FFFFFF;
}
.promo {
	width: 917px;
	padding: 14px;
	height: 268px;
	font-family: Arial, sans-serif;
	border: solid 1px #939598;
}
.titre {
	height: 33px;
	background-color: #7f7f7f;
	font-size: 26px;
	color: #ffffff;
	text-align: center;
	text-transform: uppercase;
}
.etapenumero {
	float: left;
	width: 27px;
	height: 43px;
	font-size: 42px;
	color: #939598;
	padding-bottom: 0px;
}
.etapebarre {
	float: left;
	width: 2px;
	height: 43px;
	background-color: #3d393a;
}
.etapedetail {
	float: left;
	height: 43px;
	font-size: 24px;
	color: #939598;
	padding-left: 14px;
}
.curseur {
	cursor: pointer;
}
.soustitre {
	color: #7f7f7f;
	font-size: 16px;
	text-align: center;
	padding-top: 8px;
}
-->
</style>
 
<link type="text/css" rel="stylesheet" href="http://www.celinni.com/eboutique/slider_bague/js/bx/jquery.bxslider.css" media="screen">
<script type="text/javascript" src="http://www.celinni.com/eboutique/slider_bague/js/jquery.js"></script>
<script type="text/javascript" src="http://www.celinni.com/eboutique/slider_bague/js/bx/jquery.bxslider.min.js"></script>
<script type="text/javascript" src="http://www.celinni.com/eboutique/slider_bague/js/bx/plugins/jquery.easing.1.3.min.js"></script>
<script type="text/javascript">
	var vitrine;
 
	$(function() {
		vitrine = $('.vitrine').bxSlider({
			nextSelector: '#slider-next',
			prevSelector: '#slider-prev',
			minSlides: 3.05,
			maxSlides: 3.05,
			slideWidth: 138,
			slideMargin: 0,
			ticker: true,
			speed: 25000
		});
	} );
 
 
	$('#slider-next').click(function(){
		vitrine.goToNextSlide();
		return false;
	});
 
	$('#slider-prev').click(function(){
		vitrine.goToPrevSlide();
		return false;
	});
 
</script>
</head>
 
<body>
 
<div class="promo">
	<div class="titre">
    Promotions jusqu'a -70%
    </div>
	<div style="margin-top:20px; min-height:52px;">
    	<div style="float:left; width:380px;">
        	<div class="etapenumero">1</div>
            <div class="etapebarre"></div>
        	<div class="etapedetail">
            	<p style="line-height:23px;">Choisissez votre<br/><span style="color:#231f20;">DIAMANT</span></p>
            </div>
        </div>
    	<div style="float:left; width:300px;">
        	<div class="etapenumero">2</div>
            <div class="etapebarre"></div>
        	<div class="etapedetail">
            	<p style="line-height:23px;">Choisissez votre<br/><span style="color:#231f20;">MONTURE</span></p>
            </div>
        </div>
    	<div style="float:right;">
        	<div class="etapenumero">3</div>
            <div class="etapebarre"></div>
        	<div class="etapedetail">
            	<p style="line-height:23px;">Votre&nbsp;bijou<br/><span style="color:#231f20;">EST&nbsp;PR&Ecirc;T&nbsp;!</span></p>
            </div>
        </div>
    	<div style="clear:both;"></div>
    </div>
    <div style="height:163px;">
    	<div style="float:left;"><img src="images/diamant.png" alt="promotions" width="235" height="163"/></div>
    	<div style="float:left; width:481px;" alt="promotions">
            <div style="float:left; width:30px; height:163px;">
            	<a href="" id="slider-prev"><img src="images/flechegaucheOFF.jpg" width="20" height="55" alt="promotions" title="Défiler vers la gauche" class="curseur" style="margin:54px 0px 0px 0px;" onmouseover="this.src='images/flechegaucheON.jpg';" onmouseout="this.src='images/flechegaucheOFF.jpg';" /></a>
            </div>
            <div title="Arr&ecirc;ter / Red&eacute;marrer le défilement" class="curseur" style="float:left; width:421px; height:152px; padding-top:16px;">
                <ul class="vitrine" style="margin-top:0px;">
                    <li><img src="http://www.celinni.com/eboutique/slider_bague/photos/CELINNI1968_125.jpg" height="120" alt="bague celinni 1968"  />
                    <div class="soustitre">CELINNI 1968</div></li>
                    <li><img src="http://www.celinni.com/eboutique/slider_bague/photos/CHLOE_125.jpg" height="120" alt="bague chloe" />
                    <div class="soustitre">CHLOE</div></li>
                    <li><img src="http://www.celinni.com/eboutique/slider_bague/photos/ELLE_125.jpg" height="120" alt="bague elle" />
                    <div class="soustitre">ELLE</div></li>
                    <li><img src="http://www.celinni.com/eboutique/slider_bague/photos/ETERNAL_125.jpg" height="120" alt="bague eternal" />
                    <div class="soustitre">ETERNAL</div></li>
                    <li><img src="http://www.celinni.com/eboutique/slider_bague/photos/IDYLLE_125.jpg" height="120" alt="bague idylle" />
                    <div class="soustitre">IDYLLE</div></li>
                    <li><img src="http://www.celinni.com/eboutique/slider_bague/photos/MONAMOUR_125.jpg" height="120" alt="bague mon amour" />
                    <div class="soustitre">MON AMOUR</div></li>
                    <li><img src="http://www.celinni.com/eboutique/slider_bague/photos/MONTRESOR_125.jpg" height="120" alt="bague mon tresor" />
                    <div class="soustitre">MON TR&Eacute;SOR</div></li>
                    <li><img src="http://www.celinni.com/eboutique/slider_bague/photos/NINA_125.jpg" height="120" alt="bague nina" />
                    <div class="soustitre">NINA</div></li>
                    <li><img src="http://www.celinni.com/eboutique/slider_bague/photos/PAMINA_125.jpg" height="120" alt="bague pamina" />
                    <div class="soustitre">PAMINA</div></li>
                    <li><img src="http://www.celinni.com/eboutique/slider_bague/photos/PROMESSE_125.jpg" height="120" alt="bague promesse" />
                    <div class="soustitre">PROMESSE</div></li>
                    <li><img src="http://www.celinni.com/eboutique/slider_bague/photos/SATINE_125.jpg" height="120" alt="bague satine" />
                    <div class="soustitre">SATINNE</div></li>
                    <li><img src="http://www.celinni.com/eboutique/slider_bague/photos/SOLEEN_125.jpg" height="120" alt="bague soleen" />
                    <div class="soustitre">SOLEEN</div></li>
                    <li><img src="http://www.celinni.com/eboutique/slider_bague/photos/YLANA_125.jpg" height="120" alt="bague ylana" />
                    <div class="soustitre">YLANA</div></li>
                </ul>
            </div>
            <div style="float:left; width:30px; height:163px;">
            	<a href="" id="slider-next"><img src="images/flechedroiteOFF.jpg" width="20" height="55" alt="promotions" title="Défiler vers la droite" class="curseur" style="margin:54px 0px 0px 10px;" onmouseover="this.src='images/flechedroiteON.jpg';" onmouseout="this.src='images/flechedroiteOFF.jpg';" /></a>
            </div>
        </div>
        <div style="float:left;"><img src="images/bague.png" alt="promotions" width="201" height="163"/></div>
    	<div style="clear:both;"></div>
	</div>
</div>
 
</body>
</html>

**Bovino** · 04/10/2013, 08h58

Code :

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

1
2
3
4
5
6
7
8
$('#slider-next').click(function(){
	vitrine.goToNextSlide();
	return false;
});
$('#slider-prev').click(function(){
	vitrine.goToPrevSlide();
	return false;
});

Quand ce code est exécuté, les éléments auxquels il se rapporte n'existent pas encore dans la page...

**jytest** · 04/10/2013, 09h02

Merci pour ta réponse !
Peux-tu m'aider à résoudre cela alors ?
Mes bases en jquery sont quasi nulles !

Je déplace ce bout de code et
je passe avec les classes :

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
 
	$(function() {
		vitrine = $('.vitrine').bxSlider({
			nextSelector: '#slider-next',
			prevSelector: '#slider-prev',
			minSlides: 3.05,
			maxSlides: 3.05,
			slideWidth: 138,
			slideMargin: 0,
			ticker: true,
			speed: 25000
		});
		$('.slider-next').click(function(){
			vitrine.goToNextSlide();
			return false;
		});
		$('.slider-prev').click(function(){
			vitrine.goToPrevSlide();
			return false;
		});
	} );

Cela ne va pas mieux !

Merci d'avance pour ton aide !

**jytest** · 04/10/2013, 10h38

J'ai encore modifié mon code, en tenant compte des remarques constructives des intervenants... Mais aussi par la lecture de plus de 300 pages internet !

Mais, je n'y arrive toujours pas !!!
Je commence à saturer...

Pourquoi cela ne fonctionne-t-il pas ?
Un petit truc m'empêche d'y arriver !
Mais quoi ?

Pouvez-vous m'aider ?
J'ai vraiment besoin de votre aide !!!

**NoSmoking** · 05/10/2013, 15h20

Mais aussi par la lecture de plus de 300 pages internet !

la documentation ne comporte qu'une page et ne fait pas référence à une quelconque méthode de setOption

http://bxslider.com/options, on peut en conclure que la direction fixée au départ influe sur le comportement du slide.

Par contre tu peux toujours essayer de passer par la méthode .reloadSlider().

Je ne saisie néanmoins pas pourquoi tu veux modifier un comportement parfaitement ancré dans les habitudes.

**jytest** · 05/10/2013, 16h33

C'est vrai...
Mais cela est un desiderata de pouvoir changer le sens...
d'autant plus que ce jquery le propose...
quand on y arrive à le faire !

Ce qui est loin d'être mon cas !

J'espère que vous pourrez néanmoins à solutionner ce truc !
Un grand merci d'avance.

**NoSmoking** · 05/10/2013, 19h02

...
d'autant plus que ce jquery le propose...

propose quoi, de changer le sens ?

**jytest** · 05/10/2013, 19h38

oui, c'est cela, changer de sens !
cfr http://bxslider.com/examples/custom-next-prev-selectors.
Mais je n'y arrive vraiment pas !

Je ne cesse d'essayer en vain !
A l'aide, svp

**NoSmoking** · 06/10/2013, 17h38

Certes mais ce que tu indiques est en mode pas par pas et non en mode automatique qui n'est pas géré de la même façon.

- As tu essayé la méthode .reloadSlider() comme conseillé ci dessus, mais je doute qu'elle convienne sans modif du plugin...à voir avec le créateur.

- As tu essayé ou même juste faire un tour sur http://www.abciweb.net/objet-defilant.php?page=250

**jytest** · 06/10/2013, 17h49

Comprenant que cela tourne au vinaigre,
pouvez-vous me conseiller sur un autre jquery,
même payant, sur codecanyon ?
Merci pour votre aide !

**jytest** · 07/10/2013, 11h03

J'ai oublié de préciser que ".reloadSlider();" est muet comme une taupe !!!

@NoSmoking
@Bovino,
merci pour votre aide !!!

Un autre carousel à me proposer :
- avec des flèches personnalisables (qui permettent de changer le sens de défilement)
- avec les clics sur le défilant d'images (pour stopper/reprendre le défilement) ?

Merci d'avance à tous !

**NoSmoking** · 07/10/2013, 20h24

Envoyé par jytest

J'ai oublié de préciser que ".reloadSlider();" est muet comme une taupe !!!

il faut lui donner à manger

Code :

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

1
2
3
4
5
6
7
8
9
vitrine.reloadSlider({
    minSlides: 3.05,
    maxSlides: 3.05,
    slideWidth: 138,
    slideMargin: 0,
    speed: 25000 ,
    ticker: true,
    autoDirection: 'prev'
  });

PS: ne cries pas on n'est pas sourd!

**jytest** · 07/10/2013, 21h34

Sorry, je criais de desespoir...

Je viens de changer le code...
Regarde...
Cela n'a pas l'air de fonctionner !

Puis-je te demander d'y regarder une nouvelle fois ?
Grand merci d'avance.

**jytest** · 07/10/2013, 21h37

Même en enlevant les lignes suivantes :

Code :

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

1
2
3
 
            vitrine.stopAuto();
            vitrine.startAuto();

Résultat négatif

**jytest** · 07/10/2013, 23h02

YES... (je crie de joie !!!)
J'ai trouvé !!!

Merci à toi NoSmoking !
Merci de m'avoir mis sur la bonne piste !
Merci !

Voici la solution !!!

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
 
		$('#slider-next').click(function(e){
			e.preventDefault();
			vitrine.reloadSlider({
				minSlides: 3.05,
				maxSlides: 3.05,
				slideWidth: 138,
				slideMargin: 0,
				ticker: true,
				speed: 25000,
				autoDirection: 'next',
				controls: true
			});
		});
		$('#slider-prev').click(function(e){
			e.preventDefault();
			vitrine.reloadSlider({
				minSlides: 3.05,
				maxSlides: 3.05,
				slideWidth: 138,
				slideMargin: 0,
				ticker: true,
				speed: 25000,
				autoDirection: 'prev',
				controls: true
			});
		});

Changer sens défilement carousel BXSlider + arrêter + démarrer

jQuery

Discussions similaires

Partager

Partager