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源代码中的commented：

如果无限循环，请准备其他幻灯片

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

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

Answer 2

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

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

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

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

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

            });  
           }
        });

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代码（花式框）放在

标记内。这样做对我来说。

为什么bxslider会重复我的div

7 个答案: