BxSlider & Bootstrap 3 - Percentage slideWidth

Question

I use Bootstrap 3 on a website and I want to display two columns at the same time as the bxSlider ticker, however the slideWidth parameter requires absolute width, and this is not possible since I use percentages in predefined CSS CSS.

I searched around and can't find anything about this.

This is 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, which is separate.

Basically, I think the width should be set to onSliderLoad , and does it need to be reset when the window is resized?

Answer 1

There is a bxslider download version that is used to download on github, which automatically calculates the required slide widths to match the number of visible slides you want. It also adapts values ​​to any screen.

I think this version will solve all your problems.

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

Answer 2

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