title: Slick slider arrows behave as slides in resposnsive mode
body: <p>I have integrated slick carousel for my bootstrap project and I have modified the slick-theme.css for some customization. I have run into this weird issue which is in responsive mode the slider goes all wrong and slides are duplicating and the arrows(they are customized as next and previous buttons) are shown as slides. When I remove the responsive parameters it works all right. I want to remove the arrows in small screen sizes. If anyone can help me out with this issue it would be great. Thank you.</p>
  
  <p>PS: The edited slick-theme.css file's code is at the bottom of the css section of this code snippet.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> $(window).load(function () {
                  $('.slider-main').slick({
                      arrows: true,
                      dots: false,
                      prevArrow: "&lt;a class=\"slick-prev slider-slick-prev\"&gt;PREVIOUS&lt;/a&gt;",
                      nextArrow: "&lt;a class=\"slick-next slider-slick-next\"&gt;NEXT&lt;/a&gt;",
                      slidesToShow: 1,
                      slidesToScroll: 1,
                      responsive: [
                          {
                              breakpoint: 767,
                              settings: {
                                  arrows: false
                              }
                          }
                      ]
                  });
              });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slider &gt; div {
      padding: 0 40px;
  }
  
  @media only screen and (max-width: 1200px) {
      .slider &gt; div {
          padding: 0 10px;
      }
  }
  
  .slider &gt; div .slider-left {
      padding: 0 16px 0 23px;
      text-align: center;
  }
  
  @media only screen and (max-width: 1200px) {
      .slider &gt; div .slider-left {
          padding: 0 5px 0 0;
      }
  }
  
  @media only screen and (max-width: 767px) {
      .slider &gt; div .slider-left {
          display: none;
      }
  }
  
  .slider &gt; div .slider-left &gt; div {
      border-left: 1px solid #e8e8e8;
      border-right: 1px solid #e8e8e8;
      border-bottom: 1px solid #e8e8e8;
      margin-top: 13px;
  }
  
  .slider &gt; div .slider-left &gt; div &gt; h2 {
      background: #bbe3de;
      color: #ffffff;
      font-size: 21.36px;
      margin: 0;
      padding: 18px 0;
  }
  
  @media only screen and (max-width: 1200px) {
      .slider &gt; div .slider-left &gt; div &gt; h2 {
          font-size: 19.36px;
          padding: 18px 10px;
      }
  }
  
  .slider &gt; div .slider-left &gt; div &gt; div.left-description {
      color: #afafaf;
      font-size: 25px;
      margin-top: 35px;
      line-height: 1.2;
      padding: 0 23px;
  }
  
  @media only screen and (max-width: 1200px) {
      .slider &gt; div .slider-left &gt; div &gt; div.left-description {
          margin-top: 5px;
          font-size: 17px;
          padding: 0 5px;
      }
  }
  
  .slider &gt; div .slider-left &gt; div &gt; div.left-info {
      color: #9d9d9d;
      font-size: 17px;
      margin-top: 28px;
      line-height: 1.2;
      padding: 0 4px;
  }
  
  @media only screen and (max-width: 1200px) {
      .slider &gt; div .slider-left &gt; div &gt; div.left-info {
          margin-top: 5px;
      }
  }
  
  .slider &gt; div .slider-left &gt; div &gt; div.left-location {
      color: #9d9d9d;
      font-size: 25px;
      margin-top: 2px;
  }
  
  @media only screen and (max-width: 1200px) {
      .slider &gt; div .slider-left &gt; div &gt; div.left-location {
          font-size: 17px;
      }
  }
  
  .slider &gt; div .slider-left &gt; div &gt; div.left-read-more {
      margin-top: 16px;
      margin-bottom: 18px;
  }
  
  @media only screen and (max-width: 1200px) {
      .slider &gt; div .slider-left &gt; div &gt; div.left-read-more {
          margin-top: 5px;
      }
  }
  
  .slider &gt; div .slider-left &gt; div &gt; div.left-read-more a {
      color: #ec6b9c;
      font-size: 22.29px;
      -webkit-transition: color 0.2s ease;
      -moz-transition: color 0.2s ease;
      -ms-transition: color 0.2s ease;
      -o-transition: color 0.2s ease;
      transition: color 0.2s ease;
  }
  
  @media only screen and (max-width: 1200px) {
      .slider &gt; div .slider-left &gt; div &gt; div.left-read-more a {
          font-size: 17px;
      }
  }
  
  .slider &gt; div .slider-left &gt; div &gt; div.left-read-more a:hover {
      color: #bbe3de;
  }
  
  .slider &gt; div .slider-main {
      padding: 13px 39px 0 16px;
  }
  
  @media only screen and (max-width: 1200px) {
      .slider &gt; div .slider-main {
          padding: 13px 0 0 5px;
      }
  }
  
  .slider &gt; div .slider-main .single-slide {
      outline: none;
  }
  
  .slider &gt; div .slider-main .single-slide:hover {
      outline: none;
  }
  
  .slider &gt; div .slider-main .single-slide:focus {
      outline: none;
  }
  
  .slider &gt; div .slider-main .single-slide img {
      width: 100%;
      outline: none;
  }
  
  .slider &gt; div .slider-main .single-slide img:hover {
      outline: none;
  }
  
  .slider &gt; div .slider-main .single-slide img:focus {
      outline: none;
  }
  
  .slider &gt; div .slider-main .single-slide .slide-description {
      position: absolute;
      bottom: 18px;
      right: 0;
      text-transform: uppercase;
      background: #ffffff;
      padding: 10px 21px 5px 18px;
      letter-spacing: -0.3px;
      color: #878787;
      font-size: 22.37px;
  }
  
  .slider &gt; div .slider-main .single-slide .slide-description a {
      margin-left: 4px;
      letter-spacing: 0.5px;
      display: inline-block;
      color: #ec6b9c;
      font-size: 15px;
      -webkit-transition: color 0.2s ease;
      -moz-transition: color 0.2s ease;
      -ms-transition: color 0.2s ease;
      -o-transition: color 0.2s ease;
      transition: color 0.2s ease;
  }
  
  .slider &gt; div .slider-main .single-slide .slide-description a:hover {
      color: #bbe3de;
  }
  
  .slider &gt; div .slider-left-mobile {
      padding: 0 16px 0 23px;
      text-align: center;
  }
  
  .slider &gt; div .slider-left-mobile &gt; div {
      border-left: 1px solid #e8e8e8;
      border-right: 1px solid #e8e8e8;
      border-bottom: 1px solid #e8e8e8;
      margin-top: 13px;
  }
  
  .slider &gt; div .slider-left-mobile &gt; div &gt; h2 {
      background: #bbe3de;
      color: #ffffff;
      font-size: 21.36px;
      margin: 0;
      padding: 18px 0;
  }
  
  .slider &gt; div .slider-left-mobile &gt; div &gt; div.left-description {
      color: #afafaf;
      font-size: 25px;
      margin-top: 35px;
      line-height: 1.2;
      padding: 0 23px;
  }
  
  .slider &gt; div .slider-left-mobile &gt; div &gt; div.left-info {
      color: #9d9d9d;
      font-size: 17px;
      margin-top: 28px;
      line-height: 1.2;
      padding: 0 4px;
  }
  
  .slider &gt; div .slider-left-mobile &gt; div &gt; div.left-location {
      color: #9d9d9d;
      font-size: 25px;
      margin-top: 2px;
  }
  
  .slider &gt; div .slider-left-mobile &gt; div &gt; div.left-read-more {
      margin-top: 16px;
      margin-bottom: 18px;
  }
  
  .slider &gt; div .slider-left-mobile &gt; div &gt; div.left-read-more a {
      color: #ec6b9c;
      font-size: 22.29px;
      -webkit-transition: color 0.2s ease;
      -moz-transition: color 0.2s ease;
      -ms-transition: color 0.2s ease;
      -o-transition: color 0.2s ease;
      transition: color 0.2s ease;
  }
  
  .slider &gt; div .slider-left-mobile &gt; div &gt; div.left-read-more a:hover {
      color: #bbe3de;
  }
  
  /*slick theme customized*/
  /* Arrows */
  .slick-prev,
  .slick-next {
      position: absolute;
      display: block;
      font-size: 16.5px;
      cursor: pointer;
      background: #ffffff;
      color: #878787;
      top: 50%;
      margin-top: -23px;
      padding: 15px 17px;
      border: none;
      outline: none;
      z-index: 1;
      -webkit-transition: color 0.2s ease;
      -moz-transition: color 0.2s ease;
      -ms-transition: color 0.2s ease;
      -o-transition: color 0.2s ease;
      transition: color 0.2s ease;
  }
  
  .slick-prev:hover,
  .slick-next:hover {
      outline: none;
      color: #ec6b9c;
  }
  
  .slick-prev {
      left: 16px;
  }
  
  @media only screen and (max-width: 1200px) {
      .slick-prev {
          left: 5px;
      }
  }
  
  [dir="rtl"] .slick-prev {
      left: auto;
      right: 39px;
  }
  
  @media only screen and (max-width: 1200px) {
      [dir="rtl"] .slick-prev {
          right: -1px;
      }
  }
  
  .slick-next {
      right: 39px;
  }
  
  @media only screen and (max-width: 1200px) {
      .slick-next {
          right: -1px;
      }
  }
  
  [dir="rtl"] .slick-next {
      left: 16px;
      right: auto;
  }
  
  @media only screen and (max-width: 1200px) {
      [dir="rtl"] .slick-next {
          left: 5px;
      }
  }
  
  /* Dots */
  .slick-slider {
      margin-bottom: 5px;
  }
  
  .slick-dots {
      position: absolute;
      bottom: -45px;
      list-style: none;
      display: block;
      text-align: center;
      padding: 0;
      width: 100%;
  }
  
  .slick-dots li {
      position: relative;
      display: inline-block;
      height: 20px;
      width: 20px;
      margin: 0 5px;
      padding: 0;
      cursor: pointer;
  }
  
  .slick-dots li button {
      border: 0;
      background: transparent;
      display: block;
      height: 20px;
      width: 20px;
      outline: none;
      line-height: 0px;
      font-size: 0px;
      color: transparent;
      padding: 5px;
      cursor: pointer;
  }
  
  .slick-dots li button:hover, .slick-dots li button:focus {
      outline: none;
  }
  
  .slick-dots li button:before {
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 20px;
      font-size: 6px;
      line-height: 20px;
      text-align: center;
      -webkit-font-smoothing: antialiased;
  }
  
  /*# sourceMappingURL=slick-theme.css.map */
  
  /*slick theme customized*/</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"&gt;
  
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.7/slick.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.7/slick.js"&gt;&lt;/script&gt;
  &lt;div class="container-fluid"&gt;    
  &lt;div class="row slider"&gt;
                  &lt;div class="col-xs-12"&gt;
                      &lt;div class="col-xs-12 col-sm-3 slider-left"&gt;
                          &lt;div class="col-xs-12"&gt;
                              &lt;h2&gt;PARTY DECORATIORS&lt;/h2&gt;
  
                              &lt;div class="col-xs-12 left-description"&gt;
                                  LOOKING for someone to come and DECORATE your NEXT PARTY?
                              &lt;/div&gt;
                              &lt;div class="col-xs-12 left-info"&gt;
                                  We will come and
                                  &lt;br&gt;
                                  decorate your children's party
                                  &lt;br&gt;
                                  within a 50 mile radius of
                              &lt;/div&gt;
                              &lt;div class="col-xs-12 left-location"&gt;
                                  IPSWICH
                              &lt;/div&gt;
                              &lt;div class="col-xs-12 left-read-more"&gt;
                                  &lt;a href="#"&gt;READ MORE&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-xs-12 col-sm-9 slider-main"&gt;
                          &lt;div class="col-xs-12 single-slide"&gt;
                              &lt;img src="https://placehold.it/350x150" alt=""/&gt;
  
                              &lt;div class="slide-description"&gt;
                                  book us to decorate your next party!
                                  &lt;a href="#"&gt;CLICK HERE&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-xs-12 single-slide"&gt;
                              &lt;img src="https://placehold.it/350x150" alt=""/&gt;
  
                              &lt;div class="slide-description"&gt;
                                  book us to decorate your next party!
                                  &lt;a href="#"&gt;CLICK HERE&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-xs-12 single-slide"&gt;
                              &lt;img src="https://placehold.it/350x150" alt=""/&gt;
  
                              &lt;div class="slide-description"&gt;
                                  book us to decorate your next party!
                                  &lt;a href="#"&gt;CLICK HERE&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
                          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>UPDATE: The recent update 1.5.9 fixed the issue.</strong></p>