Стрелки "Слайк-карусель" не появляются и работают так, как они должны

Я использую http://kenwheeler.github.io/slick/, но не может показаться, что он работает так, как должен. После запуска кода ниже я вижу, что файлы CSS и js загружаются, но не отражаются. например, стрелок нет.

Есть ли что-то, что я могу сделать неправильно (примечание: slick CSS и js файлы, а также html файл находятся в одной и той же папке

<html>

<head>

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

</head>


<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="../Slick/slick.min.js"></script>    

<h2>title</h2>

<script type="text/javascript">

$(document).ready(function(){

    $('.single-item').slick();

    });
</script>

<div>
    <div class="single-item">
        <div > <img src="../Slick/F1.jpg" alt="bkj"></div>
        <div > <img src="../Slick/F1.jpg" alt="bkj"></div>
        <div > <img src="../Slick/F1.jpg" alt="bkj"></div>
    </div>
</div>

</body>

</html>

Ответ 1

потому что стрелка по умолчанию белая, поэтому на белой странице вы ее не видите.

убедитесь, что стрелки включены:

 $('.single-item').slick({
arrows: true
    });

добавьте код css, чтобы увидеть:

<style>
.slick-prev:before, .slick-next:before { 
    color:red !important;
}
</style>

Ответ 2

Для меня это сработало после добавления гладкой карусели внутри обертки <div class="content"> ... </div>, которая немного меньше, чтобы иметь место для кнопки prev/next вне оболочки.

Следующее CSS работает для меня:

.content {
    margin: auto;
    padding: 20px;
    width: 80%;
}

Я также использовал normalize.css для правильного центрирования кнопок prev/next. Недостаток нормализации центрирования не был идеальным.

$('.slickslide').slick({
                dots: true,
                infinite: true,
                speed: 500,
                autoplay: true,
                slidesToShow: 1,
                slidesToScroll: 1});

.slickslide {
    height: 200px;
    background: lightgray;
}
body {
    background-color: lightblue;
}
.content {
    margin: auto;
    padding: 20px;
    width: 80%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.0/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.0/slick.css" rel="stylesheet"/>
<div class="content">
        <div class="slickslide" slick="">
            <div>Syling of left and right arrow is OK now. Required normalize.css and a content wrap around the slickslide with a smaller width.</div>
            <div>your content2</div>
            <div>your content3</div>
        </div>
    </div>

Ответ 3

У меня та же проблема, и я узнал, что это просто из div .single-item, и это мое решение

<style>
.slick-prev {
    margin-left: 40px;
  }

  .slick-next {
    margin-right: 40px;
  }
</style>

он просто работает для меня

Ответ 4

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

Вы можете попробовать с этими параметрами проверить правильность воспроизведения карусели.

$(document).ready(function(){
    $('.single-item').slick({
        autoplay:true,
        autoplaySpeed: 1000
    });
});

И тогда вы должны просто добавить некоторые правила css, чтобы увидеть стрелки, например:

<style>
    body{
        background: green;
    }

    .single-item{
        margin-left: 10%;
        margin-right: 10%;
    }
</style>

Ответ 5

Обязательно добавьте следующий css в свой стиль, это по умолчанию из демонстрационного файла в файле slick/index.html.

<style type="text/css">
html, body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.slider {
    width: 50%;
    margin: 100px auto;
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
    color: black;
}
</style>

Ответ 6

Это может произойти, если вы используете предоставленный пример кода, который включает только три раздела контента. Как только я добавил еще два div div, стрелки, точки и автовоспроизведение были инициализированы.

Ответ 7

Таким образом, ни один из ответов выше ничего не делает, и большинство из них нечестны. Я проверил мой DOM, и кнопки для одной из моих каруселей даже не существуют, поэтому они не отображаются (не потому, что фон белый). У меня есть другая карусель с теми же настройками, и стрелки показывают хорошо. Все еще пытаюсь исследовать это и будет обновляться, если найду решение.

Решение. Кажется, что для моей проблемы вам нужно, чтобы контейнер div упаковывал div, к которому вы применили slick. В противном случае это не будет работать.