2016-11-07 1 views
0

jQuery를 사용하여 자동으로 부드럽게 스크롤하고 반복하는 이미지 회전식 슬라이드/슬라이더를 만들려고합니다. 여기 내가 사용하는 기능입니다 :이 jQuery 캐로 셀을 왼쪽 대신에 스크롤 할 수있는 방법은 무엇입니까?

function spinCarousel() { 
    $("ul li:first-child").animate({ marginLeft: -200 }, 3000, 'linear', function() { 
    $("ul li:first-child").appendTo('ul'); 
    $("ul li:last-child").css('margin-Left', 0); 
    spinCarousel(); 
    }); 
} 

는 그리고 여기 그림입니다 : https://jsfiddle.net/T_Recks/aa43n7g0/

내가 (이미지와 텍스트 및 컬러 배경을 대체) 로컬 개발 사이트에 추가 시도하고 잘 작동하는 것 같다 . 그러나 왼쪽 대신 오른쪽으로 스크롤하는 버전을 만들고 싶지만 알아낼 수는 없습니다. 나는 ". append"를 ".prepend"로 바꾸고 마진 변화를 시도했지만 지금까지는 행운이 없다.

제안 사항?

답변

0

왼쪽에서 오른쪽으로 스크롤하도록 JSFiddle을 포크하고 다시 제작했습니다. 여기에서 확인하십시오 : https://jsfiddle.net/1jw8xpqe/

작동 시키려면 몇 가지 사항을 변경해야합니다.

// reverse items 
var list = $('ul'); 
var listItems = list.children('li'); 
list.append(listItems.get().reverse()); 

// rearrange last two items so first slide starts on left 
list.prepend($('ul li:last-child').prev('li').andSelf()); 

그런 다음 몇 가지 CSS/JS의 개조하면 되겠 어 : 첫째, 목록은 슬라이드의 순서를 반대로 그래서 왼쪽 하나는 슬라이더가 초기화 될 때 "항목 # 1"그들 중 몇 가지를 이동하는 구문 분석된다 slide는 -200px (CSS에서 정의 됨)의 첫 번째 li0으로 움직이고, 각 사이클 후에 -200px에있는 시작 부분에 ul의 마지막 항목을 앞에 붙입니다. 희망이 도움이!

+0

감사합니다. 저는 2 주 밖에 코딩을하지 않았으며 이것은 매우 도움이되었습니다. –

+0

@ T-recks 기꺼이 도와 드릴 수 있습니다! 당신이 upvote 및 해결로 표시된/받아 들였어 이후 도움이 되었습니까? –

관련 문제