Question

我正在尝试在WordPress中创建一个滑块。这是我正在使用的代码：

<?php

    // Enqueue Flexslider Files
    function wd_slider_scripts() {
            //wp_enqueue_script( 'jquery' );

            wp_enqueue_style( 'carouFredSel-style', get_template_directory_uri() . '/inc/client_slider/css/style.css' );

            wp_enqueue_script( 'carouFredSel-script', get_template_directory_uri() .  '/inc/client_slider/js/jquery.carouFredSel-6.1.0-packed.js', array( 'jquery' ), false, true );
            wp_enqueue_script( 'touchSwipe-script', get_template_directory_uri() .  '/inc/client_slider/js/jquery.touchwipe.1.1.1.js', array( 'jquery' ), false, true );
    }
    add_action( 'wp_enqueue_scripts', 'wd_slider_scripts' );

    // Initialize Slider
    function wd_slider_initialize() { ?>
            <script type="text/javascript">
                jQuery('#partners-slider .slider-holder2').carouFredSel({
                    align: 'center',
                    items: {
                        visible: "variable",
                        width: "variable"
                    },
                    scroll: 1,
                    prev: ".prev-arr",
                    next: ".next-arr"
                });
            </script>
    <?php }
    add_action( 'wp_footer', 'wd_slider_initialize' );

    // Create Client Slider
    function wd_client_template() {

            // Query Arguments
            $args = array(
                    'post_type' => 'clients',
                    'posts_per_page' => 5
            );      

            // The Query
            $the_query = new WP_Query( $args );

            // Check if the Query returns any posts
            if ( $the_query->have_posts() ) {

                // Start the Client Slider ?>
                <section></section>

                <section class="partners">

                <div id="partners-slider">
                    <div class="caroufredsel_wrapper" style="display: block; text-align: start; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 100%; height: 52px; margin: 0px; overflow: hidden;">
                        <div class="slider-holder2" style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: -188.89493620243093px; margin: 0px; width: 4105px; height: 52px; z-index: auto;">

                                    <?php
                                    // The Loop
                                    while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

                                            <?php echo the_post_thumbnail(); ?>

                                    <?php endwhile; ?>

                        </div>
                    </div>
                </div>

                <div class="slider-arr">
                    <a class="prev-arr arr-btn" href="#" style="display: block;"></a>
                    <a class="next-arr arr-btn" href="#" style="display: block;"></a>
                </div>

                </section>

            <?php }

            // Reset Post Data
            wp_reset_postdata();
    }

我正面临一个错误：

未捕获的TypeError：对象[object Object]没有方法'carouFredSel'

Answer 1

错误表明代码正在尝试调用某个名为carouFredSel的方法，但该方法不存在。看看你的代码，我可以看到你试图在jQuery对象上调用该方法：

jQuery('#partners-slider .slider-holder2').carouFredSel({ /* ... */ });

The documentation for carouFredSel似乎表明您正确使用它：

$('#carousel').carouFredSel();

所以我认为首先要检查的是你是否真的包含了它的脚本，如the documentation所示：

<script src="jquery.carouFredSel.js" type="text/javascript"></script>

未捕获的TypeError：对象[object Object]没有方法'carouFredSel'

1 个答案: