web-dev-qa-db-ja.com

スリックスライダーの次の矢印が表示されない

Slick Sliderの例のように、製品スライダーの横に次と前の矢印を表示しようとしています。しかし、私のサンプルはそれを実現するために適切なフォントをロードしていないようです。

ここに私のコードがあります：

HTML

  <div class="slider">
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/8013LN_Cat.jpg" height="100" width="100">
      </div>
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/HiddenTailor.9074B.jpg" height="100" width="100">
      </div>
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/1600ETY.JPG" height="100" width="100">
      </div>
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/VIPERPRO81.jpg" height="100" width="100">
      </div>
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/garment_bag.jpg" height="100" width="100">
      </div>
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/1077.jpg" height="100" width="100">
      </div>
    </div>

CSS

  body{
    background-color: #fff;
  }
  .slider{
    margin: 60px auto;
    width: 500px;
  }
  div{
    height: 100%;
  }
  p{
    text-align: center;
    font-size: 12px;
    color: white;
  }

JavaScript

$(document).ready(function(){
        $('.slider').slick({
            centerMode: true,
            centerPadding: '60px',
            dots: false,
            infinite: true,
            speed: 300,
            slidesToShow: 4,
            slidesToScroll: 1,
            arrows: true
        });
      });

デモ： http://jsfiddle.net/schwany23/j39j568c/

jqueryhtmlcssslider
11
Schwan Park

フィドルでは、slick-theme.cssファイルを外部リソースとして追加するのを忘れていました。作成者のデフォルトのスタイルに従う場合は、そのファイルが必要です。または、独自のスタイリングが必要な場合は、先に進んで独自のスタイリングを作成し、独自のテーマ.cssファイルなどを作成してください。

<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"/>

可視性のためのこのCSS、

.slick-prev:before, .slick-next:before{
    color:red;
}

更新されたjsFiddleはここにあります 。

コードスニペットはこちら...

$(document).ready(function() {
  $('.slider').slick({
    centerMode: true,
    centerPadding: '60px',
    dots: true,
    /* Just changed this to get the bottom dots navigation */
    infinite: true,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 1,
    arrows: true
  });
});
body {
        background-color: #fff;
      }
      .slider {
        margin: 60px auto;
        width: 500px;
      }
      div {
        height: 100%;
      }
      p {
        text-align: center;
        font-size: 12px;
        color: white;
      }
      /* added the following to give the background color of the arrows as red for visibility, the default which can be found in the slick-theme.css was white */
      .slick-prev:before,
      .slick-next:before {
        color: red;
      }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<link href="http://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<link href="http://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>

<div class="slider">
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/8013LN_Cat.jpg" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/HiddenTailor.9074B.jpg" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/1600ETY.JPG" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/VIPERPRO81.jpg" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/garment_bag.jpg" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/1077.jpg" height="100" width="100" />
  </div>
</div>

お役に立てれば

22
Sai

Slick-theme.cssを含めてもまだ問題がある場合は、テーマがサブフォルダー（/theme/slick-theme.cssなど）にあることを想定しているが、デフォルトのダウンロードではslick-theme.cssが同じフォルダーに配置されるためです。 ajax-loader.gifとしてのフォルダーと、両方のテーマから参照されるfontsフォルダー。

解決策：slick-theme.cssファイルをサブフォルダーに入れるか、cssを編集して、親フォルダーを検索しようとしないようにします。 Sai で提案されているように、矢印の色を変更する必要があるかもしれません

1
Keypad