如何使滑块预览慢动

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值应该有图像计数和负值的限制。