Question

我有一个包含不同HTML消息的轮播，我们希望用户“浏览”消息，以便他们查看每组幻灯片。我们正在使用bxSlider，一切正常，直到我使用JQuery更改幻灯片的内容。当用户点击X时，幻灯片的内容将发生变化，但当用户到达幻灯片的末尾并再次显示幻灯片2时，幻灯片2将显示原始HTML内容，直到幻灯片1成为焦点然后内容像我想要的那样切换回JQuery刷新。

我的解释可能令人困惑，但你可以在这里看到我的小提琴：
http://jsfiddle.net/t6dKJ/
重新创建的步骤：

点击审批框中的X
单击向左箭头以向后浏览幻灯片
观看审批框更改

幻灯片的HTML：

<div class="slide" id="approvals">
  <div class="panel tip-panel" id="num-message">
    <div class="panel-head"><h2>APPROVALS</h2><div class="close">X</div></div>
    <div class="panel-body">
    <p><span id="number">2</span> Approvals pending</p>
    <a href="#" class="link">Link to Approvals</a>
    </div><!-- End Panel Body -->
</div><!-- End Panel -->
<br>
<br>
</div>

bxSlider的JS选项和刷新的click事件：

$('.boxslider').bxSlider({
    slideWidth: 320,
    minSlides: 2,
    maxSlides: 3,
    moveSlides: 1,
    slideMargin: 10,
    infiniteLoop: true,
  });
$('#approvals').on('click', 'div.close', function(){
    var message = $(this).closest('.tip-panel').find('.panel-body');
    $(message).html('4');
});

解决方案我无法使用：
将infiniteLoop切换为false。滑块要求滑块无限期地滚动滑动。

刷新原因：
最终，当他们点击刷新时，将进行AJAX调用以更新幻灯片的内容。由于用4替换内容不起作用，我们还没有尝试实现AJAX调用。

我尝试过的事情：
当我厌倦了这个时，重新加载滑块似乎不起作用：
http://bxslider.com/examples/reload-slider-settings
在这个帖子上建议：
bxslider not working properly for dynamically loaded content

Answer 1

您需要访问并更改正在更改的幻灯片中克隆版本中的html（向后/向后移动后显示的元素）。

示例：

$('.boxslider').bxSlider({
        slideWidth: 320,
        minSlides: 2,
        maxSlides: 3,
        moveSlides: 1,
        slideMargin: 10,
        infiniteLoop: true,
      });
    $('#approvals').on('click', 'div.close', function(){
        var message = $(this).closest('.tip-panel').find('.panel-body');
        $(message).html('4');
        $('.bx-clone#'+$(this).closest('.slide').attr('id')).find('.tip-panel .panel-body').html('4');
    });

Fiddle

bxslider - 没有使用JQuery正确刷新幻灯片

1 个答案: