AppendArrows в slick slider не движущиеся слайдеры

У меня есть страница, которая использует слайдер слайдера, и я хотел бы добавить стрелки к определенному div, моя проблема в том, что когда я добавляю стрелки, ползунок больше не перемещается, и если я надену «Тогда все будет хорошо. Как я настроил свою страницу, я не могу заставить стрелки правильно позиционировать, когда я изменяю размер экрана. Вот почему мне нужно добавить стрелки в div_slider. Если я что-то оставил или вам нужна дополнительная информация, пожалуйста, дайте мне знать.AppendArrows в slick slider не движущиеся слайдеры

Вот мой HTML

<div class="news_wrapper single-item slick-initialized slick-slider"> 
    <div class="slick-list draggable" aria-live="polite" tabindex="0"> 
     <div class="slick-track" style="opacity: 1; width: 4260px; transform: translate3d(-710px, 0px, 0px);"> 
      <div class="news_slider slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" style="width: 710px;"> 
       <div class="main_news"> 
        <div class="main_news_wrapper"> 
         <div class="news_id"> 
          <p>1</p> 
         </div> 
         <div class="story_image"> 
          <img src="http://localhost:8888/site/images/images_1.jpg"> 
         </div> 
        </div> 
        <div class="inactive_arrow"> 
         <a href="javascript:void(0);"><img src="images/inactive_arrow.png"></a> 
        </div> 
        <div class="story"> 
         <div class="story_title"> 
          <h1>Well Good Ambassador 1</h1> 
         </div> 
         <div class="story_caption"> 
          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... 
         </div> 
         <div class="read_story"> 
          <a href="javascript:void(0);">Read full story...</a> 
         </div> 
        </div> 
        <div class="clearboth"></div> 
       </div> 
      </div> 

      <div class="news_slider slick-slide slick-active" data-slick-index="-1" aria-hidden="true" style="width: 710px;"> 
       <div class="main_news"> 
        <div class="main_news_wrapper"> 
         <div class="news_id"> 
          <p>2</p> 
         </div> 
         <div class="story_image"> 
          <img src="http://localhost:8888/site/images/images_2.jpg"> 
         </div> 
        </div> 
        <div class="inactive_arrow"> 
         <a href="javascript:void(0);"><img src="images/inactive_arrow.png"></a> 
        </div> 
        <div class="story"> 
         <div class="story_title"> 
          <h1>Well Good Ambassador 1</h1> 
         </div> 
         <div class="story_caption"> 
          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... 
         </div> 
         <div class="read_story"> 
          <a href="javascript:void(0);">Read full story...</a> 
         </div> 
        </div> 
        <div class="clearboth"></div> 
       </div> 
      </div> 

      <div class="news_slider slick-slide" data-slick-index="-1" aria-hidden="true" style="width: 710px;"> 
       <div class="main_news"> 
        <div class="main_news_wrapper"> 
         <div class="news_id"> 
          <p>3</p> 
         </div> 
         <div class="story_image"> 
          <img src="http://localhost:8888/site/images/images_3.jpg"> 
         </div> 
        </div> 
        <div class="inactive_arrow"> 
         <a href="javascript:void(0);"><img src="images/inactive_arrow.png"></a> 
        </div> 
        <div class="story"> 
         <div class="story_title"> 
          <h1>Well Good Ambassador 1</h1> 
         </div> 
         <div class="story_caption"> 
          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... 
         </div> 
         <div class="read_story"> 
          <a href="javascript:void(0);">Read full story...</a> 
         </div> 
        </div> 
        <div class="clearboth"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

Вот мой JS

$('.slider-nav').slick({ 
    dots: true, 
    infinite: true, 
    speed: 300, 
    arrows: false, 
    asNavFor: '.single-item', 
    slidesToShow: 4,    
    focusOnSelect: true, 
    centerMode: false, 
    slidesToScroll: 1, 
    prevArrow: '<img class="newswrapper_prev" src="images/blue_left_arrow.png">', 
    nextArrow: '<img class="newswrapper_next" src="images/blue-arrow.png">', 
}); 

