初始幻灯片显示分割图像

Question

我正在使用caroufredsel，我曾经多次使用过，之前从未遇到过这个问题。在Safari上，只有页面的初始加载显示分割图像 - 第一个的一半和第二个的一半。像这样：

幻灯片放映下一个很好，如果你去另一个页面再回来那么它也没关系。它只发生在Safari上。有没有人有任何想法？

这是我的HTML：

    <div class='slideshow'>
        <div class='centralised_div'>
            <div class='slideshow_inner'>
                <div class='slideshow_images'>
                    <img src='/images/ss2.jpg'/>
                    <img src='/images/ss3.jpg'/>
                    <img src='/images/ss4.jpg'/>
                </div>
            </div>
            <div class='arrow_left'><img src='/images/left_arrow.png'/></div>
            <div class='arrow_right'><img src='/images/right_arrow.png'/></div>
        </div>
    </div>

这是我的jquery：

    <script type="text/javascript" src="/js/jquery.carouFredSel-6.2.1-packed.js"></script>
    <script>
        $(document).ready(function() {
            $(".slideshow_images").carouFredSel({
                width: 940,
                height: 400,
                direction: "left",
                items: {
                    visible: 1,
                    start: "random",
                    width: 940,
                    height: 400
                },
                scroll: {
                    fx: "crossfade",
                    duration: 1000,
                    pauseOnHover: true
                },
                auto: 6000,
                prev: {
                    button: ".arrow_left",
                    key: "left"
                },
                next: {
                    button: ".arrow_right",
                    key: "right"
                }
            });
        });
    </script>

Answer 1

我在carouFredSel上遇到的大多数问题都是在窗口加载后初始化而不是文档就绪时解决的。也许这有助于你：

<script type="text/javascript" src="/js/jquery.carouFredSel-6.2.1-packed.js"></script>
<script>
    $(window).load(function() {
        $(".slideshow_images").carouFredSel({
            width: 940,
            height: 400,
            direction: "left",
            items: {
                visible: 1,
                start: "random",
                width: 940,
                height: 400
            },
            scroll: {
                fx: "crossfade",
                duration: 1000,
                pauseOnHover: true
            },
            auto: 6000,
            prev: {
                button: ".arrow_left",
                key: "left"
            },
            next: {
                button: ".arrow_right",
                key: "right"
            }
        });
    });
</script>