8

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

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

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

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

我的表单帖子如下所示：

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

我怎么能把它添加到它而不是 bx- 呢？

4

7 回答 7

13

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

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

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

$(".js-slider").bxSlider({
    infiniteLoop: false
});
于 2015-01-28T15:06:06.067 回答
4

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

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

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

$('.bxslider li:not(.bx-clone)')....
于 2013-11-04T21:05:27.063 回答
1

添加到@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，滑块不会像下一张一样平滑地过渡回第一张幻灯片，而是快速“倒回”直到到达第一张幻灯片。

于 2016-03-22T21:45:33.013 回答
1

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

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

infiniteLoop: ($j("...selector...").length < 2) ? false : true,
于 2016-03-30T12:52:12.350 回答
1

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

            });  
           }
        });
于 2016-02-07T10:37:39.690 回答
0

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

  • 标签。那是为我做的。

    • 于 2017-09-23T19:07:36.037 回答
    0

    只是在这里回答，所以如果有人在挣扎并且无法解决重复问题。我遇到了同样的问题，我页面中的所有 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" />

    它修复了内容重复问题。

    希望它会帮助某人。

    干杯!

    于 2017-01-13T14:37:16.093 回答