Bxslider не работает с Bootstrap Modal box

Question

Я использую bootstrap modal box с bxslider. но он не работает. Я меняю содержимое bxslider на ajax.For иногда он работает, когда я переустанавливаю страницу, но потом она не работает.

Вот мой html-код.

<div id="storeModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <ul class="contact_bxslider"> 

    </ul> 
</div> 

И JQuery код, как

$(document).ready(function(){ 
    var slider = $('.contact_bxslider').bxSlider({ 
        auto:true 
       }); 

    $('.store_pictures_click').click(function(e){ 
     e.preventDefault(); 

     var store_name = $(this).attr('id'); 

     $.post('<?php echo site_url('cart/change_store_pictures'); ?>',{store_name:store_name}, 
      function(data){ 
       $('.contact_bxslider').html(data); 
       slider.reloadSlider(); 
       $('#storeModal').modal('show'); 
      } 
     ); 

    }); 


}); 

Ajax код ...

function change_store_pictures(){ 

     $store_name = $this->input->post('store_name'); 
     $this->load->model('Store_Pictures_model'); 
     $data['store_pictures'] = $this->Store_Pictures_model->get_store_pictures($store_name); 

     foreach($data['store_pictures'] as $store_picture){ 
      ?> 
      <li><img src="<?php echo base_url('uploads/images/full/'.$store_picture->store_picture); ?>" alt="<?php echo $store_picture->store_name; ?>" /></li> 
     <?php 
     } 
    } 

Пожалуйста, помогите ребята я не получаю его solution.I искал через Google и получить один результат, который говорит использование ширина: 960px; Я сделал то же самое, но не работал.

Помогите мне.

Answer 1

Я не уверен на 100%, но я считаю, что Bxslider выполняет кучу расчетов по позициям и размерам, когда вы (повторно) загружаете его. Возможно, невидимый модальный диалог вызывает проблемы.

Вы пробовали показывать окно модели первой, а затем загрузить ползунок, как это:

$('#storeModal').modal('show'); 
slider.reloadSlider(); 

Answer 2

Отображение в окне модели первого в документе под нагрузкой, а затем загрузить ползунок, как это:

$('#storeModal').modal('show'); 

setTimeout(function(){ 
    slider.reloadSlider(); 
},200); 

Answer 3

Я нахожу bxSlider невероятно неустойчивым при перезагрузке, скорее всего потому, что он выполняет вычисления, как сообщила нам Робба. Поэтому опираясь на логику Robba и добавляя свой опыт:

slider.destroySlider(); 
$('#storeModal').modal('show'); 
slider.reloadSlider(); 

Каждый раз, когда у меня есть проблемы с reloadSlider(), я всегда в конечном итоге уничтожить его первым с destroySlider().

Answer 4

Использовать мутационные триггеры Bootstrap described here (страница документации Javascript для Bootstrap по адресу http://getbootstrap.com/javascript/#js-events).

$('#storeModal').on('shown.bs.modal', function (e) { 
     slider.reloadSlider(); 
}); 

Это будет только огонь по завершению акции, которая показывает модальность, которая гарантирует, что будет происходить на успешный модальных открытой, в отличие от использования SetTimeout(), который может быть багги.