title: Slick Carousel next and previous buttons showing above/below, rather than left/right
body: <p>I'm using Slick Carousel <a href="http://kenwheeler.github.io/slick/" rel="nofollow noreferrer">this</a> and my "next" and "previous" arrows are appearing above and below my images, rather than on each side. I'm just looking for it to appear the way it does in the Slick docs.</p>
  
  <p>The buttons aren't in the html, they're generated by the slick js.</p>
  
  <p>Here's the html:</p>
  
  <pre><code>&lt;div class="albumsCarousel"&gt;
    &lt;div&gt;&lt;img class="slickImage" src=./images/betterQuit.png&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="slickImage" src=./images/betterVill.png&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="slickImage" src=./images/casio.jpg&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="slickImage" src=./images/betterWorried.png&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="slickImage" src=./images/betterFrost.png&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="slickImage" src=./images/betterWeird.png&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="slickImage" src=./images/betterOphelia.png&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="slickImage" src=./images/betterEnya.png&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="slickImage" src=./images/betterXiu.png&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="slickImage" src=./images/betterImpasse.png&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="slickImage" src=./images/betterV.png&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="slickImage" src=./images/betterThrone.png&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="slickImage" src=./images/betterSholi.png&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="slickImage" src=./images/betterPGirls2.png&gt;&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>here's the JS:
        $(document).ready(function(){</p>
  
  <pre><code>   $('.albumsCarousel').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3,
  arrows: true,
  cssEase: "ease",
  autoplay: true,
  autoplaySpeed: 3000,
  nextArrow: '&lt;i class="fa fa-arrow-right"&gt;&lt;/i&gt;',
  prevArrow: '&lt;i class="fa fa-arrow-left"&gt;&lt;/i&gt;'
  });
  </code></pre>
  
  <p>and here's the CSS (which I'm pretty sure isn't playing a role here):</p>
  
  <pre><code>.slick-prev, .slick-next {
      transform: translate3d(0, 0, 0);/* fix for chrome not rendering */
     }
     .slick-dots {
     transform: translate3d(0, 0, 0);
      }
  </code></pre>