jQuery를 슬라이더

Question

나는 그런 JQuery와 carausel .Thanks :

Answer 1

당신은 이것을 달성 할 수있는 슬라이더가 여러 개 있습니다. 개인적으로는 항상 flexslider를 사용하지만 nivoslider도 좋은 대안입니다. 대부분 사용자의 슬라이더의

http://creative.glenfield.net/nivoexamples3.aspx

http://flexslider.woothemes.com/thumbnail-slider.html

는 CSS입니다.

나는 귀하의 경우에 대해 귀하가 flexslider를 사용한다고 생각합니다.

2 개의 슬라이더를 만들어야합니다. 1은 다른 하나의 탐색 역할을합니다. https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties

이 옵션 아래에 사용할 수 있습니다 주요 슬라이더를 들어 3 항목의 표시를 설정 : 여기 flexslider의 모든 옵션에 대한 링크입니다.

minItems 0 Number Minimum number of carousel items that should be visible. 
maxItems 0 Number Maximum number of carousel items that should be visible. 
move 0 Number Number of carousel items that should move on animation. 

아래 코드를 사용하여 한 슬라이더를 다른 슬라이더의 탐색 경로로 사용하십시오.

$(window).load(function() { 
    // The slider being synced must be initialized first 
    $('#carousel').flexslider({ 
    animation: "slide", 
    controlNav: false, 
    animationLoop: false, 
    slideshow: false, 
    asNavFor: '#slider' 
    }); 

    $('#slider').flexslider({ 
    animation: "slide", 
    controlNav: false, 
    animationLoop: false, 
    slideshow: false, 
    sync: "#carousel" 
    }); 
}); 

희망 나는 당신을 올바른 방향으로 밀었습니다.

Answer 2

을 시도해보십시오이 하나로 연결 사람 attached.Can이 이미지에 같은 유사한 thumnail 스크롤와 JQuery와 슬라이더를 나에게 보낼 필요 .. 나는이 링크는 당신에게 더 많은 아이디어를 제공합니다 생각 ..

http://www.jssor.com/demos/image-gallery.html

그리고이 링크에 11 Likno JQuery와 스크롤러를 참조

http://webtoolsdepot.com/30-best-jquery-image-and-content-slider-plugins/

Answer 3

다음 사이트를 보시면 모든 유형의 회전 목마를보실 수 있습니다.

Carousel Demos

그리고 미리

Carousel with thumbnails

Answer 4

와 다음 당신은이 같은 이미지 소스에 의해 텍스트를 교체 이미지의 썸네일을 추가하려면이 link

이러한 슬라이더를 찾을 수 있습니다

를

<a href="#"><img src="images/1.jpg" alt="img01" height="50px" width="50px"><img src="images/2.jpg" alt="img02" height="50px" width="50px"><img src="images/3.jpg" alt="img03" height="50px" width="50px"></a> 
<a href="#"><img src="images/5.jpg" alt="img05" height="50px" width="50px"><img src="images/6.jpg" alt="img06" height="50px" width="50px"><img src="images/7.jpg" alt="img07" height="50px" width="50px"></a> 
<a href="#"><img src="images/9.jpg" alt="img09" height="50px" width="50px"><img src="images/10.jpg" alt="img10" height="50px" width="50px"><img src="images/11.jpg" alt="img11" height="50px" width="50px"></a> 
<a href="#"><img src="images/12.jpg" alt="img12" height="50px" width="50px"><img src="images/13.jpg" alt="img13" height="50px" width="50px"><img src="images/14.jpg" alt="img14" height="50px" width="50px"></a> 

슬라이더에 표시 할 이미지의 축소판을 표시합니다. 당신이 이것을 얻을 수 있기를 바랍니다.