滑動箭頭按鈕在滑塊之間不顯示

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;
}