1

我正在使用带有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');
            }
        );

    });


});

阿贾克斯代码...

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; 我做了同样的事情，但没有工作。

你能帮助我吗。

4

4 回答 4

1

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

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

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

于 2017-01-18T22:34:28.147 回答
1

在加载文档时首先显示模型框，然后像这样重新加载滑块：

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

setTimeout(function(){
    slider.reloadSlider();
},200);
于 2015-09-01T07:38:28.877 回答
0

我不是 100% 确定，但我相信 Bxslider 在您（重新）加载它时会对位置和大小进行大量计算。也许模态对话框不可见会导致您出现问题。

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

$('#storeModal').modal('show');
slider.reloadSlider();
于 2013-11-04T23:53:22.040 回答
0

我发现 bxSlider 在重新加载时非常不稳定，很可能是因为它按照 Robba 告诉我们的那样进行计算。因此，基于 Robba 的逻辑并添加我的经验：

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

每次我遇到问题时reloadSlider()，我总是先用destroySlider().

于 2015-09-01T07:52:04.603 回答