jquery – Bx滑块 – 使用全宽旋转木马时显示极右侧的部分幻灯片

我使用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请求一个不太复杂的示例.

PLUNKER

使用shrinkItems：轮播将仅显示整个项目并缩小图像以适合基于maxSlides / MinSlides的视口.没有什么可说的,只是从来没有在局部视图中留下幻灯片.

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

原文地址：https://www.jb51.cc/jquery/178319.html

jquery – Bx滑块 – 使用全宽旋转木马时显示极右侧的部分幻灯片

解决方法

相关推荐