Question

我正在更新wordpress网站，并决定使用Flexslider作为轮播，但图像没有显示。我知道他们在那里，因为我可以在Chrome的调试控制台中看到它们。

正如你所看到的那样，有一个空的flexslider和另一个由unlider驱动的旋转木马。我只是想弄清楚为什么没有显示出来。

<!-- flexslider -->
<div class="flexslider">
    <ul class="slides">
        <li>
            <div class='slideContentBox cover-stories cs-4 innovation-and-creativity spring-2015 z-featured-slider '>
                <a href="http://in-iq-qa.co/innovation-and-creativity/cover-story-4/"><h2>The Heart of the Matter</h2></a>

                <p>
                    Donald Casey Jr. drills down to the core of the constantly changing healthcare industry to discover the innovative ways Cardinal Health can position itself for dramatic growth and success.<a class="readMore" href="http://in-iq-qa.co/innovation-and-creativity/cover-story-4/"
                    title="Insigniam Quarterly links to: The Heart of the Matter">Read
                    More</a>
                </p>
            </div>
            <!--end .slideContentBox-->
            <img src="http://in-iq-qa.co/wp-content/uploads/2015/05/The-Heart-of-the-Matter.jpg" class="attachment-post-thumbnail wp-post-image" alt="Heart of the Matter | Insigniam Quarterly | Spring 2015" />                            </a>
        </li>
        <li>
            <div class='slideContentBox spring-2015 strategy z-featured-slider '>
                <a href="http://in-iq-qa.co/strategy/unleash-culture-to-fuel-growth/"><h2>Unleash Culture to Fuel Growth</h2></a>

                <p>
                    How to align the nine facets of corporate culture to drive performance.<a class="readMore" href="http://in-iq-qa.co/strategy/unleash-culture-to-fuel-growth/"
                    title="Insigniam Quarterly links to: Unleash Culture to Fuel Growth">Read
                    More</a>
                </p>
            </div>
            <!--end .slideContentBox-->
            <img src="http://in-iq-qa.co/wp-content/uploads/2015/05/Unleash-Culture-to-Fuel-Growth.jpg" class="attachment-post-thumbnail wp-post-image" alt="Unleash Culture to Fuel Growth" />                            </a>
        </li>
        <li>
            <div class='slideContentBox spring-2015 strategy z-featured-slider '>
                <a href="http://in-iq-qa.co/strategy/growth-with-an-accent/"><h2>Growth with an Accent</h2></a>

                <p>
                    From cheeseburgers to lattes, John Dawson understands how to transform domestic brands into successful international enterprises.<a class="readMore" href="http://in-iq-qa.co/strategy/growth-with-an-accent/"
                    title="Insigniam Quarterly links to: Growth with an Accent">Read
                    More</a>
                </p>
            </div>
            <!--end .slideContentBox-->
            <img src="http://in-iq-qa.co/wp-content/uploads/2015/05/GrowthWithAccent.jpg" class="attachment-post-thumbnail wp-post-image" alt="Growth with an accent | Insigniam Quarterly | Spring 2015" />                            </a>
        </li>
        <li>
            <div class='slideContentBox spring-2015 transform z-featured-slider '>
                <a href="http://in-iq-qa.co/transform/growth-through-adversity-transforming-disaster-into-untold-success/"><h2>Growth Through Adversity: Transforming Disaster Into Untold Success</h2></a>

                <p>
                    An interview with turnaround expert John Jastrem.<a class="readMore" href="http://in-iq-qa.co/transform/growth-through-adversity-transforming-disaster-into-untold-success/"
                    title="Insigniam Quarterly links to: Growth Through Adversity: Transforming Disaster Into Untold Success">Read
                    More</a>
                </p>
            </div>
            <!--end .slideContentBox-->
            <img src="http://in-iq-qa.co/wp-content/uploads/2015/05/growth-through-adversity.jpg" class="attachment-post-thumbnail wp-post-image" alt="Growth through adversity | Insigniam Quarterly | Spring 2015" />                            </a>
        </li>
    </ul>
</div>
<!-- /flexslider -->



$(window).load(function() {
    $('.flexslider').flexslider({
        animation: "slide",
        controlNav: "thumbnails"
    });
});

Answer 1

尝试移动初始化代码

$('.flexslider').flexslider({
        animation: "slide",
        controlNav: "thumbnails"
    });

进入document.ready函数而不是window.load。不确定是否是这样，但我看不到任何其他问题。我的猜测是window.load在你的flexslider javascript被加载之前就开始了，而且它没有找到那个函数。

Flexslider无法在Wordpress中运行

1 个答案: