Question

这是一个直接添加到WordPress页面的幻灯片。我已经添加了样式表，脚本，幻灯片本身以及执行滑块功能的脚本，但我还是无法启动它。

这是页面的代码：

        //PHP functions
        wp_enqueue_style('slideshow', get_stylesheet_directory_uri() . '/css/slideshow.css', false, '1.1', 'all');
        wp_enqueue_script('jquery.cslider', get_stylesheet_directory_uri() . '/js/jquery.cslider.js', array ('jquery'), 1.1, true);

        <div id="da-slider" class="da-slider">
            <div class="da-slide">
                <h2>1. Easy management</h2>
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                <a href="#" class="da-link">Read more</a>

                <div class="da-info"></div>
                <div class="da-img da-bg1"></div>
            </div>

            <div class="da-slide">
                <h2>2. Revolution</h2>
                <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                <a href="#" class="da-link">Read more</a>

                <div class="da-info"></div>
                <div class="da-img da-bg2"></div>
            </div>

            <div class="da-slide">
                <h2>3. Warm welcome</h2>
                <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
                <a href="#" class="da-link">Read more</a>

                <div class="da-info"></div>
                <div class="da-img da-bg3"></div>
            </div>

            <div class="da-slide">
                <h2>4. Quality Control</h2>
                <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
                <a href="#" class="da-link">Read more</a>

                <div class="da-info"></div>
                <div class="da-img da-bg4"></div>
            </div>

            <nav class="da-arrows">
                <span class="da-arrows-prev"></span>
                <span class="da-arrows-next"></span>
            </nav>
        </div>

        <script type="text/javascript">
            jQuery(function() {
                jQuery('#da-slider').cslider({
                    autoplay    : true,
                    bgincrement : 450
                });
            });
        </script>

这是cslider's link

Answer 1

您必须在Modernizer之前加载cslider库，因为滑块内部使用Modernizer。也许最好的方法是在Modernizer包含cslider函数时将wp_enqueue_script()作为依赖项传递。

Answer 2

@pgk你是对的，问题是Modernizr脚本错过了，现在它正在工作!!非常感谢！！我必须更加关注Chrome开发工具......

如何让这个jQuery脚本在WordPress上运行？

2 个答案: