Can’t get woothemes flex slider to work

I’m trying to replicate the code sample here: http://flexslider.woothemes.com/basic-carousel.html

I’m pretty sure I have the code correct, but I can’t figure out why it isn’t working. Below is the code pertaining to it, and a screenshot of the area.

HTML:

<script type="text/javascript">

jQuery(document).ready(function($) {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5
  });
});

</script>

<div class="opinion">
<div class="wrap">
<div class="top">
<div class="atable">
<?php query_posts(array('post_type' => array('community', 'projects'),'posts_per_page' => 4,'post_parent' => 0, 'post_status' => array('publish'), 'orderby' => 'menu_order date')); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="acell">
<div class="contentbox flexslider">

  <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID, 'issues'), 'large_size' );
  $url = $thumb['0']; ?>

  <ul>
  <li><a href="<?php the_permalink(); ?>" style="background-image:url('<?=$url?>');"><span><?php the_title(); ?></span></a></li>
  </ul>

</div>
</div>
<?php endwhile; wp_reset_query(); ?>
</div>
</div>
</div>

CSS:

.opinion .atable .acell {
display: table-cell;
height: 100%;
width: 25%;
overflow: hidden;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border: 1px solid #ccc;
background-color: #fff;
outline: none;
vertical-align: top;
}

.opinion .atable .acell.oneblock {
display: inline-block;
}

.opinion .atable .acell:hover {
-webkit-box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow:    0px 5px 7px 0px rgba(50, 50, 50, 0.25);
box-shadow:         0px 5px 7px 0px rgba(50, 50, 50, 0.25);
}

.opinion .atable .acell:last-child {
margin: 0px;
}

.opinion .atable .acell .contentbox {
position: relative;
}

.opinion .atable .acell .contentbox .pad {
padding: 2%;
}


.opinion .atable .acell .contentbox ul {
  list-style-type: none;
}

.opinion .atable .acell .contentbox ul li a {
  border: 1px solid rgba(255, 255, 255, 0.9);
  background-size: 100%;
  background-position: 20% 50%;
  background-repeat: no-repeat;
  color: white;
  display: inline-block;
  height: 200px;
  max-width: 285px;
  width: 285px;
}

.opinion .atable .acell .contentbox ul li a span {
  background: rgba(255, 255, 255, 0.5);
  display: block;
  float: left;
  font-size: 133%;
  height: 100%;
  line-height: 1.66;
  padding-top: 100px;
  padding-left: 25px;
  vertical-align: middle;
  transition: 0.333s background ease;
  width: 100%;
  z-index: 3;
}

Flexslider CSS:

/* Slideshow */
.flexslider {
margin: 0px;
border-bottom: 4px solid #2854a3;
}

.flexslider ul {
margin: 0px;
padding: 0px;
line-height: 0px;
}

.flexslider ul li {
margin: 0px;
padding: 0px;
line-height: 0px;
display: block;
}

.flexslider img {
margin: 0px;
padding: 0px;
line-height: 0px;
max-width: 100%;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
display: block;
}

.flexslider .overlay {
position: absolute;
top: 0px;
left: 5%;
width: 23%;
background-color: #2854a3;
background-color: rgba(40,84,163, .9);
z-index: 10;
height: 100%;
}

/*.flexslider .overlay .cholder {
margin-top: 15%;
}*/

.flexslider .overlay hr {
margin-top: 5%;
margin-bottom: 5%;
}

.flexslider .overlay .inside {
padding: 4%;
color: #fff;
font-size: .9em;
}

.flexslider .overlay .inside h2 {
line-height: 1.2;
font-weight: 700;
margin: 0px;
padding: 0px;
margin-bottom: 10px;
font-size: 1.8em;
}

.flexslider .overlay a i {
padding-right: 6px;
border-right: 1px solid #fff;
margin-right: 6px;
}

.flexslider .overlay a.sb {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
display: block;
text-align: center;
padding: 12px;
margin-bottom: 10px;
background-color: #000;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.75);
-moz-text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.75);
-webkit-text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.75);
font-size: 1.1em;
border: 1px solid #fff;
}

.flexslider .overlay a.sb.twitter {
background-color: #8aaeee;
}

.flexslider .overlay a.sb.facebook {
background-color: #0b296e;
}

.flexslider .overlay a.sb.google {
background-color: #e93b1e;
margin: 0px;
}

.flexslider .overlay a.sb.facebook:hover, .flexslider .overlay a.sb.twitter:hover, .flexslider .overlay a.sb.google:hover {
background-color: #fff;
color: #6285c4;
text-shadow: none;
-moz-text-shadow: none;
-webkit-text-shadow: none;
}