All geek questions in one place

Scroll the infinite loop bxslider from left to first slide instead of right to loop

I have a quick question with bxslider.

The problem I am facing is that infiniteLoop is set to true, however, when it reaches the last image, it goes left instead of the first slide of the loop. Here is my code:

<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>
+4
source share
8 answers

I found this solution earlier that might work for you if you haven't found a solution yet.

For me, the problem was CSS3 transitions and adding useCSS: falseforcing bxslider to use jQuery for transitions instead of 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>
+6
source

. , bx-clone html, bxslider. 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>
0

, , . , , , , . .

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

, Bxslider ul. 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 .

, "" , ! . .

, css:

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

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, infinLoop: true, autoReload: true,

0

, , , bxslider - .

Ctrl + U bxslider. , , .

0

, -.

boxslider. , , . , , 1- . , "infiniteloop". true jquery.bxslider.js, 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,

What I had to do to fix this changed the min / maxslides values. Whatever the default values, they did not allow the infiniteloop configuration to work properly. Some experimentation may be required depending on your slider requirements, but this is what worked for my problem.

$(document).ready(function(){


$('.slider1').bxSlider({


 mode: 'horizontal',


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

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

slideMargin: 20,


controls: true
0
source

Source: https://habr.com/ru/post/1532203/

More articles:


All Articles