• I have a series of Bootstrap 3 tabs, inside a tab I have an instance of su_slider fired with the do_shortcode function. All works fine as long as the slider is in the active tab on initial page load. If I move the slider to an inactive tab, one initially hidden with display: none, then the slider doesn’t load completely. As soon as the window is resized, the slider finishes loading and works fine.

    I’m wondering if there is a resize function associated with su_slider that I can call with jQuery? I’ve seen this same problem with FlexSlider, Leaflet, and Google Maps that are embedded in inactive BS 3 tabs. The known fix for those is to call their native resize functions when the associated, inactive tab is clicked

    Here is some example code for fixing the problem in Leaflet:

    jQuery("a[href='#location']").on("shown.bs.tab", function() {
                    L.Util.requestAnimFrame(map.invalidateSize,map,!1,map._container);
                });

    Here is a link to an example – click on the Building tab to see the slider

    https://ww.wp.xz.cn/plugins/shortcodes-ultimate/

The topic ‘Slider not loading inside Bootstrap tabs’ is closed to new replies.