jquery - 在 bxslider 上如何设置 slider 宽度 100% 并且下一个 slider 应该卡在右侧

Question

我正在尝试使用 bxslider jquery 制作幻灯片，这就是我想要制作的。单击 url 以在此处查看示例图像

如何制作宽度为 100% 的幻灯片，并且下一个 slider 应该卡在右侧。

这是我的代码

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.14/jquery.bxslider.js"></script>


    <ul class="list">
      <li>
          <div class="box">
            a
          </div>
      </li>
      <li>
          <div class="box">
           b
          </div>
      </li>
    </ul>

<style
    .box { padding:30px; text-align:center; background:gray}
    </style>

<script>

    var slider1 = $('.list').bxSlider({   
      speed: 800, 
      minSlides: 1,
      maxSlides: 1,
      moveSlides: 1 
    }); 
</script>

https://fiddle.jshell.net/sz4eu3jq/3/

请帮忙

Answer 1

要解决这个问题，您可以使用边距和填充:

https://fiddle.jshell.net/mj4mvvd5/5/

.box {
    padding:30px;
    text-align:center;
    background:gray;

    margin-left: 40px;
    border: 1px solid red;
}

li {
    margin-left: -40px;
}



var slider1 = $('.list').bxSlider({   
  speed: 800, 
  minSlides: 1,
  maxSlides: 1,
  moveSlides: 1,
  slideMargin: 15
});