javascript - 滑块之间不显示光滑的箭头按钮

Question

我有一个光滑的滑块，在这里我不知道为什么它不显示在滑块之间，而是导航按钮出现在滑块的顶部和底部，如下面的屏幕截图

这是我的 JS 代码：

$('.multiple-items').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
        nextArrow: '<button type="button" class="btn btn-primary">next</button>',
        prevArrow: '<button type="button" class="btn btn-primary">prev</button>'
    });

这里是我的 HTML 代码：

 <div class="slider multiple-items">
                        @foreach($data['related'] as $related)
                            @php 
                                $image = GlobalController::get_single_image($related->id);
                            @endphp
                            <div class="col-md-4">
                                <article class="entry">
                                    <div class="entry__img-holder">
                                        <a href="single-post.html">
                                            <div class="thumb-container thumb-75">
                                                <img data-src="{{ URL::to($image[0]->image) }}" src="{{ URL::to($image[0]->image) }}" class="entry__img lazyload" alt="">
                                            </div>
                                        </a>
                                    </div>

                                    <div class="entry__body">
                                        <div class="entry__header">
                                          <h2 class="entry__title entry__title--sm">
                                            <a href="single-post.html">{{ strip_tags($related->description) }}</a>
                                          </h2>
                                        </div>
                                    </div>
                                </article>
                            </div>
                        @endforeach
                    </div>

任何人都可以帮助我吗？

标签： javascriptjqueryhtmlcss

Answer 1

使用 CSS

在你的添加 slick.css

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>