title: Slick Slider Carousel with text
body: <p>I've created a simple image carousel with arrows using <a href="http://kenwheeler.github.io/slick/" rel="nofollow noreferrer">Slick Slider</a>. But I want a different h2 to be shown on top each image that slides across, like on <a href="http://www.onblackheath.com/" rel="nofollow noreferrer">this</a> website. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('.top_slider').slick({
      dots: false,
      infinite: true,
      //              centerMode: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      //              centerPadding: '220px',
      arrows: true,
      prevArrow: '&lt;button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="display: block;"&gt;Previous&lt;/button&gt;',
      nextArrow: '&lt;button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;"&gt;Next&lt;/button&gt;'
  
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h2 {
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   color: white;
   font-size: 46px;
   -webkit-transition: all 300ms ease;
   transition: all 300ms ease;
   text-transform: uppercase;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="top_slider"&gt;
    &lt;div&gt;
      &lt;img src="images/image1.jpg"&gt;
      &lt;h2&gt;text 1&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="images/image2.jpg"&gt;
      &lt;h2&gt;text 2&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="images/image3.jpg"&gt;
      &lt;h2&gt;text 3&lt;/h2&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>At the moment that code just puts both h2's on top of each other on the first image. </p>