I'm using the flexslider for my Wordpress theme but no matter what I do, the slider doesn't appear on my website.
This is the instruction guide in using flexslider http://www.woothemes.com/flexslider/
I have added jquery.flexslider.js file inside the js folder and flexslider.css inside the css folder.
I've just followed the instruction, but I don't get the slides. All I get is a small stretched empty rectangle.
Inside the head: header.php
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
div with class flexslider and unordered list:
<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 →</a>
</div>
</div>
</li>
<?php endwhile; endif; ?>
</ul>
</div>
========================UPDATE==============================
Full 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>
Full 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 →</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(); ?>
