Question

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

这是我的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
        }
    }

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

你能帮助我吗？

Answer 1

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

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

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

Answer 2

使用Bootstrap的模态事件触发器described here（http://getbootstrap.com/javascript/#js-events上的Bootstrap的Javascript文档页面）。

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

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

Answer 3

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

您是否尝试首先显示模型框，然后像这样重新加载滑块：

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

Answer 4

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

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

每当我遇到reloadSlider()的问题时，我总是先用destroySlider()将其销毁。

Bxslider不使用Bootstrap Modal框

4 个答案: