슬라이더 미리보기를 슬로우 모션으로 만드는 방법

Question

이미지별로 이동하려면 슬라이더 미리보기가 필요했는데 지금은 바로 끝으로 이동합니다

두 개의 버튼(왼쪽 및 오른쪽)을 사용하여 미리보기 슬라이더를 만들려고 했는데 오른쪽 버튼을 누르면 끝으로 이동하는 반면 이미지에 따라 이동해야 합니다. 여기 링크가 있습니다: https://codepen.io/alexvambato/pen/yLGBxKK

<스타일>
/* codepen.io에서 스타일 보기 */


<
    

    

      

      

      
< ;/li>
      

      

    
>


<스크립트>
함수 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;')
}


            

Answer 1

이런 슬라이더를 만들려면 높이와 너비가 동일한 이미지와 그림을 렌더링해야 합니다. 예를 들어 100픽셀이면 각 img는 강화 모드에서 이미지를 렌더링해야 합니다. 완료되면 JavaScript로 다음과 같은 코드를 작성해야 합니다.

먼저 슬라이더의 위치를 ​​나타내는 변수를 정의해야 합니다.

var pos = 0; //전역 변수여야 합니다

이동 및 이동 기능에서는 pos 값을 늘리거나 줄여야 합니다. 이를 바탕으로 슬라이더의 여백 값을 다음과 같이 설정할 수 있습니다.

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

물론, pos 값에는 이미지 수와 음수 값에 대한 제한이 있어야 합니다.