Question

由于某种原因，它只是不显示，我在常规（非模态）页面中的那个可以创造奇迹，但是这个没有。我用Google搜索并发现，当模态打开时，我必须触发flexsslider初始化，所以我做了。

    $(document).ready(function(){
    $('#modal').on('shown.bs.modal', function() {
        console.log('Init flex.....'); 

        $('#carousel-modal').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            itemWidth: 210,
            itemMargin: 5,
            asNavFor: '#slider'
        });

        $('#slider-modal').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            sync: "#carousel"
        });
    });
});

这是JS部分

                <div class="container">                   
                <div class="flexslider" id="slider-modal">
                    <ul class="slides">
                        <? foreach ($aImages as $image) { ?>
                            <li>
                                <img src="<?=getImageAddress($image['image_id'], 'obj', 'med')?>"/>
                            </li>
                        <? } ?>
                    </ul>
                </div>
                <div class="flexslider" id="carousel-modal">
                    <ul class="slides">
                        <? foreach ($aImages as $image) { ?>
                            <li>
                                <img src="<?=getImageAddress($image['image_id'], 'obj', 'sml')?>"/>
                            </li>
                        <? } ?>
                    </ul>
                </div>
            </div>

那就是模态中的部分。

当我打开模态时，console.log部分触发，但是休息时不会：/我已经用Google搜索并搞砸了几个小时，也许有人可以指出我正确的方向？

Answer 1

出于某种原因，当我将初始化脚本放入模态体中并有一个小延迟（我用了500毫秒）时，它神秘地开始工作

Answer 2

只有在显示模态时才应初始化flexslider。如果你多次显示和隐藏它，可以使用滑块初始化。

我会让flexslider初始化文档准备就绪。模式＆＃39;显示＆＃39;只会让它可见。

Flexslider不适用于Bootstrap模式

2 个答案: