Menu
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.
621
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
<!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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
