为什么bxslider会重复我的div

Question

我的设计师放了一个bxslider在我的页面上很好地滚动了3个div。 当页面运行时，在html中我看到它在页面上生成6个div。 它显示div 3，div2，div1，div3，div2，div1。

仅仅因为我页面上的重复字段现在搞乱了我的编程。

这是必要的，有什么方法我可以触摸它不应该复制我的div的代码？

该页面充满了复杂的代码，ajax将data-serialize传递给post表单。 因为它全部重复，现在所有领域都是'价值，价值'。 因此，它不会给我准确的响应，并且当它应该是数字时未定义。

我的表单帖子如下所示：

function submitCart () {
$.post(
"scripts/savecart.asp",
$("#form1").serialize()
);}

我怎么能添加不是bx-呢？

Answer 1

正如bxSlider的源代码中所评论的那样：

如果无限循环，准备额外的幻灯片

所以我能够通过向config对象添加infiniteLoop: false来解决这个问题：

$(".js-slider").bxSlider({
    infiniteLoop: false
});

Answer 2

BxSlider复制元素以允许无限滚动等。例如，假设您的滑块中只有两个元素。 元素一可能在左侧滑出，但也在右侧滑动。 因此，需要重复。

如果这是一个问题，您通常可以使用他们的bx-clone类与重复项进行交互。 如果你能澄清实际问题，我们可能会提供更具体的建议。

更新：要从您的集合中消除克隆元素，请尝试以下操作：

$('.bxslider li:not(.bx-clone)')....

Answer 3

我有bx-clone这样的问题我想把它用于图片库。 所以我有一个缩略图图像滑块和滑块我使用bx滑块，每次点击小图像时，更大尺寸的图像必须显示在div中，但是在bx-clone上点击没有发生任何事情

我解决了这个问题：

 var slider = $('.bxslider').bxSlider({
        minSlides: 4,
        maxSlides: 4,
        slideWidth: 92,
        moveSlides: 1,
        pager: false,
        slideMargin: 10,

        onSliderLoad: function(){
            $('li.bx-clone').click(function() {

              /** your code for bx clone click event **/

            });  
           }
        });

Answer 4

添加到@ antongorodezkiy的答案，有一种方法可以拥有infiniteLoop: false并且仍然可以获得不停的幻灯片更改：使用最后一张幻灯片的onSlideAfter事件，您可以在几秒钟后返回到第一张幻灯片并重新启动auto模式：

var pauseTime = 4000; //Time each slide is shown in ms. This is the default value.
var timeoutId;
var slider = $('.bxslider').bxSlider({
    auto:         true,
    infiniteLoop: false,
    pause:        pauseTime,

    onSlideAfter: function ($slideElement, oldIndex, newIndex) {
        if (newIndex === slider.getSlideCount() - 1) { //Check if last slide
            setTimeout(
                function () {
                    slider.goToSlide(0);
                    slider.startAuto(); //You need to restart the "auto" mode
                },
                pauseTime //Use the same amount of time the slider is using
            );
        }
        else { //In case the user changes the slide before the timeout fires
            clearTimeout(timeoutId);
            slider.startAuto(); //Doesn't affects the slider if it's already on "auto" mode
        }
    }
});

此解决方案与infiniteLoop: true选项之间的区别在于，滑块不会平滑地过渡回第一张幻灯片，就好像它是下一张幻灯片一样，滑块会快速“倒退”，直到到达第一张幻灯片。

Answer 5

对于上述查询：是否可以保持无限循环，但删除克隆？

尝试使用下面的代码：如果超过1项infiniteloop：true else：false

infiniteLoop: ($j("...selector...").length < 2) ? false : true,

Answer 6

只是回答这里，所以如果有人正在努力，无法解决重复问题。 我遇到了同样的问题，我的页面中的所有HTML都在图像标记下的第一张幻灯片中复制，如下：

<img src="public/admin/scr3.png" ><div>..... all of my page HTML...</div></img>

我刚刚发现我写的图像标签不正确

意思是我的代码对于图像标记是这样的

<img src="public/admin/scr3.png" >

我刚用有效的HTML替换了我的图像标签，如下：

<img src="public/admin/scr3.png" />

它修复了内容重复问题。

希望它会帮助某人。

干杯!

Answer 7

我不确定它是否与我面临的问题相同，但这是我的情况：我的代码是使用bx滑块和fancybox。 它复制了我的幻灯片。 解决方案是将在我的图像循环中生成的secodary代码（花式框）放入

标签。 这样做对我来说。