如何讓滑桿預覽慢動

Question

我需要滑桿預覽按影像移動，但現在它立即移動到末端

我嘗試使用兩個按鈕（左和右）創建預覽滑塊，但當我按下右按鈕時，它會移動到末尾，而我需要它按圖像移動 這是連結： https://codepen.io/alexvambato/pen/yLGBxKK

<div class="img-container1" style="float:left; margin:10px;max-width: 530px">
<!-- 建立滑桿。 -->
<style>
/* 在codepen.io上查看樣式 */
</style>
<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;" /></li>
      <li style="padding:5px;width: auto;height: 100px;display: block;"><img src="{{preview_image}}" style="margin-top: -5px;margin-left : -5px;" /></li>
      <li style="padding:5px;width: auto;height: 100px;display: block;"><img src="{{preview_image}}" style="margin-top: -5px;margin-left : -5px;" /></li>
      <li style="padding:5px;width: auto;height: 100px;display: block;"><img style="margin-top: -5px;margin-left: -5px;" />< ;/li>
      <li style="padding:5px;width: auto;height: 100px;display: block;"><img src="{{preview_image}}" style="margin-top: -5px;margin-left : -5px;" /></li>
      <li style="padding:5px;width: auto;height: 100px;display: block;"><img src="{{preview_image}}" style="margin-top: -5px;margin-left : -5px;" /></li>
    </ul>
<button class="btnToRight" onclick="toMove()">></button>
</div>
</div>
<腳本>
函數移動（）{
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;')
}
</劇本>

>

Answer 1

要建立一個像那樣的滑塊，您需要以相同的高度和寬度呈現圖像和圖片。 例如，100像素，然後每個img都應以強化模式呈現影像。 完成後，您需要在JavaScript中編寫一些程式碼，如下所示：

首先，您需要定義一個指示滑桿位置的變數。

var pos = 0; //這應該是全域變數

在movel和move函數中，您需要增加/減少pos的值。 基於此，您可以設定滑桿的margin值，如下所示：

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

當然，pos值應該有圖像計數和負值的限制。