jQuery - Карандаш для карандашей - Как использовать appendTo() в этой ситуации?

Question

Я использую Slick carousel Плагин jQuery. В docs он имеет опцию appendArrows. Насколько я понимаю, его можно использовать, чтобы стрелки придерживались другого элемента. Я использую карусель, который вложен, так что каждый слайд имеет заголовок, ссылку, описание и пару суб-слайдов, которые являются изображениями. При настройках по умолчанию стрелки nav центрируются по всему слайду. Я бы хотел, чтобы их добавляли только к изображениям, но я не могу понять, как это сделать. appendArrows: $('img’) не работает.

Вот разметка:

<div class="slider-for"> 

      <div class="single-item"> 
       <h4>Title</h4> 
       <a href=“#” target="_blank">example.com</a> 
       <p>Description.</p> 
       <img class="img-responsive" src="http://placehold.it/960x540"> 
       <img class="img-responsive" src="http://placehold.it/960x540"> 
       <img class="img-responsive" src="http://placehold.it/960x540"> 
       <img class="img-responsive" src="http://placehold.it/960x540"> 
       <img class="img-responsive" src="http://placehold.it/960x540"> 
      </div> 

      <div class="single-item"> 
       <h4>Title</h4> 
       <a href=“#” target="_blank">example.com</a> 
       <p>Description.</p> 
       <img class="img-responsive" src="http://placehold.it/960x540"> 
       <img class="img-responsive" src="http://placehold.it/960x540"> 
       <img class="img-responsive" src="http://placehold.it/960x540"> 
       <img class="img-responsive" src="http://placehold.it/960x540"> 
       <img class="img-responsive" src="http://placehold.it/960x540"> 
      </div> 

    <div class="single-item"> 
       <h4>Title</h4> 
       <a href=“#” target="_blank">example.com</a> 
       <p>Description.</p> 
       <img class="img-responsive" src="http://placehold.it/960x540"> 
       <img class="img-responsive" src="http://placehold.it/960x540"> 
       <img class="img-responsive" src="http://placehold.it/960x540"> 
       <img class="img-responsive" src="http://placehold.it/960x540"> 
       <img class="img-responsive" src="http://placehold.it/960x540"> 
      </div> 

</div> 

И JS:

$('.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'), 
    });` 

EDIT: Я думаю, что вопрос не ясно, мой плохой. .slider-for переключается на .slider-nav, который я пропустил из примера. Все это работает, моя проблема - скорее эстетика. Когда стрелки добавляются ко всему .single-item, они центрируются по вертикали на высоту всего <div class="single-item">, и это выглядит нечетным, так как внутри него фактически сползает только <img>. Я хотел бы добавить стрелки к <img>, чтобы они были центрированы по вертикали до высоты изображения. Надеюсь, это имеет смысл.

Я предполагаю, что я действительно спрашиваю: как мне настроить цель <img> внутри <div class="single-item"> с appendArrows()? Состояние документов:

Опции: appendArrows; Тип: строка; По умолчанию: $ (элемент); Desc .: Изменение где навигационные стрелки прикрепляются (селектор, HTMLString, массив, Element, JQuery объект)

Как использовать это? Пожалуйста, имейте в виду, что я полный новичок, я не знаю много JS, поэтому я, вероятно, не вижу ничего очевидного.

Answer 1

У меня есть. Это была глупая ошибка. Я просто переместил <div class="single-item"> вниз, чтобы обернуть только <img> и обернул все это в другом div. Например:

<div> 
      <h4>Title</h4> 
      <a href=“#” target="_blank">example.com</a> 
      <p>Description.</p> 
     <div class="single-item"> 
      <img class="img-responsive" src="http://placehold.it/960x540"> 
      <img class="img-responsive" src="http://placehold.it/960x540"> 
      <img class="img-responsive" src="http://placehold.it/960x540"> 
      <img class="img-responsive" src="http://placehold.it/960x540"> 
      <img class="img-responsive" src="http://placehold.it/960x540"> 
     </div> 
    </div> 

Answer 2

добавить следующее CSS:

.slick-prev 
{ 
    position: absolute; 
    left: 0px; 
} 
.slick-next 
{ 
    position: absolute; 
    right: 50px; 
} 

и внести изменения в JS, чтобы отразить следующее:

$('.slider-for').slick({ 
     slidesToShow: 1, 
     slidesToScroll: 1, 
     fade: true, 
     swipe: false, 
     accessibility: false, 
     arrows: true 
    }); 
    $('.single-item').slick({ 
     slide: 'img', 
     dots: true, 
     speed: 500, 
     arrows: false 
    }); 

Если выше производит ваш желаемый результат, вы можете настроить положение следующей стрелки путем корректировки правая собственность .slick-next