当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左/右箭头停止工作

回答

相关问题