Comment créer un aperçu du curseur au ralenti

Question

J'avais besoin de l'aperçu du curseur pour se déplacer en fonction de l'image, mais maintenant il se déplace immédiatement vers la fin

J'ai essayé de créer un curseur d'aperçu à l'aide de deux boutons (gauche et droit), mais lorsque j'appuie sur le bouton droit, il se déplace vers la fin alors que j'en ai besoin pour se déplacer selon l'image. Voici le lien: https://codepen.io/alexvambato/pen/yLGBxKK

<div class="img-container1" style="float:left; margin:10px;max-width: 530px">
<!-- Créez un curseur. --->
<style>
/* Afficher les styles sur codepen.io */
</style>
<div id="thumbelina" style="padding:5px;overflow: caché;">
<button class="btnToLeft" onclick="toMovel()"><</button>
    <ul id="thumbelina0" style="padding:0px; width:max-content; text-align:center;display: flex;margin-bottom: 0px;margin-left: 0px;">
    <li style="padding:5px;largeur : auto;hauteur : 100px;affichage : bloc;"><img src="{{preview_image}}" style="margin-top : -5px;margin-left : -5px;" /></li>
      <li style="padding:5px;largeur : auto;hauteur : 100px;affichage : bloc;"><img src="{{preview_image}}" style="margin-top : -5px;margin-left : -5px;" /></li>
      <li style="padding:5px;largeur : auto;hauteur : 100px;affichage : bloc;"><img src="{{preview_image}}" style="margin-top : -5px;margin-left : -5px;" /></li>
      <li style="padding:5px;largeur : auto;hauteur : 100px;affichage : bloc;"><img style="margin-top : -5px;margin-left : -5px; />< ;/li>
      <li style="padding:5px;largeur : auto;hauteur : 100px;affichage : bloc;"><img src="{{preview_image}}" style="margin-top : -5px;margin-left : -5px;" /></li>
      <li style="padding:5px;largeur : auto;hauteur : 100px;affichage : bloc;"><img src="{{preview_image}}" style="margin-top : -5px;margin-left : -5px;" /></li>
    </ul>
<button class="btnToRight" onclick="toMove()">></button>
</div>
</div>
<script>
fonction toMove() { 
var move = document.querySelector('#thumbelina0');
move.setAttribute('style', 'padding:0px; width:max-content; text-align:center;display: flex;margin-bottom: 0px;margin-left: -300px;')
}
fonction toMovel() { 
var move = document.querySelector('#thumbelina0');
move.setAttribute('style', 'padding:0px; width:max-content; text-align:center;display: flex;margin-bottom: 0px;margin-left: 0px;')
}
</script>

Answer 1

Pour créer un curseur comme celui-ci, vous devez restituer des images et des images avec la même hauteur et la même largeur. Par exemple, 100 pixels, chaque image doit restituer l'image en mode intensifié. Une fois cela fait, vous devez écrire du code en JavaScript comme ceci :

Tout d'abord, vous devez définir une variable qui indique la position du curseur.

var pos = 0; //Ceci devrait être une variable globale

Dans les fonctions de déplacement et de déplacement, vous devez augmenter/diminuer la valeur de pos. Sur cette base, vous pouvez définir la valeur de marge du curseur comme suit :

move.setAttribute('style', 'padding:0px; width:max-content; text-align:center;display: flex;margin-bottom: 0px;margin-left: '+pos*100+'px;' )

Bien sûr, la valeur pos doit avoir des limites de nombre d'images et de valeurs négatives.