슬라이더를 움직이기위한 탭이있는 jQuery 슬라이더

안녕하세요, jQuery 슬라이더에 유용성을 더하기 위해 탭을 추가하려고합니다. HTML에 슬라이드가 몇 개 있는지에 따라 탭을 추가했습니다. 이제이 탭 중 하나 (1, 2, 3, 4) 중 하나를 클릭하면 관련 슬라이드로 나를 이룰 수있는 방향에 대한 아이디어를 가져다 주어야합니다.슬라이더를 움직이기위한 탭이있는 jQuery 슬라이더

var slides = $('.slide'); 
var numberOfSlides = slides.length; 

function createTabs() { // creates tabs based on how many slides in HTML 
for (i = 1; i < numberOfSlides + 1; i++) { 
    $('#tabsstyle').append('<p>' + i + '</p>') 
} 
} 
createTabs(); 
$("#tabsstyle p").click(function() { 
// here the code to jump on the related slide 
})

당신이 더 많은 정보가 필요하면 알려주세요 :

이것은 내가 지금까지있는 것입니다. 덕분에

추가 된 HTML 귀하가 제공 한 정보를 바탕으로

<div id="pageContainer"> 
<!-- Slideshow HTML --> 
<div id="slideshow"> 

<div id="slidesContainer"> 

    <div id="one" class="slide"> 
    <h2></h2> 
    </div> 

    <div id="two" class="slide"> 
    <h2></h2> 
    </div> 

    <div id="three" class="slide"> 
    <h2></h2> 
    </div> 

    <div id="four" class="slide"> 
    <h2></h2> 
    </div> 


</div> 
<div id="tabsstyle"></div>

출처

2012-06-18 Alex

당신에게 HTML을 게시하시기 바랍니다, 우리는 거의'#의 tabsstyle'과를 추측 할 수 없다'p' ... –

그것의 더 나은 당신이 같은 숫자 값으로, '이'하나 '에서 슬라이드의 ID를 변경할 수있는 경우' 1 ','2 '. 이 경우 내 대답이 효과가 있습니다. –

귀하의 필요에 맞게 제 대답을 편집했습니다. 작동하는지 확인하십시오. –

,이 도울 수 있다고 생각합니다. 그것은 100 % 정확하지 않을 수도 있지만 그것은 당신에게 어떤 생각을 줄 수 있습니다.

$("#tabsstyle p").click(function() { 
    var index = $(this).index(); 
    $('#slidesContainer').find('.slide').hide(); 
    $('#tabsstyle').find('p').each(function(pos){ 
     var slideToShow = parseInt(pos) + 1; 
     if(pos == index){ 
      $('#slidesContainer').find('.slide:nth-child('+slideToShow+')').show(); 
     } 
    }); 
})

출처

2012-06-18 10:57:10

슬라이더를 움직이기위한 탭이있는 jQuery 슬라이더

답변

관련 문제