Bagaimana untuk membuat pratonton slider gerakan perlahan

Question

Saya memerlukan pratonton gelangsar untuk bergerak mengikut imej, tetapi kini ia bergerak serta-merta ke penghujung

Saya cuba mencipta peluncur pratonton menggunakan dua butang (kiri dan kanan) tetapi apabila saya menekan butang kanan ia bergerak ke penghujung manakala saya memerlukannya untuk bergerak mengikut imej Berikut adalah pautannya: https://codepen.io/alexvambato/pen/yLGBxKK

<div class="img-container1" style="float:left; margin:10px;max-width: 530px">
<!-- Cipta peluncur. -->
<gaya>
/* Lihat gaya pada 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>
<skrip>
fungsi 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;')
}
fungsi 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

Untuk membina peluncur seperti itu, anda perlu memaparkan imej dan gambar dengan ketinggian dan lebar yang sama. Sebagai contoh, 100 piksel, maka setiap img harus memaparkan imej dalam mod dipergiatkan. Setelah selesai, anda perlu menulis beberapa kod dalam JavaScript seperti ini:

Pertama, anda perlu menentukan pembolehubah yang menunjukkan kedudukan peluncur.

var pos = 0; //Ini sepatutnya pembolehubah global

Dalam fungsi bergerak dan bergerak anda perlu menambah/mengurangkan nilai pos. Berdasarkan ini, anda boleh menetapkan nilai margin peluncur seperti berikut:

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

Sudah tentu, nilai pos harus mempunyai had kiraan imej dan nilai negatif.