jQuery bxslider 无限循环向左滚动到第一张幻灯片而不是向右滚动

bxslider infinite loop scrolls left to first slide instead of right to loop

提问by Kevin Davis

I have a quick question with bxslider.

我有一个关于 bxslider 的快速问题。

The issue that I'm having is that an infiniteLoop set to true, however, when it gets to the last image it goes left instead of the first slide of the loop. Here is my code:

我遇到的问题是无限循环设置为 true，但是，当它到达最后一张图像时，它会向左移动，而不是循环的第一张幻灯片。这是我的代码：

<script type="text/javascript">
  $(document).ready(function(){ 
     $('.bxslider').bxSlider({

         auto: true,
         autoControls: false,
         controls: false,
         pause: 4000,
         infiniteLoop: true,
         mode: 'horizontal',
         autoDirection: 'next',
         responsive: true,
         preloadImages: 'all',
         minSlides: 2,
         autoDelay: 0,
         randomStart: false,
         pager: false,
         moveSlideQty: 1

       });
     });
   </script>    

回答by Matt Royal

I found this solution previously that may work for you if you have not yet found a solution.

如果您还没有找到解决方案，我之前找到了这个可能对您有用的解决方案。

For me the problem was the CSS3 transitions and adding useCSS: falseforces bxslider to use jQuery for the transitions instead of CSS.

对我来说，问题是 CSS3 转换并adding useCSS: false强制 bxslider 使用 jQuery 而不是 CSS 进行转换。

    <script type="text/javascript">
      $(document).ready(function(){ 
         $('.bxslider').bxSlider({

             auto: true,
             autoControls: false,
             controls: false,
             pause: 4000,
             infiniteLoop: true,
             mode: 'horizontal',
             autoDirection: 'next',
             responsive: true,
             preloadImages: 'all',
             minSlides: 2,
             autoDelay: 0,
             randomStart: false,
             pager: false,
             moveSlideQty: 1,
useCSS: false,

           });
         });
       </script>  

回答by crdunst

This seems to occur for me when I set minSlides to 1. None of the other solutions worked for me, but changing minSlides to more than 1 stops the issue from occuring.

当我将 minSlides 设置为 1 时，这似乎发生在我身上。其他解决方案都不适合我，但是将 minSlides 更改为 1 以上会阻止问题发生。

Looking into this further, there's an issue raised on GitHub that flags this up - there's a cushion built into the plugin for the container width that isn't large enough: https://github.com/stevenwanderski/bxslider-4/issues/467

进一步研究这一点，GitHub 上提出了一个问题，标记了这一点 - 插件中内置了一个缓冲垫，用于容器宽度不够大：https: //github.com/stevenwanderski/bxslider-4/issues/ 467

There's a simple fix committed waiting to be merged: https://github.com/stevenwanderski/bxslider-4/pull/468/files

有一个简单的修复已提交等待合并：https: //github.com/stevenwanderski/bxslider-4/pull/468/files

I've tried it, and it worked for me.

我试过了，它对我有用。

回答by Martin Andersson

Seems like Bxslider sometimes miscalculates the width of the wrapping ul container. This forces the ending bxclone to not render to the right of the last element. No matter how I couldn't get it to remove the inline margin-right it added to the inner li elements however a simple:

似乎 Bxslider 有时会错误计算包装 ul 容器的宽度。这会强制结束 bxclone 不呈现在最后一个元素的右侧。无论我如何都无法删除它添加到内部 li 元素的内联边距，但是很简单：

.bxslider{
@include respond-to-max(phones) {
        margin-right: 2px !important;
    }
}

solved it for me.

为我解决了。

Above is a fix for

以上是修复

$('#section-from-store-slider').bxSlider({ 
    mode: 'horizontal',
    captions: false,
    adaptiveHeight: true,
    prevText: '',
    nextText: '',
    slideMargin: 0,
    autoReload: true,
    infiniteLoop: true,
    breaks: [{ screen: 0, slides: 1 }, { screen: 768, slides: 3 }, { screen: 1024, slides: 4 }]
});

Now I used 2px since bxslider set it to 5px which made it to wide, depending on format, 3px or 4px or perhaps even 0 solves it for you.

现在我使用了 2px，因为 bxslider 将它设置为 5px 使其变宽，具体取决于格式，3px 或 4px 甚至 0 都可以为您解决。

