Glisser un div sur un clic avec .animate (): comment limiter le déplacement?

Question

J'ai créé un curseur très basique avec jQuery. Il y a deux flèches appelées .theleft et .theright, qui se déplacent des contenus div quand on clique dessus, donc une galerie horizontale pleine d'images se déplace d'un côté à côté dans une plage 950px. Voici le code:

$(".theright").click(function() {               
$(".mymove").animate({ 
        left: "-=950px",
      }, 1500 );
});

$(".theleft").click(function() {                
$(".mymove").animate({ 
        left: "+=950px",
      }, 1500 );
});

Le code HTML est très simple:

<div class="mymove" style="position:relative">
    <ul>
        <li>
            <img src="" title="" alt="">
        </li>
        <li>
            <img src="" title="" alt="">
        </li>
        <li>
            <img src="" title="" alt="">
        </li>
        <li>
            <img src="" title="" alt="">
        </li>
    </ul>
</div>

Ma question est, quand la page se charge, si la première chose que je fais est en cliquant sur la flèche gauche, la galerie KIFFE la fenêtre se perdre sur le côté droit, qui est, je n'ai pas trouvé un moyen de « limite «l'action du curseur ...

Connaissez-vous un moyen d'améliorer la situation?

Merci.

Answer 1

Vous aurez besoin d'une sorte de compteur qui gardera la trace de l'endroit où votre curseur est à.

Donc, si on commence d'abord à 0 quelque chose comme ceci:

$(".theleft").click(function() {                
    if (slider_pos > 0) {
        $(".mymove").animate({ 
            left: "+=950px",
        }, 1500 );
        // Then update slider_pos here i.e. view_pos += 950;
    }
});