jQuery 为什么 bxslider 复制我的 div

Why is bxslider duplicating my divs

提问by user1899829

My designer put a bxslider to scroll through 3 divs nicely on my page. When the page runs, in the html I see it generates 6 divs on the page. It shows div 3, div2, div1, div3, div2, div1.

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

Just because the duplicated fields on my page now mess up my programing.

只是因为我页面上的重复字段现在弄乱了我的编程。

Is that neccesary, and is there any way I can touch the code that it shouldn't duplicate my divs?

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

The page is full of complex code , with an ajax passing the data-serialize to a post form. Becuase it's all duplicated, now all fields are coming through as 'value,value'. Therefore it's not giving me accurate respones, and well as undefined when it's supposed to be numeric.

该页面充满了复杂的代码，一个 ajax 将数据序列化传递到一个帖子表单。因为它都是重复的，现在所有字段都以“值，值”的形式出现。因此，它没有给我准确的响应，并且在它应该是数字时未定义。

My form posts looks like this:

我的表单帖子如下所示：

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

How could I add that not bx- to it?

我怎么能加上那个不是 bx- 呢？

回答by antongorodezkiy

As commentedin the source code of bxSlider:

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

if infinite loop, prepare additional slides

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

So I was able to fix this by adding infiniteLoop: falseto the config object:

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

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

回答by isherwood

BxSlider duplicates elements to allow infinite scrolling, etc. For example, say you only have two elements in your slider. Element one might be sliding out on the left, but also sliding in on the right. Therefore, duplicates are required.

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

If this is a problem, you can usually interact with the duplicates using their bx-cloneclasses. If you could clarify the actual problem, we could probably give more specific advice.

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

Update: To eliminate cloned elements from your set, try something like:

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

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

回答by Amir Amiri

I had such problem with bx-clone I want to use it for an image gallery. So I had a thumbnail image slider and for slider I used bx-slider and on each click on small image , that image in bigger size must show in a div , But on bx-clone clicked nothing happened

我对 bx-clone 有这样的问题，我想将它用于图片库。所以我有一个缩略图滑块，对于滑块，我使用了 bx-slider 并且每次点击小图像时，较大尺寸的图像必须显示在 div 中，但是在 bx-clone 上点击什么也没发生

I solved that problem with this :

我用这个解决了这个问题：

 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 **/

            });  
           }
        });

回答by Raphael

Adding to @antongorodezkiy's answer, there is a way to have infiniteLoop: falseand still get a non-stopping slide changing: using the onSlideAfterevent of the last slide you can, after a few seconds, go back to the first slide and re-start the automode:

添加到@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
        }
    }
});

The difference between this solution and the infiniteLoop: trueoption is that instead of smoothly transitioning back to the first slide as if it was the next, the slider quickly "rewinds" until reaching the first slide.

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

回答by Nimit Soni

for above query: Is it possible to keep having the infinite loop, but remove the clones?

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

try using below code: if more than 1 item infiniteloop: true else :false

尝试使用以下代码：如果超过 1 个项目无限循环：真否则：假

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

回答by mubashermubi

Just to answer here, so if some one is struggling and cannot fix the duplication issue. I was facing the same problem that all of my HTML from my page was duplicating inside the first slide under the image tag like bellow:

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

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

I just found that I was writing the image tag not properly

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

Meaning my code was something like this for image tag

这意味着我的代码对于图像标签是这样的

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

I just replaced my image tag with valid HTML like bellow:

我只是用有效的 HTML 替换了我的图像标签，如下所示：

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

and it fixed the content duplication issue.

并修复了内容重复问题。

Hope it will help someone.

希望它会帮助某人。

Cheers!

干杯!

回答by Jorge Mauricio

I′m not sure if it′s the same issue I was facing, but here′s my case: My code was using bx slider together with fancybox. And it was duplicating my slides. The solution was to put the secodary code (fancy box), which was generated in my image loop, inside the

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

tag. That did it for me.

标签。那是为我做的。