jquery – bxSlider和Bootstrap 3 – 百分比slideWidth

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

解决方法

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

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

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

原文链接：https://www.f2er.com/jquery/176836.html

jquery – bxSlider和Bootstrap 3 – 百分比slideWidth

解决方法

猜你在找的jQuery相关文章