web-dev-qa-db-ja.com

スリックカルーセルの矢印が表示されず、本来の動作が必要になる

私は http://kenwheeler.github.io/slick/ を使用していますが、正常に機能していないようです。以下のコードを実行すると、CSSファイルとjsファイルが読み込まれているが、反映されていないことがわかります。たとえば、矢印はありません。

私が間違っているかもしれないものがありますか（注：滑らかな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>
javascriptcarousel
41
BusyBee

これは、矢印がデフォルトで白であるためです。そのため、白のページでは表示できません。

矢印が有効になっていることを確認してください：

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

cssコードを追加して表示します：

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

私にとっては、ラッパー<div class="content"> ... </div>の内側に滑らかなカルーセルを追加すると機能しました。これは、ラッパーの外側にprev/nextボタン用のスペースを確保するために少し小さくなっています。

次の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>
14
AWolf

私は同じ問題を抱えており、.single-item divsion、これが私の解決策

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

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

それはちょうど私のために働く

12
Eugene Wang

私はあなたのコードを試してみましたが、すべて問題ないようです。問題はページレイアウトに対処する必要があります。

これらのオプションを試して、カルーセルが正しく再生されているかどうかを確認できます

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

そして、たとえば次のように、矢印を表示するためにcssルールを追加する必要があります。

<style>
    body{
        background: green;
    }

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

次の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>
2
R.Cha

これは、3つのコンテンツdivのみを含む提供されたサンプルコードを使用する場合に発生する可能性があります。さらに2つのコンテンツdivを追加すると、矢印、ドット、および自動再生が初期化されました。

1
devdrc

したがって、上記の答えはどれも何もせず、ほとんどは無実です。 DOMを検査しましたが、カルーセルの1つのボタンがそこにもありません。そのため、ボタンが表示されません（背景が白いためではありません）。同じ設定の別のカルーセルがあり、矢印が正常に表示されます。まだこれを調査しようとしており、解決策が見つかったら更新します。

解決策：私の問題では、スリックを適用するdivをラップするコンテナーdivが必要なようです。そうでなければ、動作しません。

0
Siraris

私の問題を解決したのは、適切なz-indexがなかったことです

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

問題を解決しました

0
Dulara Malindu