1 Dernière modification par jytest (04-10-2013 22:55:45)

Sujet : bxSlider : changer le sens de défilement par des boutons perso

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