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上分叉了一个bootstrap友好版本的bxslider,它会自动计算所需的幻灯片宽度,以适应你想要的可见幻灯片的数量.它还会将值调整到任何屏幕.

我认为这个版本将解决你所有的问题.

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

Answer 2

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