11540 sujets

JavaScript, DOM et API Web HTML5

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

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
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.


<!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;
	background-color: #FFFFFF;
}
.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;
	font-family: Arial, Verdana, Helvetica, sans-serif;
}
.etapebarre {
	float: left;
	width: 2px;
	height: 43px;
	background-color: #3d393a;
	font-family: Arial, Verdana, Helvetica, sans-serif;
}
.etapedetail {
	float: left;
	height: 43px;
	font-size: 24px;
	color: #939598;
	padding-left: 14px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
}
.curseur {
}
.soustitre {
	color: #7f7f7f;
	font-size: 16px;
	text-align: center;
	padding-top: 8px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
}
-->
</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,
			controls: true
		});
		$('#slider-next').click(function(e){
            slider.stopAuto();
            slider.goToNextSlide();
            slider.startAuto();
		});
		$('#slider-prev').click(function(e){
            slider.stopAuto();
            slider.goToPrevSlide();
            slider.startAuto();
		});
		function startSlideshow() {
			slider.startAuto();
		};
		
		function stopSlideshow() {
			slider.stopAuto();
		};
	} );

</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="argin:0; padding:0; 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="argin:0; padding:0; 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="margin:0; padding:0; 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="http://www.celinni.com/eboutique/slider_bague/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" class="bx-prev"><img src="http://www.celinni.com/eboutique/slider_bague/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='http://www.celinni.com/eboutique/slider_bague/images/flechegaucheON.jpg';" onmouseout="this.src='http://www.celinni.com/eboutique/slider_bague/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;">
            	<a href="" onclick="stopSlideshow();">
                <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">SATINE</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>
                </a>
            </div>
            <div style="float:left; width:30px; height:163px;">
            	<a href="" id="slider-next" class="bx-next"><img src="http://www.celinni.com/eboutique/slider_bague/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='http://www.celinni.com/eboutique/slider_bague/images/flechedroiteON.jpg';" onmouseout="this.src='http://www.celinni.com/eboutique/slider_bague/images/flechedroiteOFF.jpg';" /></a>
            </div>
        </div>
        <div style="float:left;"><img src="http://www.celinni.com/eboutique/slider_bague/images/bague.png" alt="promotions" width="201" height="163"/></div>
    	<div style="clear:both;"></div>
	</div>
</div>

</body>
</html>

Modifié par jytest (04 Oct 2013 - 23:15)
Suite à la lecture de très nombreuses pages internet,
je viens de revoir mon code...

Mais, cela ne fonctionne toujours pas !
Pouvez-vous m'aider svp ?
Sujet clos
Aller à