Search code examples
javascriptjquerybxslider

Loop to first slide if all existing slide gets over in BX Slider

I am using bx slider for my website. I wan to know how can I avoid blank space if content gets over while sliding through next slides. Is it possible it can display or loop back to first slides. For reference I have attached screenshot below enter image description here As you can see there are white space coming right side because there is no more slides. How can I show first second slides there so it goes on loop.

function loadgallery() {
        setTimeout(function () {
            var maxSlides;
            width = $(window).width();

            if (width < 1023) {
                maxSlides = 1;

            } else {
                maxSlides = 4;
            }
            var myslider = $('.bxslider').bxSlider({
                video: true,
                minSlides: 1,
                auto: false,
                maxSlides: maxSlides,
            });
        }, 500);
    }
Solution

  • There are some hard learned facts about bxSlider that's not apparent and/or documented.

    1. There are some critical settings that apply to horizontal carousel (mode:"horizontal" (default)):

      • The slideWidth: Number is required
      • If infiniteLoop: true (default), it's strongly recommended that total number of slides be an even amount.
      • maxSlides: Number value should evenly divide into total number of slides.
      • minSlides: Number value should be the same value as moveSlides: Number

    2. If bxSlider is running multiple slides, and keeping slides eveningly centered after a resize is failing, use shrinkItems: true. Upon loading and resize, bxSlider will recalculate slide dimensions and determine the optimal number of slides that can be shown at one time within viewport width.

    For more on bxSlider options go to this link

    Demo

    Test this Demo in Full Screen (or Full Page of this SO Snippet). Resize the window to test it's responsiveness and how it adapts to multiple slides.

    <!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>100% Fluid Width bxSlider</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" />
  <style>
    li {
      border: 3px solid black;
      margin: 0 auto;
      transform: translateY(-15px)
    }
  </style>
</head>

<body>
  <ul class="bx">
    <li>
    <img src="http://placehold.it/320x180/000/fff?text=1"></li>
    <li>
    <img src="http://placehold.it/320x180/76a/0ff?text=2"></li>
    <li>
    <img src="http://placehold.it/320x180/af2/000?text=3"></li>
    <li>
    <img src="http://placehold.it/320x180/d00/fff?text=4"></li>
    <li>
    <img src="http://placehold.it/320x180/fc0/980?text=5"></li>
    <li>
    <img src="http://placehold.it/320x180/27c/930?text=6"></li>
    <li>
    <img src="http://placehold.it/320x180/f0e/000?text=7"></li>
    <li>
    <img src="http://placehold.it/320x180/0b0/fff?text=8"></li>
    <li>
    <img src="http://placehold.it/320x180/8dd/fff?text=9"></li>
    <li>
    <img src="http://placehold.it/320x180/ad5/fff?text=10"></li>
    <li>
    <img src="http://placehold.it/320x180/975/fff?text=11"></li>
    <li>
    <img src="http://placehold.it/320x180/888/6fa?text=12"></li>
  </ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<script>
  var bx = $(".bx").bxSlider({
    minSlides: 1, //Value should match moveSlides value
    moveSlides: 1, //Value should match minSlides value
    maxSlides: 4, //Make total slides a numerator of this number
    slideWidth: 320, //Required for horizontal carousel
    slideMargin: 5,
    shrinkItems: true // Recalculates and adjusts when resized
  });
  </script>
</body>

</html>