带有 bx滑块的居中幻灯片轮播

Centered slide carousel with bxslider

本文关键字：幻灯片 bx 带有      更新时间：2023-09-26

我需要一个响应的、高度可调的轮播，显示移动网站的下一个和上一个内容的提示。经过一番研究，我来到了bxslider，它几乎满足了我的所有需求。

http://jsfiddle.net/8greL/1/

不幸的是，我无法编写轮播并使其自动适应宽度。此刻，我只能强行通过像这样的丑陋、静态的黑客

......

$('.bx-wrapper').first().css('max-width', '240px');

也许我对库的选择或我的方法都是错误的，但我不知道如何在不自己编写轮播的情况下完成它......

您需要更新 bxslider 的宽度（到最大宽度），以便响应可以流畅...

但是我为修复当前状态所做的是这样的：

.galleryWrapper {
margin: 0 auto;
max-width: 240px;
}
.galleryWrapper .bx-viewport {
padding-left: 20px;
 width: inherit !important
}

小提琴

好的，我想出了一个解决方案，通过添加/更改幻灯片宽度的计算以及幻灯片必须在库内滑动的数量。

完成本地更改后，我将在github上共享它。 :)

更新：我将更改上传到 github ~> https://github.com/Gumbagubanga/bxslider-4/tree/develop

相关文章：