How to make slider preview slow motion

Question

I needed the slider preview to move by the image, but now it moves immediately to the end

I tried creating a preview slider using two buttons (left and right) but when I press the right button it moves to the end whereas I need it to move as per the image Here is the link: https://codepen.io/alexvambato/pen/yLGBxKK

<div class="img-container1" style="float:left; margin:10px;max-width: 530px">
<!-- Create a slider. -->
<style>
/* View styles on 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>
<script>
function 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;')
}
function 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

To build a slider like that, you need to render the image and picture at the same height and width. For example, 100 pixels, then each img should render the image in intensified mode. Once done, you need to write some code in JavaScript like this:

First, you need to define a variable that indicates the position of the slider.

var pos = 0; //This should be a global variable

In move and move functions, you need to increase/decrease the value of pos. Based on this, you can set the margin value of the slider as follows:

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

Of course, the pos value should be limited by image count and negative values.