title: Slick Slider arrows over image not working
body: <p>I am working on a slider using the slick slider library, I seem not be able to put the left and right arrow inside the picture like I am doing the texts. left arrow is not moving at all and right is only moving to the right by using margin-left.</p>
  
  <p>I tried playing positions but it's not working well for me either.</p>
  
  <p>this is kind of how i want it to look like 
  <a href="https://i.stack.imgur.com/uaVj3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uaVj3.jpg" alt="enter image description here"></a></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() {
  
  
  
    $('.home-slick-slider').slick({
  
      infinite: true,
      speed: 300,
      slidesToShow: 1,
      slidesToScroll: 1,
      cssEase: 'linear',
      arrows: true,
      dots: false,
      responsive: [{
          breakpoint: 1024,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            infinite: true,
            dots: false,
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            infinite: true,
            dots: false,
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            infinite: true,
            dots: false,
          }
        }
        // You can unslick at a given breakpoint now by adding:
        // settings: "unslick"
        // instead of a settings object
      ]
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slick-slide {
    display: none;
    float: left;
    position: relative;
    height: 100%;
    min-height: 1px;
  }
  
  .slick-prev:before {
    content: "\f104";
    font-family: FontAwesome;
    font-size: 50px;
    color: #0a5185 !important;
    z-index: 100px;
  }
  
  .slick-next:before {
    content: "\f105";
    font-family: FontAwesome;
    font-size: 50px;
    color: #0a5185 !important;
    z-index: 100px;
  }
  
  .home-slick-text {
    position: absolute;
    bottom: 50%;
    left: 70%;
    margin-right: 40%;
    color: black;
  }
  
  .home-slick-text h1 {
    color: #9FA8A6;
    text-align: right
  }
  
  .home-slick-text p {
    color: #9FA8A6 !important;
    text-align: right
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.css" rel="stylesheet" /&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css" rel="stylesheet" /&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /&gt;
  
  &lt;body&gt;
  
    &lt;div class="container"&gt;
      &lt;div class="home-slick-slider"&gt;
        &lt;div class="home-slider-slides"&gt;
          &lt;div class="home-slider-content"&gt;
            &lt;img class="img-responsive" src="https://i.pinimg.com/originals/a0/73/1c/a0731cd9655f23c9596456ff800f1d85.jpg"&gt;
            &lt;div class="home-slick-text"&gt;
              &lt;h1&gt;A Quality Connection&lt;/h1&gt;
              &lt;p&gt;Our mission is to shape the future of health care in our community through an integrated partnership of providers and Baptist Health hospitals that work collaboratively toward common goals for improving quality, safety, efficiency and outcomes
                for our patients.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="home-slider-slides"&gt;
          &lt;div class="home-slider-content"&gt;
            &lt;img class="img-responsive" src="https://i.pinimg.com/originals/a0/73/1c/a0731cd9655f23c9596456ff800f1d85.jpg"&gt;
            &lt;div class="home-slick-text"&gt;
              &lt;h1&gt;A Quality Connection&lt;/h1&gt;
              &lt;p&gt;Our mission is to shape the future of health care in our community through an integrated partnership of providers and Baptist Health hospitals that work collaboratively toward common goals for improving quality, safety, efficiency and outcomes
                for our patients.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
  
  
        &lt;div class="home-slider-slides"&gt;
          &lt;div class="home-slider-content"&gt;
            &lt;img class="img-responsive" src="https://i.pinimg.com/originals/a0/73/1c/a0731cd9655f23c9596456ff800f1d85.jpg"&gt;
            &lt;div class="home-slick-text"&gt;
              &lt;h1&gt;A Quality Connection&lt;/h1&gt;
              &lt;p&gt;Our mission is to shape the future of health care in our community through an integrated partnership of providers and Baptist Health hospitals that work collaboratively toward common goals for improving quality, safety, efficiency and outcomes
                for our patients.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
  
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>