Слайдер не работает должным образом в bootstrap 4 - PullRequest
Новая
       5

Слайдер не работает должным образом в bootstrap 4

0 голосов
/ 25 февраля 2020

Я думаю, что я все сделал правильно в соответствии с официальным сайтом слайдера, но, как только я закончил настройку, слайдер не работает, он просто показывает изображения один над другим.

Вот мой код :

Элементы головки 

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

Элементы корпуса 

<div class="col-sm-12">
    <div class="autoplay">
        <div><img src=".\slickpics\cookie1.png"></div>
        <div><img src=".\slickpics\cookie1.png"></div>
        <div><img src=".\slickpics\cookie1.png"></div>
        <div><img src=".\slickpics\cookie1.png"></div>
        <div><img src=".\slickpics\cookie1.png"></div>
        <div><img src=".\slickpics\cookie1.png"></div>
        <div><img src=".\slickpics\cookie1.png"></div>
        <div><img src=".\slickpics\cookie1.png"></div>
        <div><img src=".\slickpics\cookie1.png"></div>
    </div>
</div>

Перед элементами закрытия корпуса 

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-migrate-3.1.0.min.js" integrity="sha256-ycJeXbll9m7dHKeaPbXBkZH8BuP99SmPm/8q5O+SbBc=" crossorigin="anonymous"></script>
<script type="text/javascript" src="/slick/slick.min.js"></script>

javascript в конце 

$(document).ready(function(){
    $('.autoplay').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      infinite: true,
      autoplay: true,
      autoplaySpeed: 2000,
    });
});

Любая помощь будет принята с благодарностью и спасибо за ваше время.

1 Ответ

0 голосов
/ 08 марта 2020

Была повторена jQuery CND, была одна для bootstrap и одна для слайк-слайдера, я решил эту проблему, удалив одну из них, в частности, одну из слайк-слайдера.

...