Блог

У меня есть скользкий слайдер, здесь я не знаю, почему он не отображается между слайдером, но вместо этого кнопки навигатора отображаются вверху и внизу слайдера, как на скриншоте ниже

вот мой 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>
  

Кто-нибудь может мне помочь?

используйте 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"/>
  

HTML: найдите родительский элемент, который содержит кнопки и изображения. Для меня этот элемент имел этот класс:

 class="slick-initialized slick-slider"
  

CSS: добавьте «display: flex;» (Также, если вы хотите, чтобы изображения центрировались по вертикали, добавьте «align-items: center;»), вот так:

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