スライダープレビューをスローモーションにする方法

Question

スライダー プレビューを画像ごとに移動する必要がありましたが、すぐに最後まで移動してしまいます

2つのボタン（左右）を使用してプレビュースライダーを作成しようとしましたが、右ボタンを押すと最後まで移動しますが、画像どおりに移動する必要があります リンクは次のとおりです。 https://codepen.io/alexvambato/pen/yLGBxKK

<div class="img-container1" style="float:left; margin:10px;max-width: 530px">
<!-- スライダーを作成します。 -->
<スタイル>
/* codepen.io でスタイルを表示 */
</スタイル>
<div id="thumbelina" style="padding:5px;overflow: hidden;">
<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;width: auto;height: 100px;display: block;"><img src="{{preview_image}}" style="margin-top: -5px;margin-left : -5px;" />gt;
      <li style="padding:5px;width: auto;height: 100px;display: block;"><img src="{{preview_image}}" style="margin-top: -5px;margin-left : -5px;" />gt;
      <li style="padding:5px;width: auto;height: 100px;display: block;"><img src="{{preview_image}}" style="margin-top: -5px;margin-left : -5px;" />gt;
      <li style="padding:5px;width: auto;height: 100px;display: block;"><img style="margin-top: -5px;margin-left: -5px;" /> ;/リ>
      <li style="padding:5px;width: auto;height: 100px;display: block;"><img src="{{preview_image}}" style="margin-top: -5px;margin-left : -5px;" />gt;
      <li style="padding:5px;width: auto;height: 100px;display: block;"><img src="{{preview_image}}" style="margin-top: -5px;margin-left : -5px;" />gt;
    </ul>
<button class="btnToRight" onclick="toMove()">></button>
</div>
</div>
<スクリプト>
関数 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;')
}
関数 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

そのようなスライダーを構築するには、画像と画像を同じ高さと幅でレンダリングする必要があります。 たとえば、100 ピクセルの場合、各画像は強化モードで画像をレンダリングする必要があります。 完了したら、JavaScript で次のようなコードを記述する必要があります:

まず、スライダーの位置を示す変数を定義する必要があります。

var pos = 0; //これはグローバル変数である必要があります

移動および移動関数では、pos の値を増減する必要があります。 これに基づいて、スライダーのマージン値を次のように設定できます:

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

もちろん、pos 値は画像数と負の値によって制限される必要があります。