편집 기록

편집 기록
  • 프로필 nowp님의 편집
    날짜2021.05.14

    제이쿼리 캐러셀 질문입니다.


    무한루프되는 캐러셀 제작 중입니다. 무한루프가 되긴 하는데 카드가 2장씩 넘어가서 카드 한 장 만큼의 여백이 생깁니다. 어디가 이상한 지 봐주시면 감사하겠습니다.

          $('#previous-btn').click(function(){
    
           let index = 0
           const cardWidth = $('.carousel-item').width()+20; // 카드 하나의 넓이+마진만큼 구함
    
           index-=1; // 이전 버튼을 누를 때 마다 index가 줄어듬
    
            $('#carousel-wrapper').css({'transform':'translateX('+cardWidth*index+'px)'}); // 카드의 넓이만큼 카드가 왼쪽으로 이동함
            $('#carousel-wrapper').css({'transition':'0.2s'}); // 부드럽게 움직임
    
            var firstitem = $('.carousel-item').first()
            $('.carousel-item').last().after(firstitem);
            // 무한루프를 만들기 위해 이전버튼을 누르면 앞에 있는 카드가 제일 뒤로 이동
    
  • 프로필 알 수 없는 사용자님의 편집
    날짜2021.05.14

    제이쿼리 캐러셀 질문입니다.


    무한루프되는 캐러셀 제작 중입니다. 무한루프가 되긴 하는데 카드가 2장씩 넘어가서 카드 한 장 만큼의 여백이 생깁니다.. 어디가 이상한 지 봐주시면 감사하겠습니다ㅠㅠ

    ''' $('#previous-btn').click(function(){

       let index = 0
       const cardWidth = $('.carousel-item').width()+20; // 카드 하나의 넓이+마진만큼 구함
    
       index-=1; // 이전 버튼을 누를 때 마다 index가 줄어듬
    
        $('#carousel-wrapper').css({'transform':'translateX('+cardWidth*index+'px)'}); // 카드의 넓이만큼 카드가 왼쪽으로 이동함
        $('#carousel-wrapper').css({'transition':'0.2s'}); // 부드럽게 움직임
    
        var firstitem = $('.carousel-item').first()
        $('.carousel-item').last().after(firstitem);
        // 무한루프를 만들기 위해 이전버튼을 누르면 앞에 있는 카드가 제일 뒤로 이동
    

    '''