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>

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager