title: Trouble figuring out slider for post containers
body: <p>There is a section on the site I'm working on that loads 4 containers that are links to posts. I need to add functionality that allows you to scroll through more containers in the section by clicking right or left arrows. Below is a screenshot of what it needs to be like (It looks exactly the same now, without the arrows and sliding functionality). I tried using <a href="http://flexslider.woothemes.com/" rel="nofollow noreferrer">http://flexslider.woothemes.com/</a> but had trouble using it. I followed the directions, but it didn't seem to work. If anyone could help me out or give me any advice it would be very appreciated!</p>
  
  <p>What I am trying to do:</p>
  
  <p><a href="https://i.stack.imgur.com/nFwNw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nFwNw.png" alt="enter image description here"></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="opinion"&gt;
    &lt;div class="wrap"&gt;
      &lt;div class="atable"&gt;
          &lt;div class="acell"&gt;
            &lt;div class="contentbox"&gt;
  
              &lt;ul class="slides"&gt;
                &lt;li&gt;&lt;a href="www.google.com" style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/8/8f/Hippie-flower_-_Virginia_-_ForestWander.jpg');"&gt;&lt;img class="slideImg" src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Hippie-flower_-_Virginia_-_ForestWander.jpg" /&gt;&lt;span&gt;Flower&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="www.google.com" style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/8/8f/Hippie-flower_-_Virginia_-_ForestWander.jpg');"&gt;&lt;img class="slideImg" src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Hippie-flower_-_Virginia_-_ForestWander.jpg" /&gt;&lt;span&gt;Flower&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="www.google.com" style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/8/8f/Hippie-flower_-_Virginia_-_ForestWander.jpg');"&gt;&lt;img class="slideImg" src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Hippie-flower_-_Virginia_-_ForestWander.jpg" /&gt;&lt;span&gt;Flower&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="www.google.com" style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/8/8f/Hippie-flower_-_Virginia_-_ForestWander.jpg');"&gt;&lt;img class="slideImg" src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Hippie-flower_-_Virginia_-_ForestWander.jpg" /&gt;&lt;span&gt;Flower&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="www.google.com" style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/8/8f/Hippie-flower_-_Virginia_-_ForestWander.jpg');"&gt;&lt;img class="slideImg" src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Hippie-flower_-_Virginia_-_ForestWander.jpg" /&gt;&lt;span&gt;Flower&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;?php endwhile; wp_reset_query(); ?&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.opinion {
    background-color: #fff;
    font-size: .8em;
    padding-top: 25px;
    padding-bottom: 25px;
  }
  
  .opinion:after {
    clear: both;
    content: "";
    display: block;
  }
  
  .opinion .atable {
    display: table;
    border-collapse: separate;
    border: 0px;
    padding: 0px;
    outline: none;
    border-spacing: 1em;
    width: 100%;
    table-layout: fixed;
  }
  
  .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: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;
  }
  
  div.opinion .atable .acell .contentbox ul {
    padding: 0;
    min-width: 40px;
    widows: 100%;
    margin: 0;
  }
  
  div.opinion ul.slides li:hover:after {
    display: block;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    left: 9px;
    top: 9px;
    position: absolute;
    border: 1px solid white;
    content: ' ';
    pointer-events: none;
  }
  div.opinion .atable .acell .contentbox ul li a span {
      padding: 20px;
  }
  
  .opinion .atable .acell .contentbox ul.slides:hover a&gt;span {
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 20px;
    color: #fff;
    z-index: 10;
    display: inline-block;
  }
  
  .opinion .atable .acell .contentbox {
    position: relative;
  }
  
  .slideImg {
    display: none;
  }
  
  .opinion .atable .acell .contentbox ul {
    list-style-type: none;
  }
  
  .opinion .atable .acell .contentbox ul li a {
    color: white;
    display: block;
    height: 200px;
    max-width: 100%;
    width: 100%;
    background-size:cover;
    background-position:center;
  }
  
  .opinion .atable .acell .contentbox ul li a span {
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 10px 10px 20px 10px;
    color: #fff;
    z-index: 10;
    display: inline-block;
    font-size: 1.3em;
    text-shadow: 1px 1px 1px #000;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    border-top-left-radius: 4px;
  }
  
  .opinion .atable .acell .contentbox ul li a:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: inset 0 0 0 350px blue;
    width: 100%;
    height: auto;
  }
  </code></pre>