【问题标题】:How to display default and custom pager in bxslider如何在 bxslider 中显示默认和自定义分页器
【发布时间】:2013-07-26 19:46:55
【问题描述】:

当我尝试为 bx 滑块使用自定义寻呼机时,顶部的默认寻呼机未显示。谁能帮我在 bxslider 中同时显示寻呼机选项

【问题讨论】:

  • 你能贴一些代码吗?
  • $('#sliderRight').bxSlider({infiniteLoop: true, touchEnabled:true, oneToOneTouch:true, preventDefaultSwipeX:true, minSlides:1, maxSlides:1, moveSlides:1, slideWidth:0 , 控件:false, pager: true, pagerCustom: "#pager" });
  • 您的#pager 包含什么?也发布您的 HTML 代码 sn-p。

标签: php jquery jquery-plugins bxslider


【解决方案1】:

在我的代码中,我使用了默认寻呼机,并在JQuery 的帮助下设计了缩略图,它被命名为bubble-wrapper class,每个 li 都有自定义属性 data-气泡 并包含特定的图像。

缩略图将包含图像,单击图像和滑块将显示该图像。

为此,我使用了slider.goToSlide(slideNumber,"direction");

方向可以是“prev”/“next”并确定 slideNumber 我使用了data-bubble

<div class="bubble-wrapper">
    <ul>
        <li><a class="bubble" data-bubble="0"><img src="images/photography.png" height="50" title="photography"/></a>
        </li>
        <li><a class="bubble" data-bubble="1"><img src="images/photography.png" height="50" title="photography"/></a>
        </li>
        <li><a class="bubble" data-bubble="2"><img src="images/photography.png" height="50" title="photography"/></a>
        </li>
        <li><a class="bubble" data-bubble="3"><img src="images/photography.png" height="50" title="photography"/></a>
        </li>
    </ul>
</div>

<script>
var slider = $('.bxslider').bxSlider();
$('a.bubble').click(function () {
    var bubbledSlide=$(this).attr("data-bubble");
    console.log("bubbledSlide"+bubbledSlide);
    slider.goToSlide(bubbledSlide,'prev');
});
</script>

【讨论】:

  • 请添加一些解释。传递底层逻辑比仅仅提供代码更重要,因为它可以帮助 OP 和其他读者自己解决这个问题和类似问题。
  • 我没有投反对票,只是想指出你一开始并没有真正解释你的答案,只是一些代码。现在你添加了一些解释,所以 OP 可以检查一下。
猜你喜欢
  • 2021-08-22
  • 2014-02-26
  • 2014-01-29
  • 2011-01-12
  • 1970-01-01
  • 1970-01-01
  • 2013-04-06
  • 2021-07-14
  • 1970-01-01
相关资源
最近更新 更多