我使用bx滑块在我的nodejs网站上运行滑块.这是我的代码：
$(document).ready(function(){
$(".bxslider").bxSlider({
minSlides: 1,maxSlides: 40,slideWidth: 300,slideMargin: 40,moveSlides: 1
});
});//document ready
由于滑块需要100％流体宽度,我将maxSlides设置为足够大的数字(此处为40).这使滑块以流动的方式扩展到整个宽度.但现在的问题是,由于滑块宽度是流动的,在某些宽度处,最右边的可见滑块仅部分显示.我想让它显示这个完整的幻灯片,或者如果它在当前视口中不完全可见则保留它.
解决方法
UPDATE
OP使用shrinkItems请求一个不太复杂的示例.
使用shrinkItems：轮播将仅显示整个项目并缩小图像以适合基于maxSlides / MinSlides的视口.没有什么可说的,只是从来没有在局部视图中留下幻灯片.
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,slideMargin: 5,moveSlides: 1,shrinkItems: true }); }); </script> </body> </html>
