bxslider - 幻燈片沒有用JQuery正確刷新

我有一個傳送帶有不同的HTML消息，我們希望用戶「滑動」消息，以便他們查看每組幻燈片。我們使用bxSlider，並且一切正常，直到使用JQuery更改幻燈片的內容。當用戶點擊X時，幻燈片的內容將發生變化，但當用戶到達幻燈片的末尾並再次顯示幻燈片編號2時，幻燈片2將顯示原始HTML內容，直到幻燈片1成爲焦點，然後內容切換回我想要的JQuery刷新。bxslider - 幻燈片沒有用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>

JS選項的bxSlider和刷新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

來源

2014-03-04 Steve W.

您需要訪問和更改位於正在更改的幻燈片中的克隆版本（在向前/向後移動後顯示的元素）中的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

來源

2014-03-04 21:37:10 Trevor

偉大的作品完美，但我沒有意識到有一個克隆版本，但我想我不是更新所有的右滑的。 –

bxslider - 幻燈片沒有用JQuery正確刷新

回答

相關問題