$('.single-item').slick({ 
    dots: false, 
    infinite: true, 
    speed: 300, 
    arrows: true, 
    asNavFor: '.slider-nav', 
    lazyLoad: 'ondemand', 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    appendArrows: $(".news_slider"), 
    prevArrow: '<img class="newswrapper_prev" src="images/blue_left_arrow.png">', 
    nextArrow: '<img class="newswrapper_next" src="images/blue-arrow.png">', 
});

источник

2015-04-13 Niks

Вы бы иметь возможность разместить свой фактический HTML, а не HTML генерируется на странице, когда Javascript запускается для создания карусель/слайдер? Я настраиваю пример, где вы можете перемещать слайдер с помощью стрелок, которые прикреплены к div вне контейнера ползунка. Это может помочь. Я попытался использовать как можно больше вашего примера html.

https://jsfiddle.net/ftm8hu7n/1/

<div style='background-color:#BBB;'> 
    <div class="news_wrapper"> 
     <div class="slick-slide"> 
      <div class="main_news"> 
       <div class="main_news_wrapper"> 
        <div class="news_id"> 
         <p>1</p> 
        </div> 
       </div> 
       <div class="story"> 
        <div class="story_title"> 
         <h1>Well Good Ambassador 1</h1> 
        </div> 
        <div class="story_caption"> 
         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... 
        </div> 
        <div class="read_story"> 
         <a href="javascript:void(0);">Read full story...</a> 
        </div> 
       </div> 
       <div class="clearboth"></div> 
      </div> 
     </div> 
     <div class="slick-slide"> 
      <div class="main_news"> 
       <div class="main_news_wrapper"> 
        <div class="news_id"> 
         <p>2</p> 
        </div> 
        <div class="story_image"> 

        </div> 
       </div> 
       <div class="inactive_arrow"> 
        <a href="javascript:void(0);"><img src="images/inactive_arrow.png"></a> 
       </div> 
       <div class="story"> 
        <div class="story_title"> 
         <h1>Well Good Ambassador 1</h1> 
        </div> 
        <div class="story_caption"> 
         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... 
        </div> 
        <div class="read_story"> 
         <a href="javascript:void(0);">Read full story...</a> 
        </div> 
       </div> 
       <div class="clearboth"></div> 
      </div> 
     </div> 
     <div class="slick-slide"> 
      <div class="main_news"> 
       <div class="main_news_wrapper"> 
        <div class="news_id"> 
         <p>3</p> 
        </div> 
        <div class="story_image"> 

        </div> 
       </div> 
       <div class="inactive_arrow"> 
        <a href="javascript:void(0);"><img src="images/inactive_arrow.png"></a> 
       </div> 
       <div class="story"> 
        <div class="story_title"> 
         <h1>Well Good Ambassador 1</h1> 
        </div> 
        <div class="story_caption"> 
         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... 
        </div> 
        <div class="read_story"> 
         <a href="javascript:void(0);">Read full story...</a> 
        </div> 
       </div> 
       <div class="clearboth"></div> 
      </div> 
     </div> 
    </div> 
    <div class="news_slider" style="position:relative; left:50px; width:25px;">test</div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.news_wrapper').slick({ 
      dots: false, 
      arrows: true, 
      appendArrows: $(".news_slider") 
     }); 
    }); 
</script>

источник

2015-05-04 18:37:00 joeshmoe301

У меня была такая же проблема, может быть, причина в том, что использование asNavFor в пятне. Вот обходной путь

Вне вашего слайдера DIV создайте другой DIV, который содержит две кнопки или любые встроенные атрибуты, как я, охватывают и т.д.

<div> 
    <button class="leftArrow"> Prev </button> 
    <button class="rightArrow"> Next </button> 
</div>

Затем в JavaScript,

$('.leftArrow').on('click', function(){ 
    $('.single-item').slick("slickPrev"); 
});

источник

2016-11-04 12:09:34 sc30

AppendArrows в slick slider не движущиеся слайдеры

ответ

Смежные вопросы