當3張幻燈片動態添加時，bxSlider左/右箭頭停止工作

感謝大家花時間研究此問題。當3張幻燈片動態添加時，bxSlider左/右箭頭停止工作

所以我工作的頁面有： - 在bxSlider實施

1）購物車，所以基本上它的產品的用戶已添加和用戶可以通過所有的產品滑動列表，每個產品都有一個CROSS按鈕，以便用戶可以將其刪除。

2）產品清單，這基本上是相關產品的列表，每個產品都有一個PLUS按鈕，因此用戶可以將其添加到購物車。

用戶可以通過兩種方式將產品添加到購物車中：通過單擊加號按鈕或拖放產品並將其放入購物車，用於使用Kendo UI Framework的拖放功能，我可以將盡可能多的產品拖放到購物車，bxSlider可以很好地工作，但如果通過PLUS按鈕添加2個以上的產品，則bxSlider中的左/右箭頭將停止工作。

更新： - 我注意到，當我將新產品添加到購物車時，我添加的以前的產品通過顯示屏隱藏：無;屬性。

這裏的JavaScript代碼： -

var slider = $('.bxslider').bxSlider({ 
    minSlides: 2, 
    maxSlides: 2, 
    slideWidth: 250, 
    slideMargin: 0, 
    infiniteLoop: false, 
    pager: false 
}); 

$('ul.product-list.all-related-list').on('click', 'a.icon-plus', function() { 
    $(this).closest('li').toggle('slow', function() { 
     $(this).find('.icon-plus').removeClass('icon-plus').addClass('icon-cross'); 
     $(this).detach().insertBefore('ul.product-list.all-added-list li:first-child').toggle('slow'); 
     slider.reloadSlider(); 
    }); 
});

謝謝！

來源

2016-05-29 Raj

我不願想你忽略了這個，但也許你的問題有事情做與'maxSlides：2，' –

@Timothy，最大幻燈片是沒有問題的，即使刪除/修改沒有幫助。 – Raj

@Raj，按照這個教程http://bxslider.com/examples/reload-slider –

當我在我的文章中更新時，代碼刪除了以前添加的項目，下面的代碼實現了display：block;修復bxslider問題的列表元素的屬性。

$('ul.product-list.all-related-list li a.icon-plus').one('click', function() { 
    $(this).closest('li').toggle('slow', function() { 
     $(this).find('.icon-plus').removeClass('icon-plus').addClass('icon-cross'); 
     $(this).detach().insertBefore('ul.product-list.all-added-list li:first-child').toggle('slow'); 
     slider.reloadSlider(); 
     $(this).siblings().css({'display':'block'}); 
    }); 
});

來源

2016-05-29 18:16:37 Raj

當3張幻燈片動態添加時，bxSlider左/右箭頭停止工作

回答

相關問題