jquery - bxSlider & Bootstrap 3 - 百分比 slideWidth

Question

我在网站上使用 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" alt="" 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" alt="" 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 并且当窗口调整大小时宽度需要重置？

Answer 1

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

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

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