I know this is classified as an "ugly" bug, we don't like !important. But this is injected inline style so.

我知道这被归类为“丑陋”的错误，我们不喜欢 !important。但这是注入内联样式所以。

Below would be the simple non sass, non responsive css:

下面是简单的非 sass、非响应式 css：

#yourslider.bxslider li{
    margin-right:0 important!;
}

回答by rhysclay

If you are using Wordpress and have your slider in the sidebar then the issue appears to be that the slideMargin option (>0) is stopping the images from being in order. These are the settings I have used:

如果您使用的是 Wordpress 并且在侧栏中有滑块，那么问题似乎是 slideMargin 选项 (>0) 阻止图像按顺序排列。这些是我使用过的设置：

<script type="text/javascript">
jQuery(window).load(function() {
    jQuery('.testimonials-slider').bxSlider({
            minSlides: 1,
            maxSlides: 1,
            slideMargin: 0,
            infiniteLoop:true,
            autoReload:true,
            auto: <?php echo isset($data['auto']) ? $data['auto'] : "true";?>,
            pager:<?php echo isset($data['pager']) ? $data['pager'] : "true";?>,                
            adaptiveHeight:true,
            controls:<?php echo isset($data['controls']) ? $data['controls'] : "true";?>,
            autoControls: false,
            speed:<?php echo ((isset($data['speed'])) and (!empty($data['speed']))) ? $data['speed'] : "500";?>,
            mode:'<?php echo isset($data['mode']) ? $data['mode'] : "horizontal";?>',
            randomStart:<?php echo isset($data['randomstart']) ? $data['randomstart'] : "false";?>,
            pause: <?php echo ((isset($data['pause'])) and (!empty($data['pause']))) ? $data['pause'] : "5000";?>
    });
});
</script>

Just ignore the PHP settings. The main thing is to set slideMargin: 0, infiniteLoop:true, autoReload:true,

只需忽略 PHP 设置。主要是设置slideMargin:0,infiniteLoop:true,autoReload:true,

回答by Shreyas Gaonkar

This may seem to be stupid and I was struggling with this problem a lot, when one of my other developers realized that we were calling the bxslider function twice - once from the plugin and other, manually.

这似乎很愚蠢，当我的其他开发人员之一意识到我们正在调用 bxslider 函数两次时，我一直在为这个问题苦苦挣扎——一次是从插件中调用，一次是手动调用。

On chrome, hit Ctrl + U, and do a quick search for bxslider. If you see it twice, remove from the course code and you should be good.

在 chrome 上，按 Ctrl + U，然后快速搜索 bxslider。如果你看到它两次，从课程代码中删除，你应该很好。

回答by Bob

My issue was slightly different, but this may help someone.

我的问题略有不同，但这可能对某人有所帮助。

I was working with a boxslider. Lets say I have had four slides automatically rotating on the carousel. The code that I started with was set to start at the 1st slide, and stop at the last. I wanted it to continuously rotate or perform an "infiniteloop". When I set the infinite loop to true in jquery.bxslider.js, the slider would display slides 1 and 2, and when it got to 3, it would zip through it and display slide 1, then 4, and then it would start over again. This of course causes an issue for content that I want to display on slide 3. My code is below, and what I did to fix it.

我正在使用 boxslider。假设我有四张幻灯片在旋转木马上自动旋转。我开始使用的代码设置为从第一张幻灯片开始，并在最后一张幻灯片上停止。我希望它不断旋转或执行“无限循环”。当我在 jquery.bxslider.js 中将无限循环设置为 true 时，滑块将显示幻灯片 1 和 2，当它到达 3 时，它将通过它压缩并显示幻灯片 1，然后显示幻灯片 4，然后它会重新开始再次。这当然会导致我想在幻灯片 3 上显示的内容出现问题。我的代码如下，以及我做了什么来修复它。

<script src="common/js/jquery.bxslider.js"></script>
<link href="common/css/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){


$('.slider1').bxSlider({
mode: 'horizontal',
slideWidth: 940,
minSlides: 1,
maxSlides: 9,
slideMargin: 20,
controls: true


 });
});
</script>



<div id="carousel">


<div class="slider1">
        <div class="slide">[STUFFHERE]</div>
        <div class="slide">[STUFFHERE]</div>
        <div class="slide">[STUFFHERE]</div>
        <div class="slide">[STUFFHERE]</div>
        </div>
        </div>

