bxSlider external pager

[am5555]

Hello there,

I'm using your bxSlider, which is awesome btw, thanks, and I'm attempting to have pager controls for the slider, which are outside of the slider. I've listed the code (minus some formatting, since I wasn't sure how to post code here) below, which shows what I'm attempting to do. I'd really appreciate if you wouldn't mind giving me an idea what I'm doing wrong here.

Thanks!

(slider html) div id="slider1" div slide one content /div div slide two content /div div slide three content /div div slide four content /div div slide five content /div /div

(outside pager html) div class="slider1nav" a href="" id="slideone">Link 1 a href="" id="slidetwo">Link 2 a href="" id="slidethree">Link 3 a href="" id="slidefour">Link 4 a href="" id="slidefive">Link 5 /div

(jquery) $(function(){ $('#slider1').bxSlider({ mode: 'fade', controls: false }); }); $('#slideone, #slidetwo, #slidethree, #slidefour, #slidefive').click(function(){ slider.goToSlide('.slider1nav a'); return false; });

[craigmdennis]

You need to assign a variable name to the slider in order to control it.

var slider = $('#slider1').bxSlider({
    mode: 'fade',
    controls: false
});

Then you can do:

$('#slideone).click(function(event){
    event.preventDefault();
    slider.goToSlide(2);
});

The public function only accept a number. This page should give you an idea: http://bxslider.com/examples/custom-controls-outside-slider

Also it's better to use event.preventDefault(); than return false; to prevent the link from jumping the page.

[sween]

the above bxslider example is casters up :/

[Tusko]

bxSlider init:

$('selector > ul').bxSlider({
    pagerCustom: '.nav2slider'
});

html for custom pager:

< nav class="nav2slider">
    < a href=""  data-slide-index="0">Slide 1</a>
    < a href=""  data-slide-index="1">Slide 2</a>
    < a href=""  data-slide-index="2">Slide 3</a>
    < a href=""  data-slide-index="3">Slide 4</a>
    < a href=""  data-slide-index="4">Slide 5</a>
    < a href=""  data-slide-index="5">Slide 6</a>
< /nav>