bxSlider & Bootstrap 3 - 百分比幻灯片宽度

Posted 2023-03-06

【中文标题】bxSlider & Bootstrap 3 - 百分比幻灯片宽度

【英文标题】：bxSlider & Bootstrap 3 - Percentage slideWidth

【发布时间】：2014-06-11 08:15:33

【问题描述】：

我在网站上使用 Bootstrap 3，我想使用 bxSlider 代码一次显示两列，但是 slideWidth 参数需要绝对宽度，这是不可能的，因为我在 BS 的预定义 CSS 中使用百分比.

我一直在四处寻找，似乎找不到任何关于该主题的内容。

这是 html：

    <div class="row">
        <ul class="cs-ticker">
            <li>
                <div class="col-lg-6 col-md-6">
                    <div class="image">
                        <a href=""><img src="images/cs-1.jpg"  class="img-responsive" /></a>
                        <div class="overlay">
                            <h3><a href="">Case Study Title</a></h3>
                            <a href="" class="btn btn-outline btn-lg btn-white">View Case Study</a>
                        </div>
                        <span class="label">Residential</span>
                    </div>
                    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</p>
                </div>
            </li>
            <li>
                <div class="col-lg-6 col-md-6">
                    <div class="image">
                        <a href=""><img src="images/cs-1.jpg"  class="img-responsive" /></a>
                        <div class="overlay">
                            <h3><a href="">Case Study Title 2</a></h3>
                            <a href="" class="btn btn-outline btn-lg btn-white">View Case Study</a>
                        </div>
                        <span class="label">Commercial</span>
                    </div>
                    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</p>
                </div>
            </li>                   
        </ul>
    </div>

    <script>
        $(document).ready(function()

            var CaseStudyTicker = $('#recent-case-studies .cs-ticker');
            var CaseStudyTickerOpts = 
                auto: false,
                speed: 700,
                controls: true,
                pager: false,
                responsive: false,
                maxSlides: 2,
                minSlides: 2,
                adaptiveHeight: false
            ;

            if( isMobile.any() ) 
                CaseStudyTickerOpts.controls = false;
            

            //CaseStudyTicker.bxSlider(CaseStudyTickerOpts);

        );
    </script>

忽略 isMobile 位，因为它是独立的..

基本上我认为宽度需要设置onSliderLoad 并且当窗口调整大小时需要重置宽度？

【问题讨论】：

我是否还可以补充一点，如果您在 li 上设置 px 宽度，它会从 Bootstrap 中提高百分比 cols，所以可能需要将这些设置为 100%...

【参考方案1】：

我在 github 上创建了一个引导程序友好的 bxslider 版本，它会自动计算所需的幻灯片宽度以适应您想要的可见幻灯片的数量。它还将使这些值适应任何屏幕。

我认为这个版本会解决你所有的问题。

链接>> https://github.com/Rahisify/bxslider-4

【讨论】：

有没有人为 bxslider 找到一个对引导程序友好的 wordpress 解决方案？

bxslider 是我的首选滑块，这个解决方案非常棒，比我几年前的 hack 好 100 倍！

【参考方案2】：

如果您输入的宽度太高，bxSlider 会自动为您计算最大宽度。因此，如果您的容器是 900px，您的 slideWidth 是 900，并且您有 3 张幻灯片，bxSlider 会将每张幻灯片的宽度设置为 300px。