为什么bxslider会复制我的divs？

Question

我的设计师在我的页面上使用了bxslider来滚动3个div，但是当页面运行时，在html中我看到它在页面上生成了6个div。它显示div 3、div 2、div 1、div 3、div 2、div 1。这些重复的字段现在使我的编程混乱了。

这是必要的吗？是否有任何方法可以更改代码以防止它复制我的div？

页面充满了复杂的代码，并通过ajax将数据序列化传递给post表单。由于所有内容都是重复的，因此所有字段现在都变成了'value，value'。因此，它没有给我准确的响应，也没有将其转换为数字时变成未定义状态。

我的表单提交看起来像这样：

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

我该如何将其添加到不是bx-的内容中？

- user1899829

---

没有代码，我们只能跳过问题而不做任何事情。 - drip

该页面充满了复杂的代码，其中一个ajax将数据序列化传递给一个post表单。由于所有字段都是重复的，现在所有字段都以'value,value'的形式出现。因此，它没有给我准确的响应，并且当它应该是数字时，它也会出现未定义的情况。 - user1899829

你不能从序列化数据中删除.bx-clone元素吗？ - isherwood

在我的帖子中，我试图获取Post[field1]和post[field2]，但响应中传递的是field1='value,value'和field2='value,value'。有没有办法让这些字段只通过一次？ - user1899829

类似 $('.bxslider li:not(.bx-clone)') 这样的代码应该可以。 - isherwood

Answer 1

正如在bxSlider的源代码中注释的那样：

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

因此，我通过向配置对象添加infiniteLoop: false来解决了这个问题：

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

- gorodezkiy

---

有没有可能保持无限循环，但移除克隆？ - Ionut Necula

@Ionut 抱歉，我没有这样的经验。 - gorodezkiy

我不认为这是一个解决方案。它会破坏滑块的实现。显然，无限滚动是原帖作者所期望的功能。 - isherwood

Answer 2

BxSlider通过复制元素来实现无限滚动等功能。例如，假设您的滑块中仅有两个元素。元素1可能正在左侧滑出，但是也在右侧滑入。因此，需要复制元素。

如果这是一个问题，您通常可以使用它们的bx-clone类与副本进行交互。如果您能明确实际问题，我们可能会提供更具体的建议。

更新：要从集合中消除克隆元素，请尝试以下内容：

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

- isherwood

Answer 3

我在使用bx-clone时遇到了问题。我想将它用于图像画廊。我有一个缩略图图像滑块，为此我使用了bx-slider，在单击小图像时，应该在一个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 **/

            });  
           }
        });

- Amir Amiri

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 的区别在于，滑块不会平滑地过渡回到第一张幻灯片，而是快速地“倒带”直到到达第一张幻灯片。

- Raphael

Answer 5

针对上述问题：是否可能保留无限循环，但移除克隆？

尝试使用以下代码：如果有多个项目，则无限循环：真，否则为假。

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

- Nimit Soni

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

它解决了内容重复的问题。

希望能对某些人有所帮助。

干杯！

- mubashermubi

Answer 7

我不确定是否与我遇到的问题相同，但这是我的情况： 我的代码与fancybox一起使用bx slider。它会复制我的幻灯片。解决方案是将在图像循环中生成的次要代码（fancybox）放置在

标签内。对我来说就可以了。

- Jorge Mauricio