Organizational Research By

Surprising Reserch Topic

Experts Most Trusted Topic


flexslider is not working in angular popup


flexslider is not working in angular popup  using -'angularjs,bootstrap-modal,flexslider'

I have used jquery.flexslider.js for simple slider in my angular application.

<div id="product-slider" class="flexslider">
    <ul class="slides">

        <li data-thumb="{{ image.thumb_url }}" ng-repeat="image in tab2.images">
            <img ng-src="{{ image.original_url }}" alt="{{ image.asset_Id }}"/>
        </li>
    </ul>

    <div class="slide-count">
        <span class="current-slide"></span>
        <span class="devider">&nbsp;/&nbsp;</span>
        <span class="total-slides"></span>
    </div>

</div>


This tab2.images array is building dynamically after upload images. This flexslider is showing in bootstrap modal. So I have called flexsider after show popup.

function showPopup() {

    $('.product-preview-popup').modal();

    $('.flexslider').flexslider({
        animation: "slide",
        controlNav: "thumbnails",
        slideshow: false,
        nextText: "",
        prevText: "",
        after: function(slider) {
            $('.current-slide').text(slider.currentSlide + 1);
        },
        start: function(slider) {
            $('.current-slide').text(slider.currentSlide + 1);
            $('.total-slides').text(slider.count);
        }
    });
}


Now issue is this slider is not working in first time. Second time it show only thumbnails. But after click another tab in browser it is showing slider. I don't know what is the issue and how it works in browser tab click.
    

asked Oct 13, 2015 by shikhar jain
0 votes
31 views



Related Hot Questions



Government Jobs Opening


...