jquery - 光滑 slider 中的 AppendArrows 不移动 slider

Question

我有一个使用光滑 slider 的页面，我想将箭头附加到某个 div，我的问题是，当我附加箭头时， slider 不再移动，如果我不这样做，它就可以正常工作。我设置页面的方式在调整屏幕大小时无法让箭头正确定位。这就是为什么我需要将箭头附加到 news_slider div。如果我遗漏了某些内容或者您需要更多信息，请告诉我。

这是我的 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">',
});

Answer 1

我也遇到了同样的问题，可能是因为在slick中使用了asNavFor。这是解决方法

在 slider div 外部，创建另一个包含两个按钮或任何内联属性(如 i、span 等)的 div。

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

然后在你的 JavaScript 中，

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