Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

カルーセル Slick.js 基本の設置方法

サイト内にSlick.js を使用した、レスポンシブ対応のスライダーを設置する方法をご紹介します。サンプルは、Slick に掲載されています。

私の場合は、WordpressでBootstrapを使用したテーマに設置しました。ちなみに、Bootstrapのデフォルトのcarouselについては、[Bootstrap]Carouselのカスタマイズ で紹介しています。良かったらご参照下さい。今回はそのcarousel を使わずに、Slick を設置します。

INDEX

完成のイメージ

左右の矢印で次の画像へ。画像の下の3つの丸いアイコンで次の画像へ移動できる様にしました。

slick

CSSをリンクする

<hear>内にリンクします。

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

.jsをリンクする

</body>の前に以下の2つをリンクします。

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

wordpressで使用する場合、上記だけで大丈夫でしたが、必要に応じてjquery-migrate-1.2.1.min.jsが必要です。

<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

jsを書く

<hear>内に下記を追加するか、.jsファイルに<script>、</script>を除いたコードを書くきます。この例は、写真の両端に矢印(デフォルト)が表示される様になっています。

dots画像の下の点印のアイコン
autoplay自動スライド
autoplaySpeed速度(大きな数は遅い)
pauseOnHoverマウスオーバーでスライドが止まる
<script>
$(function() {
  $('.slider-image').slick({
     dots: true, 
     autoplay: true,
     autoplaySpeed: 3000,
     pauseOnHover: true,
  });    
});
</script>

htmiを書く

基本のHTMLです。classはfunctionの記載に合わせて書き換えて下さい。画像のURLも同様です。wordpress仕様で書いています。

<div class="slider-image">
<div><a href="#"><img src="<?php echo site_url(); ?>/wp-content/uploads/2020/04/画像.jpg" alt="sample"></a></div>
<div><a href="#"><img src="<?php echo site_url(); ?>/wp-content/uploads/2020/04/画像.jpg" alt="sample"></a></div>
<div><a href="#"><img src="<?php echo site_url(); ?>/wp-content/uploads/2020/04/画像.jpg" alt="sample"></a></div>
</div>

矢印が表示されない場合

Slick のサンプルでもお分かりの通り、矢印が画像の幅より外側についています。外側に出てしまっていて、見えていないのか、重なり具合で下の方になってしまっているのか何方かだと思います。

CSSを書き足します。数字はお好みで編集して下さい。z-indexは絶対に上には来させないという意気込みで適当に大きな数を書いただけです。

.slick-prev,.slick-next{z-index: 99;}
.slick-prev{left: 50px;}
.slick-next{right: 50px;}

とりあえず、一般的なスライダーが設置出来ました。

応用編

よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる