bxSlider & Bootstrap 3 - Procent slideWidth

Question

Używam Bootstrap 3 na stronie internetowej i chcę wyświetlać dwie kolumny jednocześnie za pomocą znacznika bxSlider, jednak parametr slideWidth spełnia bezwzględną szerokość i nie jest to możliwe, ponieważ używam wartości procentowe w predefiniowanym CSS BS.

Szukałem i nie mogę znaleźć niczego na ten temat.

Jest to 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> 

ignorowanie bitu isMobile jako że jest osobny ..

Zasadniczo myślę, że szerokość musi dostać zestaw onSliderLoad i gdy okno zmienia rozmiar szerokość trzeba zresetować?

Answer 1

Istnieje wersja programu bxslider w wersji bootstrap, która rozwidla się na githubie, która automatycznie obliczy wymagane szerokości slajdów, aby dopasować je do liczby widocznych slajdów, które chcesz. Dostosuje również wartości do dowolnego ekranu.

Myślę, że ta wersja rozwiąże wszystkie problemy.

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

Answer 2

Jeśli wpiszesz szerokość, że zbyt wysoka, bxSlider obliczy maksymalną szerokość automatycznie. Jeśli więc kontener ma 900 pikseli, przesuwna szerokość to 900, a masz 3 slajdy, bxSlider ustawi szerokość każdego slajdu na 300px.