title: bxSlider & Bootstrap 3 - Percentage slideWidth
body: <p>I am using Bootstrap 3 on a website and I want to display two columns at a time with a bxSlider ticker, however the <code>slideWidth</code> parameter requries an absolute width and this is not possible as I am using percentages within BS's predefined CSS.</p>
  
  <p>I have been searching around and can't seem to find anything on the subject.</p>
  
  <p>This is the HTML:</p>
  
  <pre><code>    &lt;div class="row"&gt;
          &lt;ul class="cs-ticker"&gt;
              &lt;li&gt;
                  &lt;div class="col-lg-6 col-md-6"&gt;
                      &lt;div class="image"&gt;
                          &lt;a href=""&gt;&lt;img src="images/cs-1.jpg" alt="" class="img-responsive" /&gt;&lt;/a&gt;
                          &lt;div class="overlay"&gt;
                              &lt;h3&gt;&lt;a href=""&gt;Case Study Title&lt;/a&gt;&lt;/h3&gt;
                              &lt;a href="" class="btn btn-outline btn-lg btn-white"&gt;View Case Study&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;span class="label"&gt;Residential&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;p&gt;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.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="col-lg-6 col-md-6"&gt;
                      &lt;div class="image"&gt;
                          &lt;a href=""&gt;&lt;img src="images/cs-1.jpg" alt="" class="img-responsive" /&gt;&lt;/a&gt;
                          &lt;div class="overlay"&gt;
                              &lt;h3&gt;&lt;a href=""&gt;Case Study Title 2&lt;/a&gt;&lt;/h3&gt;
                              &lt;a href="" class="btn btn-outline btn-lg btn-white"&gt;View Case Study&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;span class="label"&gt;Commercial&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;p&gt;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.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/li&gt;                   
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
          $(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);
  
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>Ignore the isMobile bit as that is separate..</p>
  
  <p>Basically I'm thinking that the width needs to get set <code>onSliderLoad</code> and when the window resizes the width needs to reset?</p>