我需要滑块预览按图像移动,但现在它立即移动到末尾
我试着用两个按钮创建预览滑块:向左和向右,但当我按向右时,它移到了最后,而我需要它按图像移动 以下是链接: https://codepen.io/alexvambato/pen/yLGBxKK个
<div class="img-container1" style="float:left; margin:10px;max-width: 530px">
<!-- Create slider. -->
<style>
/* See the 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>