Slick Carousel 箭頭沒有出現，也沒有正常工作

Question

我正在使用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>

Answer 1

這是因為箭頭默認是白色的，所以在白頁上你看不到它。

確保啟用箭頭：

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

添加css代碼以查看：

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

Answer 2

對我來說，它在包裝器<div class="content"> ... </div>內添加光滑的輪播后起作用了，它有點小，以便在包裝器外為上一個/下一個按鈕提供空間。

以下 CSS 對我有用：

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

我還使用normalize.css來正確地使上一個/下一個按鈕居中。 如果沒有標准化，居中就不是完美的。

 $('.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>

Answer 3

我有同樣的問題，我發現它只是在.single-item divsion 之外，這是我的解決方案

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

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

它只對我有用

Answer 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>

Answer 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>

Answer 6

如果您使用提供的示例代碼，則可能會發生這種情況，其中僅包含三個內容 div。 一旦我添加了另外兩個內容 div，箭頭、點和自動播放就被初始化了。

Answer 7

您必須提供上一個/下一個控件的前景色，並在輪播列表的左側和右側留出空間，以便上一個/下一個控件出現在您的容器內。

這里的CSS：

.slick-prev::before,
.slick-next::before {
    color: rgba(0, 0, 0, 0.2);
    font-size: 2.5rem;
}

.slick-prev,
.slick-next {
    width: 2.5rem;
    height: 2.5rem;
    z-index: 2;
}

.slick-list {
    width: 95%;
    margin: 0 auto;
}

.slick-prev {
    left: 0;
}

.slick-next {
    right: 0;
}

結果如下：

Answer 8

所以上面的答案都沒有做任何事情，而且大多數都是不准確的。 我檢查了我的 DOM，我的一個旋轉木馬的按鈕甚至都不在那里，這就是它們沒有顯示的原因（不是因為背景是白色的）。 我有另一個具有相同設置的輪播，箭頭顯示正常。 仍在嘗試對此進行調查，如果找到解決方案，我將進行更新。

解決方案：似乎對於我的問題，您需要有一個容器 div 來包裝您應用 slick 的 div。 否則，它不會工作。

Answer 9

解決我的問題是他們沒有正確的 z-index

.slick-prev, .slick-next {
  z-index: 1000;
}

解決了這個問題

Answer 10

如果它出現但未禁用，這對我有用

.slick-prev {
  z-index: 1;
}

Slick Carousel 箭頭沒有出現，也沒有正常工作

問題描述

10 個解決方案

解決方案1
73 2014-07-24 12:02:54

解決方案2
17 2015-04-07 21:59:47

解決方案3
13 2014-10-07 09:38:03

解決方案4
3 2014-04-28 12:35:18

解決方案5
3 2016-10-22 04:45:19

解決方案6
2 2017-01-03 19:55:30

解決方案7
2 2020-04-17 16:14:05

解決方案8
1 2017-10-03 16:11:20

解決方案9
1 2019-04-23 10:32:38

解決方案10
0 2022-04-07 18:03:26

Slick Carousel 箭頭沒有出現，也沒有正常工作

問題描述

10 個解決方案

解決方案1 73 2014-07-24 12:02:54

解決方案2 17 2015-04-07 21:59:47

解決方案3 13 2014-10-07 09:38:03

解決方案4 3 2014-04-28 12:35:18

解決方案5 3 2016-10-22 04:45:19

解決方案6 2 2017-01-03 19:55:30

解決方案7 2 2020-04-17 16:14:05

解決方案8 1 2017-10-03 16:11:20

解決方案9 1 2019-04-23 10:32:38

解決方案10 0 2022-04-07 18:03:26

解決方案1
73 2014-07-24 12:02:54

解決方案2
17 2015-04-07 21:59:47

解決方案3
13 2014-10-07 09:38:03

解決方案4
3 2014-04-28 12:35:18

解決方案5
3 2016-10-22 04:45:19

解決方案6
2 2017-01-03 19:55:30

解決方案7
2 2020-04-17 16:14:05

解決方案8
1 2017-10-03 16:11:20

解決方案9
1 2019-04-23 10:32:38

解決方案10
0 2022-04-07 18:03:26