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'
});

bxSlider 使用编号寻呼机

bxSlider using numbered pager

jquery

css

bxslider