Question

我有一个使用光滑滑块的页面，我想将箭头附加到某个div，我的问题是，当我附加箭头时，滑块不再移动，如果我没有，那么它工作正常。我设置页面的方式当我调整屏幕大小时，我无法正确定位箭头。这就是为什么我需要将箭头附加到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

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

在滑块div之外，创建另一个包含两个按钮或任何内联属性的div，例如i，span等。

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

然后在你的javascript中，

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

Answer 2

当你运行javascript来创建轮播/滑块时，你能发布你的实际html而不是页面上生成的html吗？我设置了一个示例，您可以通过附加到滑块容器外部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>

AppendArrows在滑动滑块中不移动滑块

2 个答案: