bxSlider используя пронумерованный пейджер

Question

У меня есть этот слайдер, который отлично работает. Мне нужно изменить пейджер на нумерацию, как на втором изображении.

оказываемого следующего код

$('#dinner-slider').bxSlider({ 
    pager: true, 
    auto: true, 
    minSlides: 3, 
    maxSlides: 3, 
    slideWidth: 500, 
    slideMargin: 10, 
    control: false 
}); 

HTML, выглядит следующим образом (я использую holder.js для заполнителей изображений)

<ul id="dinner-slider"> 
    <li><img src="holder.js/100px200?auto=yes&textmode=exact&random=yes&outline=yes" /></li> 
    <li><img src="holder.js/100px200?auto=yes&textmode=exact&random=yes&outline=yes" /></li> 
    <li><img src="holder.js/100px200?auto=yes&textmode=exact&random=yes&outline=yes" /></li> 
    <li><img src="holder.js/100px200?auto=yes&textmode=exact&random=yes&outline=yes" /></li> 
    <li><img src="holder.js/100px200?auto=yes&textmode=exact&random=yes&outline=yes" /></li> 
    <li><img src="holder.js/100px200?auto=yes&textmode=exact&random=yes&outline=yes" /></li> 
</ul> 

Хочу выглядеть так

Любой помощь приветствуется. Спасибо заранее.

Answer 1

Пожалуйста, обратитесь: http://bxslider.com/examples/thumbnail-pager-1 http://bxslider.com/examples/custom-next-prev-selectors

<div id="bx-pager"> 
    <a href="" id="slider-prev"> << </a> 
    <a data-slide-index="0" href="">1</a> 
    <a data-slide-index="1" href="">2</a> 
    <a data-slide-index="2" href="">3</a> 
    <a href="" id="slider-next"> >> </a> 
</div> 

$('#dinner-slider').bxSlider({ 

// add to your code 
    nextSelector: '#slider-next', 
    prevSelector: '#slider-prev', 
    nextText: 'Onward →', 
    prevText: '← Go back' 
});