滑动箭头按钮在滑块之间不显示

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>

有人可以帮助我吗？

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"/>

Answer 2

HTML ：找到包含按钮和图像的父元素。对我来说，该元素具有此类：

class="slick-initialized slick-slider"

CSS ：添加“ display：flex;” （此外，如果要使图像垂直居中，请添加“ align-items：center;”），如下所示：

.slick-initialized.slick-slider {
  display: flex;
  align-items: center;
}