Bx slider - showing partial slides on extreme right when using full width carousel

Question

I used bx slider to run a slider on my nodejs website. Here is my code:

$(document).ready(function(){
    $(".bxslider").bxSlider({
        minSlides: 1,
        maxSlides: 40,
        slideWidth: 300,
        slideMargin: 40,
        moveSlides: 1
    });
});//document ready

As the slider was required to be 100% fluid width, I set maxSlides to a large enough number (40 here). This made the slider expand to the full width in a fluid manner. But the issue now is that as the slider width is fluid, at some widths, the rightmost visible slide is shown only partially. I want it to either show this complete slide or leave it if it is not completely visible in the current viewport.

I could not find a solution and had to use the workaround to set different number of slides visible at different widths :( — Mohit Bhardwaj, Mar 25 '16 at 10:16

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

UPDATE

OP requests a less complex example using shrinkItems.

PLUNKER

Use shrinkItems : The Carousel will only show whole items and shrink the images to fit the viewport based on maxSlides/MinSlides. Nothing more to say than it just never ever leaves a slide in a partial view.

PLUNKER

SNIPPET

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>100% Fluid Width bxSlider</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
  <style>
    li {
      min-height: 160px;
      border: 3px solid black;
      margin: 0 auto;
    }
    
    .s10 {
      min-height: 160px;
      border: 5px solid red;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <ul class="bx1">
    <li class='s10'>SET 0</li>
    <li><img src="http://placehold.it/350x195/000/fff?text=1"></li>
    <li><img src="http://placehold.it/440x170/000/fff?text=2"></li>
    <li><img src="http://placehold.it/200x310/000/fff?text=3"></li>
    <li><img src="http://placehold.it/500x180/000/fff?text=4"></li>
    <li><img src="http://placehold.it/150x160/000/fff?text=5"></li>
    <li><img src="http://placehold.it/300x250/000/fff?text=6"></li>
    <li><img src="http://placehold.it/350x150/000/fff?text=7"></li>
    <li><img src="http://placehold.it/350x150/000/fff?text=8"></li>
    <li><img src="http://placehold.it/350x150/000/fff?text=9"></li>
    <li class='s10'>SET 1</li>
    <li><img src="http://placehold.it/310x195/000/fff?text=11"></li>
    <li><img src="http://placehold.it/540x170/000/fff?text=12"></li>
    <li><img src="http://placehold.it/260x210/000/fff?text=13"></li>
    <li><img src="http://placehold.it/700x180/000/fff?text=14"></li>
    <li><img src="http://placehold.it/340x160/000/fff?text=15"></li>
    <li><img src="http://placehold.it/300x250/000/fff?text=16"></li>
    <li><img src="http://placehold.it/350x150/000/fff?text=17"></li>
    <li><img src="http://placehold.it/350x190/000/fff?text=18"></li>
    <li><img src="http://placehold.it/360x150/000/fff?text=19"></li>
    <li class='s10'>SET 2</li>
    <li><img src="http://placehold.it/350x195/000/fff?text=21"></li>
    <li><img src="http://placehold.it/440x170/000/fff?text=22"></li>
    <li><img src="http://placehold.it/200x310/000/fff?text=23"></li>
    <li><img src="http://placehold.it/500x180/000/fff?text=24"></li>
    <li><img src="http://placehold.it/150x160/000/fff?text=25"></li>
    <li><img src="http://placehold.it/300x250/000/fff?text=26"></li>
    <li><img src="http://placehold.it/350x150/000/fff?text=27"></li>
    <li><img src="http://placehold.it/350x150/000/fff?text=28"></li>
    <li><img src="http://placehold.it/350x150/000/fff?text=29"></li>
    <li class='s10'>SET 3</li>
    <li><img src="http://placehold.it/630x195/000/fff?text=31"></li>
    <li><img src="http://placehold.it/450x620/000/fff?text=32"></li>
    <li><img src="http://placehold.it/300x390/000/fff?text=33"></li>
    <li><img src="http://placehold.it/400x180/000/fff?text=34"></li>
    <li><img src="http://placehold.it/150x160/000/fff?text=35"></li>
    <li><img src="http://placehold.it/390x250/000/fff?text=36"></li>
    <li><img src="http://placehold.it/520x190/000/fff?text=37"></li>
    <li><img src="http://placehold.it/340x130/000/fff?text=38"></li>
    <li><img src="http://placehold.it/550x155/000/fff?text=39"></li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
  <script>
    $(document).ready(function() {
      var bx1 = $(".bx1").bxSlider({
        minSlides: 1,
        maxSlides: 40,
        slideWidth: 300,
        slideMargin: 5,
        moveSlides: 1,
        shrinkItems: true
      });
    });
  </script>
</body>

</html>

That seems to solve the problem. I think `shrinkItems` is present in latest version of bx-slider and documentation on bxslider.com is not updated to show that. Can you please make a simpler demo? I mean is it necessary to create this structure of `dd` and `dt`'s? — Mohit Bhardwaj, Jun 29 '16 at 06:17
Sure, no problem. It's just a matter of preference, you can use anything as long as it's a block. — zer00ne, Jun 29 '16 at 06:44
Ok, I updated with the classic `
` and `
` combination. I used 40 slides as well. — zer00ne, Jun 29 '16 at 07:00

Bx slider - showing partial slides on extreme right when using full width carousel

1 Answers1

UPDATE

SNIPPET