Changing the settings in jquery.bxslider.js so that infinite loop is true

更改 jquery.bxslider.js 中的设置，使无限循环为真

// GENERAL
    mode: 'horizontal',
    slideSelector: '',
    infiniteLoop: true,
    hideControlOnEnd: false,
    speed: 500,
    easing: 'ease',
    slideMargin: 0,
    startSlide: 0,
    randomStart: false,
    captions: false,
    ticker: false,
    tickerHover: false,
    adaptiveHeight: false,
    adaptiveHeightSpeed: 500,
    video: false,
    useCSS: true,
    preloadImages: 'all',
    responsive: true, 

What I had to do to fix it was change the min/maxslides values. Whatever they default values were, they were not allowing the infiniteloop setting to work properly. It may take some some experimenting depending on your own requirements for the slider, but this is what worked for my problem.

我必须做的修复它是更改 min/maxslides 值。无论它们的默认值是什么，它们都不允许无限循环设置正常工作。根据您自己对滑块的要求，可能需要进行一些试验，但这对我的问题有效。

$(document).ready(function(){


$('.slider1').bxSlider({


 mode: 'horizontal',


slideWidth: 940,
minSlides: <!--from 1--> to 0,

maxSlides: <!--from 9--> to 1,

slideMargin: 20,


controls: true

回答by Stuart

I had a similar issue. For me, the problem was that I had inadvertently added a class of bx-clone to the html elements that make up bxslider's slides. Bxslider adds this class when applied to a set of HTML elements so doing this manually must have interfered with things. When I removed this class attribute then the transitioning from last slide to first was fine (i.e. smoothly continuing to the right rather than scrolling quickly left through all slides).

我有一个类似的问题。对我来说，问题是我无意中在构成 bxslider 幻灯片的 html 元素中添加了一类 bx-clone。Bxslider 在应用于一组 HTML 元素时添加了此类，因此手动执行此操作肯定会干扰事情。当我删除这个类属性时，从最后一张幻灯片到第一张幻灯片的过渡很好（即平滑地继续向右而不是在所有幻灯片中快速向左滚动）。

broken code:

损坏的代码：

<body>

    <script>

        $(document).ready(function(){
            $('.bxslider').bxSlider({
                infiniteLoop: true,
                minSlides: 1,
                maxSlides: 1,
                pager: false,
                slideWidth: 320,
                touchEnabled:true
            });
        });

    </script>

<ul class="bxslider">
  <li class="bx-clone"><img src="images/tree_root.jpg" title="Funky roots" /></li>
  <li class="bx-clone"><img src="images/hill_road.jpg" title="The long and winding road" /></li>
  <li class="bx-clone"><img src="images/trees.jpg" title="Happy trees" /></li>
</ul>

</body>

fixed code:

固定代码：

<body>

    <script>

        $(document).ready(function(){
            $('.bxslider').bxSlider({
                infiniteLoop: true,
                minSlides: 1,
                maxSlides: 1,
                pager: false,
                slideWidth: 320,
                touchEnabled:true
            });
        });

    </script>

<ul class="bxslider">
  <li><img src="images/tree_root.jpg" title="Funky roots" /></li>
  <li><img src="images/hill_road.jpg" title="The long and winding road" /></li>
  <li><img src="images/trees.jpg" title="Happy trees" /></li>
</ul>

</body>

回答by adrian

This is what finally worked for me. This took me ages to work it out but the single quotes for the values, along the other answers listed above, fixed the roll back to first slide issue. It now smoothly transitions to the first.

这就是最终对我有用的方法。这花了我很长时间才解决，但是值的单引号以及上面列出的其他答案将回滚到第一张幻灯片的问题修复了。它现在顺利过渡到第一个。

    <script type="text/javascript">
       $(document).ready(function(){
       $('.bxslider').bxSlider({
           pager: 'false',
           mode: 'horizontal',
           auto: 'true',
           speed:  '900',
           pause:  '6000',
           controls: 'false',
           slideMargin: '20',
           slideWidth:  '940',
           infiniteLoop: 'true',
           maxSlides: '1',
           moveSlides: '1',
           moveSlideQty: '1',
           useCSS: 'false',

        });
        });
    </script>