title: AppendArrows in slick slider not moving sliders
body: <p>I have a page that uses slick slider and I would like to append the arrows to a certain div, my problem is that when I do append the arrows the slider no longer moves and if I don't then it works fine. The way I have my page set up I can't get the arrows to position themselves correctly when I resize the screen. That is why I need to append the arrows to the news_slider div. If I've left something out or if you need more information please let me know.</p>
  
  <p>Here is my html</p>
  
  <pre><code>&lt;div class="news_wrapper single-item slick-initialized slick-slider"&gt;
      &lt;div class="slick-list draggable" aria-live="polite" tabindex="0"&gt;
          &lt;div class="slick-track" style="opacity: 1; width: 4260px; transform: translate3d(-710px, 0px, 0px);"&gt;
              &lt;div class="news_slider slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" style="width: 710px;"&gt;
                  &lt;div class="main_news"&gt;
                      &lt;div class="main_news_wrapper"&gt;
                          &lt;div class="news_id"&gt;
                              &lt;p&gt;1&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div class="story_image"&gt;
                              &lt;img src="http://localhost:8888/site/images/images_1.jpg"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="inactive_arrow"&gt;
                          &lt;a href="javascript:void(0);"&gt;&lt;img src="images/inactive_arrow.png"&gt;&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="story"&gt;
                          &lt;div class="story_title"&gt;
                              &lt;h1&gt;Well Good Ambassador 1&lt;/h1&gt;
                          &lt;/div&gt;
                          &lt;div class="story_caption"&gt;
                              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget erat a dolor mattis semper. Morbi at elementum dolor, id eleifend mi. Cras massa nisi, sagittis vel feugiat at, vulputate eu est. Nulla eu malesuada neque. Aliquam in ultrices purus. Proin nec fringilla nisi. Etiam eu risus ullamc...
                          &lt;/div&gt;
                          &lt;div class="read_story"&gt;
                              &lt;a href="javascript:void(0);"&gt;Read full story...&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="clearboth"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="news_slider slick-slide slick-active" data-slick-index="-1" aria-hidden="true" style="width: 710px;"&gt;
                  &lt;div class="main_news"&gt;
                      &lt;div class="main_news_wrapper"&gt;
                          &lt;div class="news_id"&gt;
                              &lt;p&gt;2&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div class="story_image"&gt;
                              &lt;img src="http://localhost:8888/site/images/images_2.jpg"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="inactive_arrow"&gt;
                          &lt;a href="javascript:void(0);"&gt;&lt;img src="images/inactive_arrow.png"&gt;&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="story"&gt;
                          &lt;div class="story_title"&gt;
                              &lt;h1&gt;Well Good Ambassador 1&lt;/h1&gt;
                          &lt;/div&gt;
                          &lt;div class="story_caption"&gt;
                              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget erat a dolor mattis semper. Morbi at elementum dolor, id eleifend mi. Cras massa nisi, sagittis vel feugiat at, vulputate eu est. Nulla eu malesuada neque. Aliquam in ultrices purus. Proin nec fringilla nisi. Etiam eu risus ullamc...
                          &lt;/div&gt;
                          &lt;div class="read_story"&gt;
                              &lt;a href="javascript:void(0);"&gt;Read full story...&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="clearboth"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="news_slider slick-slide" data-slick-index="-1" aria-hidden="true" style="width: 710px;"&gt;
                  &lt;div class="main_news"&gt;
                      &lt;div class="main_news_wrapper"&gt;
                          &lt;div class="news_id"&gt;
                              &lt;p&gt;3&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div class="story_image"&gt;
                              &lt;img src="http://localhost:8888/site/images/images_3.jpg"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="inactive_arrow"&gt;
                          &lt;a href="javascript:void(0);"&gt;&lt;img src="images/inactive_arrow.png"&gt;&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="story"&gt;
                          &lt;div class="story_title"&gt;
                              &lt;h1&gt;Well Good Ambassador 1&lt;/h1&gt;
                          &lt;/div&gt;
                          &lt;div class="story_caption"&gt;
                              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget erat a dolor mattis semper. Morbi at elementum dolor, id eleifend mi. Cras massa nisi, sagittis vel feugiat at, vulputate eu est. Nulla eu malesuada neque. Aliquam in ultrices purus. Proin nec fringilla nisi. Etiam eu risus ullamc...
                          &lt;/div&gt;
                          &lt;div class="read_story"&gt;
                              &lt;a href="javascript:void(0);"&gt;Read full story...&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="clearboth"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my js</p>
  
  <pre><code>    $('.slider-nav').slick({
      dots: true,
      infinite: true,
      speed: 300,
      arrows: false,
      asNavFor: '.single-item',
      slidesToShow: 4,            
      focusOnSelect: true,
      centerMode: false,
      slidesToScroll: 1,
      prevArrow: '&lt;img class="newswrapper_prev" src="images/blue_left_arrow.png"&gt;',
      nextArrow: '&lt;img class="newswrapper_next" src="images/blue-arrow.png"&gt;',
  });
  
  $('.single-item').slick({
      dots: false,
      infinite: true,
      speed: 300,
      arrows: true,
      asNavFor: '.slider-nav',
      lazyLoad: 'ondemand',
      slidesToShow: 1,
      slidesToScroll: 1,
      appendArrows: $(".news_slider"),
      prevArrow: '&lt;img class="newswrapper_prev" src="images/blue_left_arrow.png"&gt;',
      nextArrow: '&lt;img class="newswrapper_next" src="images/blue-arrow.png"&gt;',
  });
  </code></pre>