title: jQuery - Slick carousel - How to use appendTo() in this situation?
body: <p>I’m using <a href="http://kenwheeler.github.io/slick/" rel="nofollow">Slick carousel</a> jQuery plugin. In the <a href="https://github.com/kenwheeler/slick/blob/master/README.markdown" rel="nofollow">docs</a> it has an option <code>appendArrows</code>. As I understand it can be used to make the arrows stick to a different element. I use a carousel that is nested so that each slide has a title, link, description and than a couple sub-slides that are pictures. With the default settings the nav arrows are centred to the whole slide. I’d like them to be appended only to the pictures but I can’t figure out how to do it. <code>appendArrows: $('img’)</code> does not work.</p>
  
  <p>Here’s the markup:</p>
  
  <pre><code>&lt;div class="slider-for"&gt;
  
              &lt;div class="single-item"&gt;
                  &lt;h4&gt;Title&lt;/h4&gt;
                  &lt;a href=“#” target="_blank"&gt;example.com&lt;/a&gt;
                  &lt;p&gt;Description.&lt;/p&gt;
                  &lt;img class="img-responsive" src="http://placehold.it/960x540"&gt;
                  &lt;img class="img-responsive" src="http://placehold.it/960x540"&gt;
                  &lt;img class="img-responsive" src="http://placehold.it/960x540"&gt;
                  &lt;img class="img-responsive" src="http://placehold.it/960x540"&gt;
                  &lt;img class="img-responsive" src="http://placehold.it/960x540"&gt;
              &lt;/div&gt;
  
              &lt;div class="single-item"&gt;
                  &lt;h4&gt;Title&lt;/h4&gt;
                  &lt;a href=“#” target="_blank"&gt;example.com&lt;/a&gt;
                  &lt;p&gt;Description.&lt;/p&gt;
                  &lt;img class="img-responsive" src="http://placehold.it/960x540"&gt;
                  &lt;img class="img-responsive" src="http://placehold.it/960x540"&gt;
                  &lt;img class="img-responsive" src="http://placehold.it/960x540"&gt;
                  &lt;img class="img-responsive" src="http://placehold.it/960x540"&gt;
                  &lt;img class="img-responsive" src="http://placehold.it/960x540"&gt;
              &lt;/div&gt;
  
      &lt;div class="single-item"&gt;
                  &lt;h4&gt;Title&lt;/h4&gt;
                  &lt;a href=“#” target="_blank"&gt;example.com&lt;/a&gt;
                  &lt;p&gt;Description.&lt;/p&gt;
                  &lt;img class="img-responsive" src="http://placehold.it/960x540"&gt;
                  &lt;img class="img-responsive" src="http://placehold.it/960x540"&gt;
                  &lt;img class="img-responsive" src="http://placehold.it/960x540"&gt;
                  &lt;img class="img-responsive" src="http://placehold.it/960x540"&gt;
                  &lt;img class="img-responsive" src="http://placehold.it/960x540"&gt;
              &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And JS:</p>
  
  <pre><code>$('.slider-for').slick({
          slidesToShow: 1,
          slidesToScroll: 1,
          fade: true,
          swipe: false,
          accessibility: false,
          arrows: false,
      });
  
   $('.single-item').slick({
          slide: 'img',
          dots: true,
          speed: 500,
          arrows: true,
          appendArrows: $('img'),
      });`
  </code></pre>
  
  <p>EDIT: I think the question was not clear, my bad. The <code>.slider-for</code> is toggled by a <code>.slider-nav</code> that I omitted from the example. It all works, my problem is more one of aesthetics. When the arrows are appended to the whole <code>.single-item</code>they are centred vertically to the height of the whole <code>&lt;div class="single-item"&gt;</code> and that looks odd since only the <code>&lt;img&gt;</code>s inside it are actually sliding. I'd like to append the arrows to the <code>&lt;img&gt;</code>'s so that they will be centred vertically to the height of the image. I hope that makes more sense.</p>
  
  <p>I guess what I'm asking really is: how do I target the <code>&lt;img&gt;</code>'s inside <code>&lt;div class="single-item"&gt;</code> with <code>appendArrows()</code>? The docs state:</p>
  
  <blockquote>
    <p>Option: appendArrows; Type: string; Default: $(element); Desc.: Change
    where the navigation arrows are attached (Selector, htmlString, Array,
    Element, jQuery object)</p>
  </blockquote>
  
  <p>How do I use that? Please bear in mind that I'm a total beginner, I don't know much JS, so I'm probably missing something obvious.</p>