我使用 bx slider 在我的 nodejs 网站上运行一个 slider 。这是我的代码:
$(document).ready(function(){
$(".bxslider").bxSlider({
minSlides: 1,
maxSlides: 40,
slideWidth: 300,
slideMargin: 40,
moveSlides: 1
});
});//document ready
由于 slider 需要 100% 流畅宽度，我将 maxSlides 设置为足够大的数字(此处为 40)。这使得 slider 以流畅的方式扩展到整个宽度。但现在的问题是，由于 slider 宽度是可变的，在某些宽度下，最右边的可见幻灯片仅部分显示。我希望它显示这张完整的幻灯片，或者如果它在当前视口(viewport)中不完全可见则保留它。
最佳答案
更新
OP 使用 shrinkItems 请求一个不太复杂的示例。
使用shrinkItems :轮播将仅显示整个元素并缩小图像以适应基于 maxSlides/MinSlides 的视口(viewport)。没什么好说的，它永远不会在局部 View 中留下幻灯片。
片段
<!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>关于jquery - Bx slider - 使用全宽轮播时在最右侧显示部分幻灯片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26600993/