Bx滑块 - 使用全宽旋转木马时显示极右侧的部分滑块

Question

Bx滑块 - 使用全宽旋转木马时显示极右侧的部分滑块

我使用bx滑块在我的nodejs网站上运行滑块.这是我的代码:

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

Run Code Online (Sandbox Code Playgroud)

由于滑块需要100%流体宽度,我设置maxSlides为足够大的数字(此处为40).这使滑块以流动的方式扩展到整个宽度.但现在的问题是,由于滑块宽度是流动的,在某些宽度处,最右边的可见滑块仅部分显示.我想要它显示这个完整的幻灯片,或者如果它在当前视口中不完全可见则保留它.

Answer 1

zer*_*0ne 2

更新

OP 请求一个不太复杂的示例，使用shrinkItems.

笨蛋

使用shrinkItems：轮播将仅显示整个项目，并根据 maxSlides/MinSlides 缩小图像以适合视口。没什么可说的，就是它永远不会在局部视图中留下幻灯片。

笨蛋

片段

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，1 月前
查看次数：	2088 次
最近记录：	7 年，5 月前