title: Slick slider Syncing - custom arrow on breakpoints
body: <p>So i have this multi slider where i use the slick slider sync to make this slider work. Everything works great except when i want to use a different/my own buttons as next previous arrows on mobile screens (768 and below). I have the UI setup correctly as far as showing the correct buttons. But my setup is not recognizing my custom buttons as slick arrow on mobile.</p>
  
  <p><strong>Regular screen</strong> 
  <a href="https://i.stack.imgur.com/Vmqi6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vmqi6.png" alt="enter image description here"></a></p>
  
  <p><strong>Mobile screen</strong> (buttons not working as arrows)
  <a href="https://i.stack.imgur.com/HIUPJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HIUPJ.png" alt="enter image description here"></a></p>
  
  <pre><code>**here is my code**
  </code></pre>
  
  <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-nav-slider-bg").slick({
       slidesToShow: 1,
       slidesToScroll: 1,
       arrows: false,
       fade: true,
       asNavFor: '.home-nav-slider-slider',
    });
  
  
    $(".home-nav-slider-slider").slick({
       slidesToShow: 1,
       slidesToScroll: 1,
       centerPadding: '30px',
       asNavFor: '.home-nav-slider-bg',
       centerMode: false,
       focusOnSelect: true,
       speed: 500,
       arrows: true,
       //fade: true,
       responsive: [
          {
             breakpoint: 768,
             settings: {
                nextArrow: $('.home-nav-slider-media-control button.right slick-next').get().map(function (v) { return v.outerHTML }).join(),
                prevArrow: $('.home-nav-slider-media-control button.left slick-prev').get().map(function (v) { return v.outerHTML }).join()
             }
          }
  
  
       ]
    });
  
    $(window).resize(function () {
       $('.home-nav-slider-slider')[0].slick.refresh();
    });
  });
  
  jQuery(window).on('load', function () {
    function getImage() {
       jQuery(".home-nav-slider-image-holder").each(function () {
          var imgSrc = $(this).find("img").attr("src");
          $(this).css('background-image', 'url(' + imgSrc + ')');
       });
    }
    getImage();
  });
  
  
  
  
  var $status = $('.home-nav-slider-slideCount');
  var $slickElement = $('.home-nav-slider-slickElement');
  
  $slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
    var i = (currentSlide ? currentSlide : 0) + 1;
    $status.text(i + '/' + slick.slideCount);
  });
  
  $('.home-nav-slider-slider').on('afterChange', function (event, slick, currentSlide, nextSlide) {
  
    console.log(event);
    console.log(slick);
    console.log(currentSlide);
    console.log(nextSlide);
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1, h2, h3, h4, h5, h6 {
    font-family: 'Teko', sans-serif;
  }
  html {
    font-size: 18px;
  }
  @media (min-width: 576px) {
    .container {
      max-width: 540px;
   }
  }
  @media (min-width: 768px) {
    .container {
      max-width: 720px;
   }
  }
  @media (min-width: 992px) {
    .container {
      max-width: 960px;
   }
  }
  @media (min-width: 1200px) {
    .container {
      max-width: 1400px;
   }
  }
  h1, .h1 {
    font-size: 3.815rem;
  }
  h2, .h2 {
    font-size: 2.441rem;
  }
  h3, .h3 {
    font-size: 1.563rem;
  }
  h4, .h4 {
    font-size: 1.25rem;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Teko', sans-serif;
  }
  .home-nav-slider-main .home-nav-slider-title h1 {
    color: #fff;
    font-weight: normal;
    letter-spacing: 1.5px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .57);
    line-height: 110%;
  }
  .home-nav-slider-main .home-nav-slider-media-control button {
    z-index: 1;
    border-radius: 0;
  }
  .home-nav-slider-main .home-nav-slider-slider {
    color: #fff;
  }
  .home-nav-slider-main .home-nav-slider-slider .slick-prev, .home-nav-slider-main .home-nav-slider-slider .slick-next {
    border: 1px solid #eee;
    height: 2.1rem;
    width: 40px;
    z-index: 1;
    top: -1rem !important;
  }
  .home-nav-slider-main .home-nav-slider-slider .slick-list {
    padding-top: 1rem;
  }
  .home-nav-slider-main .home-nav-slider-slider .slick-list:before {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #fff;
    display: block;
    position: absolute;
    top: 0;
  }
  .home-nav-slider-main .slick-prev:before, .home-nav-slider-main .slick-next:before {
    font-family: 'Ionicons';
  }
  .home-nav-slider-main .slick-next:before {
    content: '\f3d6';
  }
  .home-nav-slider-main .slick-prev:before {
    content: '\f3d5';
  }
  .home-nav-slider-main .home-nav-slider-image-holder {
    background-size: cover;
    background-position: center;
  }
  .home-nav-slider-main .home-nav-slider-image-holder img {
    opacity: 0;
    visibility: hidden;
  }
  .home-nav-slider-main .home-nav-slider-bg {
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    top: 0;
    bottom: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .home-nav-slider-main .home-nav-slider-bg div {
    height: 100%;
  }
  .home-nav-slider-main .home-nav-slider-bg .slick-slide {
    margin: 0px;
  }
  .home-nav-slider-main .home-nav-slider-bg img {
    height: 100vh;
    width: auto;
  }
  .home-nav-slider-main .home-nav-slider-wrap {
    position: relative;
    overflow: hidden;
    height: 100vh;
  }
  .home-nav-slider-main .home-nav-slider-slideCount {
    position: relative;
    left: 6rem;
    top: -10px;
    color: #fff;
  }
  .home-nav-slider-main .slick-slide {
    margin: 0px 3px;
  }
  .home-nav-slider-main .home-slider-gradient-wrap {
    overflow: hidden;
  }
  .home-nav-slider-main .home-slider-gradient-wrap:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
   /* background-color: #000;
    */
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33000000', endColorstr='#b3000000', GradientType=0);
  }
  .home-nav-slider-main .home-slider-gradient-wrap .container .row {
    height: 100vh;
  }
  @media (min-width: 992px) {
    .home-nav-slider-main .slick-next {
      left: 2.18rem;
   }
    .home-nav-slider-main .slick-prev {
      left: 0px;
   }
  }
  @media (max-width: 992px) {
    .home-nav-slider-main .home-nav-slider-slider {
      position: relative;
      top: 0px;
   }
    .home-nav-slider-main .slick-prev {
      left: 0px;
   }
    .home-nav-slider-main .slick-next {
      left: 40px;
   }
  }
  @media (max-width: 767px) {
    .home-nav-slider-main .home-nav-slider-slider-text {
      display: block !important;
      text-align: left;
   }
    .home-nav-slider-main .home-nav-slider-slider-text p {
      text-align: left !important;
   }
    .home-nav-slider-main .home-nav-slider-slider-text p br {
      display: none;
   }
    .home-nav-slider-main .slider-home h1 {
      text-align: left;
   }
  }
  @media (max-width: 1024px) {
    .home-nav-slider-main .home-slider-gradient-wrap .container .row {
      height: auto;
   }
    .home-nav-slider-main .home-nav-slider-wrap {
      height: auto;
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
     &lt;meta charset="UTF-8"&gt;
     &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
     &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
     &lt;title&gt;slick 2-in-1-new&lt;/title&gt;
     &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
     &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" /&gt;
     &lt;link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" /&gt;
     &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" /&gt;
     &lt;link href="https://fonts.googleapis.com/css?family=Teko:400,500,600,700" rel="stylesheet"&gt;
     &lt;link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"&gt;
  
     &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
     &lt;div class="home-nav-slider-main"&gt;
        &lt;section class="home-nav-slider-wrap  mb-0 pt-11"&gt;
           &lt;div class="home-slider-gradient-wrap"&gt;
              &lt;div class="home-nav-slider-bg"&gt;
  
                 &lt;div class="home-nav-slider-image-holder"&gt;
                    &lt;img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" alt=""&gt;
                 &lt;/div&gt;
                 &lt;div class="home-nav-slider-image-holder"&gt;
                    &lt;img src="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1" alt=""&gt;
                 &lt;/div&gt;
  
  
  
              &lt;/div&gt;
              &lt;div class="container"&gt;
                 &lt;div class="row"&gt;
                    &lt;div class=" col-lg-12 align-self-center"&gt;
                       &lt;div class="home-nav-slider-title"&gt;
                          &lt;h1&gt; Hello&lt;br&gt;Slider&lt;/h1&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="col-lg-12 align-self-center d-none d-lg-block "&gt;
                       &lt;span class="home-nav-slider-slideCount"&gt;&lt;/span&gt;
  
                       &lt;div class="home-nav-slider-slider home-nav-slider-slickElement "&gt;
  
                          &lt;div&gt;
                             &lt;div
                                class="d-flex align-items-center justify-content-between home-nav-slider-slider-text mb-3"&gt;
                                &lt;div class="pr-5"&gt;
                                   &lt;h6&gt;
                                      hello
                                   &lt;/h6&gt;
                                &lt;/div&gt;
                                &lt;div class="pr-5"&gt;
                                   &lt;p&gt;
                                      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate, officiis
                                      blanditiis suscipit rerum mollitia natus ipsam. Rerum id eligendi reiciendis dolorum
                                      excepturi, quidem incidunt. Accusantium tenetur incidunt ratione laudantium aut.
  
                                   &lt;/p&gt;
                                &lt;/div&gt;
                                &lt;div&gt;
                                   &lt;a href="#"&gt;
                                      &lt;button class="btn btn-primary"&gt;
                                         click this
                                      &lt;/button&gt;
                                   &lt;/a&gt;
                                &lt;/div&gt;
                             &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div&gt;
                             &lt;div
                                class="d-flex align-items-center justify-content-between home-nav-slider-slider-text mb-3"&gt;
                                &lt;div class="pr-5"&gt;
                                   &lt;h6&gt;
                                      hello
                                   &lt;/h6&gt;
                                &lt;/div&gt;
                                &lt;div class="pr-5"&gt;
                                   &lt;p&gt;
                                      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate, officiis
                                      blanditiis suscipit rerum mollitia natus ipsam. Rerum id eligendi reiciendis dolorum
                                      excepturi, quidem incidunt. Accusantium tenetur incidunt ratione laudantium aut.
  
                                   &lt;/p&gt;
                                &lt;/div&gt;
                                &lt;div&gt;
                                   &lt;a href="#"&gt;
                                      &lt;button class="btn btn-primary"&gt;
                                         click this
                                      &lt;/button&gt;
                                   &lt;/a&gt;
                                &lt;/div&gt;
                             &lt;/div&gt;
                          &lt;/div&gt;
  
  
                       &lt;/div&gt;
                    &lt;/div&gt;
  
                 &lt;/div&gt;
  
              &lt;/div&gt;
              &lt;!-- small screen slide control --&gt;
              &lt;div class="d-flex justify-content-end d-lg-none home-nav-slider-media-control"&gt;
                 &lt;button class="btn btn-primary left "&gt;&lt;i class="ion-ios-arrow-thin-left" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                 &lt;button class="btn btn-primary right "&gt;&lt;i class="ion-ios-arrow-thin-right"
                       aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
  
              &lt;/div&gt;
  
  
  
           &lt;/div&gt;
        &lt;/section&gt;
     &lt;/div&gt;
  
  
     &lt;script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"&gt;&lt;/script&gt;
     &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"&gt;&lt;/script&gt;
     &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"&gt;&lt;/script&gt;
     &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"&gt;&lt;/script&gt;
     &lt;script src="js/extra-jquery.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>