Question

我正在使用带有多个实例的flex滑块，第一个滑块工作正常，但其他幻灯片仅在更改浏览器选项卡后才能正确显示并返回，但第二张幻灯片的缩略图仅在再次更改浏览器选项卡后显示。

如何让它们同时工作，我的意思是它们应该在第一次加载页面时工作。

这是我的代码

<script>
        $(window).load(function() {
            // The slider being synced must be initialized first
            $('#carousel').flexslider({
                animation : "slide",
                controlNav : false,
                animationLoop : false,
                slideshow : false,
                itemWidth : 220,
                itemMargin : 5,
                asNavFor : '#slider'
            });

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

            $('#slider2').flexslider({
                animation : "slide",
                controlNav : false,
                animationLoop : false,
                slideshow : false
            });
            $('#carousel2').flexslider({
                animation : "slide",
                controlNav : false,
                animationLoop : false,
                slideshow : false,
                itemWidth : 220,
                itemMargin : 5,
                asNavFor : '#slider2'
            });
</script>
<html>
<div id="slider" class="flexslider">
                                    <ul class="slides">
                                        <li><img
                                            src="assets/FlexSlider/demo/images/kitchen_adventurer_caramel.jpg"
                                            style="height: 580px;" /></li>
                                        <li><img
                                            src="assets/FlexSlider/demo/images/kitchen_adventurer_cheesecake_brownie.jpg"
                                            style="height: 580px;" /></li>
                                        <li><img
                                            src="assets/FlexSlider/demo/images/kitchen_adventurer_donut.jpg"
                                            style="height: 580px;" /></li>
                                        <li><img
                                            src="assets/FlexSlider/demo/images/kitchen_adventurer_lemon.jpg"
                                            style="height: 580px;" /></li>
                                        <!-- items mirrored twice, total of 12 -->
                                        <li><img
                                            src="assets/FlexSlider/demo/images/kitchen_adventurer_caramel.jpg"
                                            style="height: 580px;" /></li>
                                        <li><img
                                            src="assets/FlexSlider/demo/images/kitchen_adventurer_cheesecake_brownie.jpg"
                                            style="height: 580px;" /></li>
                                        <li><img
                                            src="assets/FlexSlider/demo/images/kitchen_adventurer_donut.jpg"
                                            style="height: 580px;" /></li>
                                        <li><img
                                            src="assets/FlexSlider/demo/images/kitchen_adventurer_lemon.jpg"
                                            style="height: 580px;" /></li>

                                    </ul>
                                </div>
                                <div id="carousel" class="flexslider flex_carousel">
                                    <div class="carousel_icon"></div>
                                    <ul class="slides pull-left">
                                        <li><img
                                            src="assets/FlexSlider/demo/images/kitchen_adventurer_caramel.jpg"
                                            style="height: 80px;" /></li>
                                        <li><img
                                            src="assets/FlexSlider/demo/images/kitchen_adventurer_cheesecake_brownie.jpg"
                                            style="height: 80px;" /></li>
                                        <li><img
                                            src="assets/FlexSlider/demo/images/kitchen_adventurer_donut.jpg"
                                            style="height: 80px;" /></li>
                                        <li><img
                                            src="assets/FlexSlider/demo/images/kitchen_adventurer_lemon.jpg"
                                            style="height: 80px;" /></li>
                                        <li><img
                                            src="assets/FlexSlider/demo/images/kitchen_adventurer_caramel.jpg"
                                            style="height: 80px;" /></li>
                                        <li><img
                                            src="assets/FlexSlider/demo/images/kitchen_adventurer_cheesecake_brownie.jpg"
                                            style="height: 80px;" /></li>
                                        <li><img
                                            src="assets/FlexSlider/demo/images/kitchen_adventurer_donut.jpg"
                                            style="height: 80px;" /></li>
                                        <li><img
                                            src="assets/FlexSlider/demo/images/kitchen_adventurer_lemon.jpg"
                                            style="height: 80px;" /></li>
                                        <!-- items mirrored twice, total of 12 -->
                                    </ul>
                                </div>
</html>

********* 已编辑 ********** 您可以在此处在线查看http://goo.gl/cHMaBq 第一个标签（一个星）工作完美。第二个选项卡上没有图像，请转到另一个浏览器选项卡并返回，您将看到滑块有效，但没有缩略图。请再次转到另一个浏览器选项卡并返回，将显示缩略图。感谢

Answer 1

我已修复它，图片已呈现，但在我调整浏览器大小之前不会显示。所以，这个问题已经解决了这个问题。

            $('a[data-toggle="tab"]').click(function() {

                setTimeout(function() {
                    $(window).trigger('resize');
                }, 0);

                setTimeout(function() {
                    $(window).trigger('resize');
                }, 2)
            });

Window.load仅在浏览器选项卡更改后才起作用

1 个答案: