Geek Answers Handbook

Bx slider - shows partial slides on the far right when using a full-sized carousel

I used the bx slider to launch the 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

Since the slider was supposed to be 100% liquid wide, I set maxSlides to a fairly large number (40 here). Thanks to this, the slider expanded to its full width. But now the problem is that as the width of the slider is fluid, at a certain width, the rightmost visible slide is only partially displayed. I want it to display this full slide or leave it if it is not fully visible in the current viewport.

+7
jquery css bxslider
source share
1 answer

UPDATE

The OP requests a less complex example using shrinkItems .

Plunker

Use shrinkItems : The carousel will only show whole objects and compress images to fit the viewport based on maxSlides / MinSlides. There is nothing more to say than simply never leaving the slide in partial form.

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> dd { min-height: 160px; border: 3px solid black; margin: 0 auto; } dt { min-height: 160px; border: 5px solid red; margin: 0 auto; } </style> </head> <body> <dl class="bx1"> <dt class='s10'>SET 0</dt> <dd><img src="http://placehold.it/350x195/000/fff?text=1"></dd> <dd><img src="http://placehold.it/440x170/000/fff?text=2"></dd> <dd><img src="http://placehold.it/200x310/000/fff?text=3"></dd> <dd><img src="http://placehold.it/500x180/000/fff?text=4"></dd> <dd><img src="http://placehold.it/150x160/000/fff?text=5"></dd> <dd><img src="http://placehold.it/300x250/000/fff?text=6"></dd> <dd><img src="http://placehold.it/350x150/000/fff?text=7"></dd> <dd><img src="http://placehold.it/350x150/000/fff?text=8"></dd> <dd><img src="http://placehold.it/350x150/000/fff?text=9"></dd> <dt class='s10'>SET 1</dt> <dd><img src="http://placehold.it/310x195/000/fff?text=11"></dd> <dd><img src="http://placehold.it/540x170/000/fff?text=12"></dd> <dd><img src="http://placehold.it/260x210/000/fff?text=13"></dd> <dd><img src="http://placehold.it/700x180/000/fff?text=14"></dd> <dd><img src="http://placehold.it/340x160/000/fff?text=15"></dd> <dd><img src="http://placehold.it/300x250/000/fff?text=16"></dd> <dd><img src="http://placehold.it/350x150/000/fff?text=17"></dd> <dd><img src="http://placehold.it/350x190/000/fff?text=18"></dd> <dd><img src="http://placehold.it/360x150/000/fff?text=19"></dd> <dt class='s10'>SET 2</dt> <dd><img src="http://placehold.it/350x195/000/fff?text=21"></dd> <dd><img src="http://placehold.it/440x170/000/fff?text=22"></dd> <dd><img src="http://placehold.it/200x310/000/fff?text=23"></dd> <dd><img src="http://placehold.it/500x180/000/fff?text=24"></dd> <dd><img src="http://placehold.it/150x160/000/fff?text=25"></dd> <dd><img src="http://placehold.it/300x250/000/fff?text=26"></dd> <dd><img src="http://placehold.it/350x150/000/fff?text=27"></dd> <dd><img src="http://placehold.it/350x150/000/fff?text=28"></dd> <dd><img src="http://placehold.it/350x150/000/fff?text=29"></dd> <dt class='s10'>SET 3</dt> <dd><img src="http://placehold.it/630x195/000/fff?text=31"></dd> <dd><img src="http://placehold.it/450x620/000/fff?text=32"></dd> <dd><img src="http://placehold.it/300x390/000/fff?text=33"></dd> <dd><img src="http://placehold.it/400x180/000/fff?text=34"></dd> <dd><img src="http://placehold.it/150x160/000/fff?text=35"></dd> <dd><img src="http://placehold.it/390x250/000/fff?text=36"></dd> <dd><img src="http://placehold.it/520x190/000/fff?text=37"></dd> <dd><img src="http://placehold.it/340x130/000/fff?text=38"></dd> <dd><img src="http://placehold.it/550x155/000/fff?text=39"></dd> </dl> <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.5/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>
+2
source share

More articles:


All Articles