为什么 bxslider 会复制我的 div答案

【问题标题】：Why is bxslider duplicating my divs为什么 bxslider 会复制我的 div
【发布时间】：2017-09-24 03:07:36
【问题描述】：

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

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

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

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

我的表单帖子如下所示：

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

我怎样才能将它添加到它而不是 bx- 呢？

【问题讨论】：

没有某种代码，我们可以只通过问题，什么也不做。
该页面充满了复杂的代码，一个 ajax 将数据序列化传递给一个 post 表单。因为它都是重复的，所以现在所有字段都以“值，值”的形式出现。因此，它没有给我准确的响应，并且当它应该是数字时是未定义的。
您无法从序列化数据中删除 .bx-clone 元素？
在我的帖子中，我试图获取 Post[field1] 和 post[field2]，作为响应，它传入 field1 = 'value,value' 和 field2='value,value' .有什么办法可以让这些字段只通过一次？
像 $('.bxslider li:not(.bx-clone)') 这样的东西应该可以。

标签： javascript jquery html bxslider

【解决方案1】：

如bxSlider源码中的commented：

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

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

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

【讨论】：

是否可以保持无限循环，但删除克隆？
@Ionut 抱歉，我没有这样的经验。
我不明白这是一个解决方案。它破坏了滑块的实现。在 OP 的案例中，显然无限滚动是一个理想的功能。

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案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 **/

            });  
           }
        });

【讨论】：

【解决方案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 选项之间的区别在于，滑块不会像下一张一样平滑地转换回第一张幻灯片，而是快速“倒回”直到到达第一张幻灯片。

【讨论】：

【解决方案5】：

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

尝试使用以下代码：如果超过 1 项无限循环：true else :false

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

【讨论】：

【解决方案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" />

它修复了内容重复问题。

希望它会帮助某人。

干杯！

【讨论】：

【解决方案7】：

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

标签。那是为我做的。

【讨论】：