bxSlider & Bootstrap 3 - Percentage slideWidth

Question

I am using Bootstrap 3 on a website and I want to display two columns at a time with a bxSlider ticker, however the slideWidth parameter requries an absolute width and this is not possible as I am using percentages within BS's predefined CSS.

I have been searching around and can't seem to find anything on the subject.

This is the 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>

Ignore the isMobile bit as that is separate..

Basically I'm thinking that the width needs to get set onSliderLoad and when the window resizes the width needs to reset?

Solution 1

There is a bootstrap friendly version of bxslider I forked on github that will automatically calculate the required slide widths to fit the number of visible slides you desire. It will also adapt the values to any screen.

I think this version will solve all your problems.

Link>> https://github.com/Rahisify/bxslider-4

Solution 2

If you enter a width that it too high, bxSlider will calculate the maximum width automatically for you. So if you container is 900px, your slideWidth is 900, and you have 3 slides, bxSlider will set the width of each slide to 300px.

Comments

[Stephen]

Has anyone found a wordpress solution for bxslider that is also bootstrap friendly?

[Jacob Raccuia]

bxslider is my go to slider, and this solution is amazing and 100x better than my hack a few years ago.!