슬라이더 미리보기를 슬로우 모션으로 만드는 방법
<p>이미지별로 이동하려면 슬라이더 미리보기가 필요했는데 지금은 바로 끝으로 이동합니다</p>
<p>두 개의 버튼(왼쪽 및 오른쪽)을 사용하여 미리보기 슬라이더를 만들려고 했는데 오른쪽 버튼을 누르면 끝으로 이동하는 반면 이미지에 따라 이동해야 합니다.
여기 링크가 있습니다:
https://codepen.io/alexvambato/pen/yLGBxKK</p>
<pre class="brush:php;toolbar:false;"><div class="img-container1" style="float:left; margin:10px;max-width: 530px">
<!-- 슬라이더를 만듭니다. -->
<스타일>
/* codepen.io에서 스타일 보기 */
</스타일>
<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>
<스크립트>
함수 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;')
}
함수 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;')
}
<p><br /></p>
