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

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

我遇到的问题是，infinitelloop设置为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>

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

对我来说，问题是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>

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

进一步研究，GitHub上提出了一个问题，标志着这一点-有一个缓冲内置到插件的容器宽度不够大:https://github.com/stevenwanderski/bxslider-4/issues/467

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

我试过了，它对我很有效。

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

破碎的代码:

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

固定代码:

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

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

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

似乎Bxslider有时错误地计算了包装容器的宽度。这将强制结束bxclone不呈现到最后一个元素的右侧。无论如何我都不能让它移除内嵌的margin-right它添加了内部的li元素但是一个简单的:

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

帮我解决了。

上面是对的修复

$('#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 }]
});

现在我使用2px，因为bxslider将其设置为5px，这使得它的宽度，取决于格式，3px或4px甚至0解决它为你。

我知道这被归类为"丑陋"的bug，我们不喜欢!重要。但这是内联注入样式所以。

下面是简单的非sass，非响应css:

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

如果你正在使用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>

忽略PHP设置。最主要的是设置slideMargin: 0, infinitelloop:true, autoReload:true，

这可能看起来很愚蠢，当我的一个其他开发人员意识到我们两次调用bxslider函数时，我一直在努力解决这个问题，一次是从插件调用，另一次是手动调用。

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

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

我正在使用一个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>

改变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,

我要做的是改变最小/最大幻灯片值来修复它。无论它们的默认值是什么，它们都不允许无限循环设置正常工作。这可能需要一些一些实验，这取决于你自己对滑块的要求，但这是我的问题。

$(document).ready(function(){

$('.slider1').bxSlider({

 mode: 'horizontal',

slideWidth: 940,
minSlides: <!--from 1--> to 0,
maxSlides: <!--from 9--> to 1,
slideMargin: 20,

controls: true

相关内容

最新更新

热门标签：