Bxslider不使用Bootstrap Modal框

我正在使用带有bxslider的 bootstrap模态框 。 但是它没有用。我正在用ajax更改bxslider的内容。有时它在我重新加载页面时起作用但是它不起作用。

这是我的HTML代码。

和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('',{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){ ?> 
<img src="https://stackoverflow.com/questions/19194394/bxslider-not-working-with-bootstrap-modal-box/store_picture); ?>" alt="store_name; ?>" />
 <?php } } 

请帮助我，我没有得到它的解决方案。我搜索谷歌，得到一个结果，说使用宽度：960px; 我做了同样但没有奏效。

你能帮助我吗。

Answer 1

首先在加载文档上显示模型框，然后重新加载滑块，如下所示：

 $('#storeModal').modal('show'); setTimeout(function(){ slider.reloadSlider(); },200); 

Answer 2

使用此处描述的 Bootstrap的Modal事件触发器（位于http://getbootstrap.com/javascript/#js-events的 Bootstrap的Javascript文档页面）。

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

这只会在完成显示模态的动作时触发，这保证它将在成功的模态打开时发生，而不是使用可能有bug的setTimeout（）。

Answer 3

我不是100％肯定，但我相信当你（重新）加载它时，Bxslider会对位置和大小做一堆计算。 也许modal dialog不可见会导致问题。

您是否尝试先显示模型框，然后重新加载滑块，如下所示：

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

Answer 4

我发现bxSlider在重装时非常不稳定，很可能是因为它按照Robba告诉我们的计算。 因此，建立在罗巴的逻辑基础上并增加我的经验：

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

每次我遇到reloadSlider()问题时，我总是先用destroySlider()来破坏它。