Search code examples
javascriptjquerytwitter-bootstrapflexslider

Flexslider will not work with Bootstrap modal


It will just not display for some reason, the one I have in the regular(non-modal) page works wonders, but this one does not. I googled and found, that I have to trigger the flexsslider initialisation, when modal opens, so I did.

    $(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"
        });
    });
});

Thats the JS part

                <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>

And thats the Part in modal.

The console.log part triggers, when I open the modal, but rest won't :/ I have googled and messed for hours now, maybe someone can point me in the right direction?


Solution

  • For some reason, when I put the initialisation script into the modal body with a small delay(I used 500 ms), it mysteriously started working