使用滑块javascript时遇到问题

时间:2014-02-04 01:21:20

标签: javascript php html

我使用flexslider作为我的Wordpress主题,但无论我做什么,滑块都不会出现在我的网站上。

这是使用flexslider http://www.woothemes.com/flexslider/

的使用说明

我在js文件夹中添加了jquery.flexslider.js文件,在css文件夹中添加了flexslider.css。

我刚刚按照说明操作,但我没有得到幻灯片。我得到的只是一个小的拉伸空矩形。

头部内部:header.php

         

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
    });
</script>

带有flexslider类和无序列表的div:

<div id="featured" class="clearfix flexslider">
        <ul class="slides">
            <?php

                $args = array(
                        'post_type' => 'work'
                    );
                $the_query = new WP_Query($args);
            ?>

            <?php if (have_posts()) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
            <li style="background-color: <?php the_field('background_color'); ?>">
                <div class="container">
                    <div class="grid_8">
                        <img src="<?php the_field( 'homepage_slider_image'); ?>" alt = "<?php the_title();?> Project Screenshot">
                    </div>

                    <div id="featured-info" class="grid_4 omega">
                        <h5>Featured Project</h5>
                        <h3 style="color: <?php the_field('button_color'); ?>">
                            <?php the_title(); ?>
                        </h3>
                        <p><?php the_field('description'); ?></p>
                        <a class="btn" style="background-color: <?php the_field('button_color'); ?>" href="#">View Project &rarr;</a>
                    </div>
                </div>
            </li>
            <?php endwhile; endif; ?>
        </ul>

    </div>

======================== UPDATE ====================== ======

完整header.php

<!DOCTYPE html>
<html>
    <head>
        <title>
            <?php
                wp_title('|', true, 'right');

                bloginfo('name')
            ?>
        </title>
        <meta name="viewport" content="width=device-width, initial-scale = 1.0">

        <?php wp_head(); ?> 

        <link rel="stylesheet" href="css/flexslider.css" type="text/css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="js/jquery.flexslider.js"></script>

        <script type="text/javascript" charset="utf-8">
          $(window).load(function() {
            $('.flexslider').flexslider();
            });
        </script>

    </head>
    <body>

        <div class="container clearfix">
            <header>
                <div class="grid_12 omega none">
                    <hgroup>
                        <h1><a href="index.html"><?php bloginfo( 'name' ); ?></a></h1>
                        <h2><?php bloginfo( 'description' ); ?></h2>
                    </hgroup>
                </div>
                <div class="grid_12 omega">
                    <nav>


                    <?php

                        $args = array(
                            'menu' => 'main-menu'
                        );

                        wp_nav_menu($args);
                    ?>
                    </nav>
                </div>
            </header>

完整的front-page.php:

<?php get_header(); ?> 
    </div>
    <div id="featured" class="clearfix flexslider">
        <ul class="slides">
            <?php

                $args = array(
                        'post_type' => 'work'
                    );
                $the_query = new WP_Query($args);
            ?>

            <?php if (have_posts()) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
            <li style="background-color: <?php the_field('background_color'); ?>">
                <div class="container">
                    <div class="grid_8">
                        <img src="<?php the_field( 'homepage_slider_image'); ?>" alt = "<?php the_title();?> Project Screenshot">
                    </div>

                    <div id="featured-info" class="grid_4 omega">
                        <h5>Featured Project</h5>
                        <h3 style="color: <?php the_field('button_color'); ?>">
                            <?php the_title(); ?>
                        </h3>
                        <p><?php the_field('description'); ?></p>
                        <a class="btn" style="background-color: <?php the_field('button_color'); ?>" href="#">View Project &rarr;</a>
                    </div>
                </div>
            </li>
            <?php endwhile; endif; ?>
        </ul>

    </div>

    <div class="container clearfix">
        <div class="grid_12 omega">
            <h5>Featured Post</h5>
        </div>

        <?php

        $args = array(
                'post_type' => 'post',
                'category_name' => 'featured',
                'posts_per_page' => 1

            );
        $the_query = new WP_Query($args);
        ?>

        <?php if (have_posts()) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>


        <div class="push_2 grid_10 omega clearfix">
            <article>

                <?php get_template_part( 'content', 'post'); ?>

            </article>
        </div>

        <?php endwhile; endif; ?>

        <div class="grid_12 omega clearfix">
            <div class="grid_6 recent-post">
                <article>
                    <h5>Recent Post</h5>

                    <?php

                    $args = array(
                            'post_type' => 'post',
                            'cat' => -6,
                            'posts_per_page' => 1

                        );
                    $the_query = new WP_Query($args);
                    ?>

                    <?php if (have_posts()) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                        <?php get_template_part('content', 'post'); ?>

                    <?php endwhile; endif; ?>

                </article>
            </div>

                <?php

                    $args = array(
                            'post_type' => 'work',
                            'posts_per_page' => 1
                        );
                    $the_query = new WP_Query($args);
                ?>

                <?php if (have_posts()) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

                    <?php get_template_part( 'content', 'work'); ?>

                <?php endwhile; endif; ?>
        </div>
    </div>




<?php get_template_part( 'content', 'testimonials'); ?>

<?php get_footer(); ?> 

0 个答案:

没有答案