1. ホーム
  2. ホームページの作り方
  3. Java Script / jQuery
  4. 使い勝手の良い万能スライダー！slickのサンプル・カスタマイズをご紹介
  • 最終更新日
  • Java Script / jQuery

使い勝手の良い万能スライダー！slickのサンプル・カスタマイズをご紹介

ホームページを作っていくと「もっと動きが欲しいなぁ～」とか「画像をいっぱい見せたいなぁ～」とかって事があります。

そんな時にトップページのファーストビュー（ページを開いてすぐ目に留まる箇所）や画像紹介部分にスライダーを使うとハマります！スライダーというのは画像が次々と切り替わっていくアレですね。

今回は使い勝手の良いスライダー「slick（スリック）」を紹介します。簡単にカスタマイズする事ができますので、あなたの好みの動きに設定する事もできるはずです！

目次 [閉じる]

slickの導入方法

まずはファイルをダウンロードする必要があるので「slick」のサイトへ飛んでファイルをダウンロードしちゃいましょう。

slickのダウンロード

slickのサイトへ行くと英語です（笑）。まぁ、こういうjQueryのプラグインなどは海外の人が開発したものが多いので英語は仕方ないですね。

僕は英語がまったくわからないので、意味を調べるときはGoogle翻訳を使ったり、最近はブラウザが翻訳した日本語で表記してくれるので、それで何となくの意味を掴みます（笑）。

①の「grt it now」をクリックするとダウンロードボタンまで飛ぶので、次に②の「Download Now」を感謝の気持ちと共にクリックしましょう。

ダウンロードしたフォルダを解凍するとファイルが沢山入っています。

  • slick.css
  • slick.min.js
  • slick-theme.css
  • fontsフォルダ一式
  • ajax-loader.gif

上記の5点をコピペして作業環境へ配置しましょう。slick.min.jsはjsフォルダを作ってその中へ、その他の4点はまとめてcssフォルダを作ってその中へ放り込んでください。

index.html

            
    
                
  1. <!DOCTYPE html>
    2. 
                
  2. <html>
    3. 
                
  3. <head>
    4. 
                
  4. <meta charset="UTF-8">
    5. 
                
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
    6. 
                
  6. <title>slickをカスタマイズしてみよう</title>
    7. 
                
  7. <link type="text/css" rel="stylesheet" href="css/slick.css">
    8. 
                
  8. <link type="text/css" rel="stylesheet" href="css/slick-theme.css">
    9. 
                
  9. <style>
    10. 
                
  10. * {
    11. 
                
  11.   margin: 0;
    12. 
                
  12.   padding: 0;
    13. 
                
  13.   box-sizing: border-box
    14. 
                
  14. }
    15. 
                
  15.  
    16. 
                
  16. .sliderWrap {
    17. 
                
  17.   width: 100%;
    18. 
                
  18.   max-width: 640px;
    19. 
                
  19.   margin: 40px auto 0
    20. 
                
  20. }
    21. 
                
  21.  
    22. 
                
  22. .sliderWrap img {
    23. 
                
  23.   width: 100%
    24. 
                
  24. }
    25. 
                
  25.  
    26. 
                
  26. .slick-prev::before,
    27. 
                
  27. .slick-next::before {
    28. 
                
  28.   color: #21c69c
    29. 
                
  29. }
    30. 
                
  30. </style>
    31. 
                
  31. </head>
    32. 
                
  32. <body>
    33. 
                
  33.   <div class="sliderWrap">
    34. 
                
  34.     <ul class="slider">
    35. 
                
  35.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider01.jpg"></li>
    36. 
                
  36.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider02.jpg"></li>
    37. 
                
  37.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider03.jpg"></li>
    38. 
                
  38.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider04.jpg"></li>
    39. 
                
  39.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider05.jpg"></li>
    40. 
                
  40.     </ul>
    41. 
                
  41.   </div>
    42. 
                
  42. <script type="text/javascript" src="js/jquery.min.js"></script>
    43. 
                
  43. <script type="text/javascript" src="js/slick.min.js"></script>
    44. 
                
  44. <script type="text/javascript">
    45. 
                
  45. (function($) {
    46. 
                
  46.   $(document).ready(function(){
    47. 
                
  47.     $(".slider").slick();
    48. 
                
  48.   });
    49. 
                
  49. })(jQuery)
    50. 
                
  50. </script>
    51. 
                
  51. </body>
    52. 
                
  52. </html>
    53.

それではこちらのindex.htmlもコピペしましょう。そして「jQueryを使うために必要な「jquery.min.js」ファイルをダウンロードしよう」を参考にjQueryファイルをダウンロードしてJSフォルダに入れておきます。

jQueryファイルのバージョンに合わせてhtmlの記述も変更してください。※例）「jquery.min.js」→「jquery-3.5.1.min.js」など。

こちらも見てください

ここまで出来たら動作を見てみましょう。これが何の設定もしていないデフォルト状態のslickです。画像の左右についている矢印をクリックすると画像が切り替わります。※矢印はデフォルトで白色なのでわかりやすくcssで緑にしています。

See the Pen slickをカスタマイズしよう① by 竹馬 (@takeuma) on CodePen.

slickをカスタマイズするオプション一覧

ひとまずslickを設置できましたので今度は自由にカスタマイズできる項目を見ていきましょう。この辺のわかりやすい操作がこのslickの魅力的な部分じゃないでしょうか！

arrows
左右に矢印を設定します。値は「true」もしくは「false」です。
dots
スライダーの下にドットのページ送りを設定します。値は「true」もしくは「false」です。
slidesToShow
同時に表示する画像の数を設定します。値は数値です。
slidesToScroll
一度にスライドする画像の数を設定します。値は数値です。
adaptiveHeight
スライダーの高さを可変か固定に設定します。値は「true」もしくは「false」です。
centerMode
スライダーの表示を中央寄せに設定します。値は「true」もしくは「false」です。
centerPadding
centerMode時の左右の見切れの余白を設定します。値は「px」もしくは「%」の数値です。
infinite
無限の繰り返しを設定します。値は「true」もしくは「false」です。
fade
スライドの方法をフェードに設定します。値は「true」もしくは「false」です。
cssEase
スライドの切り替え時のアニメーションを設定します。値は「ease」「linear」「ease-in」「ease-out」「ease-in-out」です。
speed
スライドの切り替え時間を設定します。値は数値です。
autoplay
自動再生を設定します。値は「true」もしくは「false」です。
autoplaySpeed
自動再生時の切り替え時間を設定します。値は数値です。
pauseOnHover
自動再生時にスライダーにマウスオーバーするとスライドを停止するように設定します。値は「true」もしくは「false」です。
pauseOnDotsHover
自動再生時にページ送りのドットにマウスオーバーするとスライドを停止するように設定します。値は「true」もしくは「false」です。
pauseOnFocus
自動再生時にフォーカスしているとスライドを停止するように設定します。値は「true」もしくは「false」です。
vertical
縦方向へのスライドを設定します。値は「true」もしくは「false」です。
accessibility
キーボードの左右キーで切り替えができるように設定します。値は「true」もしくは「false」です。
draggable
ドラッグができるように設定します。値は「true」もしくは「false」です。
swipe
スワイプができるように設定します。値は「true」もしくは「false」です。
verticalSwiping
縦方向へスワイプができるように設定します。値は「true」もしくは「false」です。
responsive
レスポンシブを設定します。

レスポンシブを設定すると表示画面の大きさによって各設定を変更する事が可能になります。

responsive.js

            
    
                
  1. (function($) {
    2. 
                
  2.   $(document).ready(function(){
    3. 
                
  3.     $(".slider").slick({
    4. 
                
  4.       slidesToShow: 2,
    5. 
                
  5.       slidesToScroll: 2,
    6. 
                
  6.       responsive: [{
    7. 
                
  7.       breakpoint: 768,
    8. 
                
  8.       settings: {
    9. 
                
  9.         slidesToShow: 1,
    10. 
                
  10.         slidesToScroll: 1,
    11. 
                
  11.       }
    12. 
                
  12.     }]
    13. 
                
  13.   });
    14. 
                
  14. })(jQuery)
    15.

上記の設定にすると通常は画像が2枚表示、スクロールも2枚ずつなんですが、「breakpoint」で指定した768px以下の表示画面（スマホ表示など）になると表示画像とスクロールも1枚ずつになります。

slickを使って実装できる動きを確認しよう

それではslickのカスタマイズをちょっとだけですが3点ご紹介します。cssなどで装飾を付けてやると色々とできる事も広がりますので参考にしてください。

sample01.html

            
    
                
  1. <!DOCTYPE html>
    2. 
                
  2. <html>
    3. 
                
  3. <head>
    4. 
                
  4. <meta charset="UTF-8">
    5. 
                
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
    6. 
                
  6. <title>slickのサンプル01</title>
    7. 
                
  7. <link type="text/css" rel="stylesheet" href="css/slick.css">
    8. 
                
  8. <link type="text/css" rel="stylesheet" href="css/slick-theme.css">
    9. 
                
  9. <style>
    10. 
                
  10. * {
    11. 
                
  11.   margin: 0;
    12. 
                
  12.   padding: 0;
    13. 
                
  13.   box-sizing: border-box
    14. 
                
  14. }
    15. 
                
  15.  
    16. 
                
  16. .sliderWrap {
    17. 
                
  17.   width: 100%;
    18. 
                
  18.   max-width: 640px;
    19. 
                
  19.   margin: 40px auto 0
    20. 
                
  20. }
    21. 
                
  21.  
    22. 
                
  22. .sliderWrap img {
    23. 
                
  23.   width: 100%
    24. 
                
  24. }
    25. 
                
  25.  
    26. 
                
  26. .slick-dots li button::before {
    27. 
                
  27.   font-size: 28px;
    28. 
                
  28.   line-height: 32px
    29. 
                
  29. }
    30. 
                
  30. </style>
    31. 
                
  31. </head>
    32. 
                
  32. <body>
    33. 
                
  33.   <div class="sliderWrap">
    34. 
                
  34.     <ul class="slider">
    35. 
                
  35.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider01.jpg"></li>
    36. 
                
  36.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider02.jpg"></li>
    37. 
                
  37.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider03.jpg"></li>
    38. 
                
  38.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider04.jpg"></li>
    39. 
                
  39.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider05.jpg"></li>
    40. 
                
  40.     </ul>
    41. 
                
  41.   </div>
    42. 
                
  42. <script type="text/javascript" src="js/jquery.min.js"></script>
    43. 
                
  43. <script type="text/javascript" src="js/slick.min.js"></script>
    44. 
                
  44. <script type="text/javascript">
    45. 
                
  45. (function($) {
    46. 
                
  46.   $(document).ready(function(){
    47. 
                
  47.     $(".slider").slick({
    48. 
                
  48.       arrows: false,
    49. 
                
  49.       dots: true,
    50. 
                
  50.       fade: true,
    51. 
                
  51.       speed: 2000,
    52. 
                
  52.       autoplaySpeed: 2500,
    53. 
                
  53.       autoplay: true,
    54. 
                
  54.       infinite: true,
    55. 
                
  55.       pauseOnHover: false
    56. 
                
  56.   });
    57. 
                
  57. })(jQuery)
    58. 
                
  58. </script>
    59. 
                
  59. </body>
    60. 
                
  60. </html>
    61.

1つ目はスライド方法をフェードにして、左右の矢印は無しのドットのページ送りを配置。さらに自動再生を永遠に繰り返し、スライダーにホバーしてもスライドを続けるという設定をおこなっています。

あとはデフォルトのドットは小さな「・」で表示されるのでcssで大きく表示しています。

See the Pen slickのサンプル01 by 竹馬 (@takeuma) on CodePen.

sample02.html

            
    
                
  1. <!DOCTYPE html>
    2. 
                
  2. <html>
    3. 
                
  3. <head>
    4. 
                
  4. <meta charset="UTF-8">
    5. 
                
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
    6. 
                
  6. <title>slickのサンプル02</title>
    7. 
                
  7. <link type="text/css" rel="stylesheet" href="css/slick.css">
    8. 
                
  8. <link type="text/css" rel="stylesheet" href="css/slick-theme.css">
    9. 
                
  9. <style>
    10. 
                
  10. * {
    11. 
                
  11.   margin: 0;
    12. 
                
  12.   padding: 0;
    13. 
                
  13.   box-sizing: border-box
    14. 
                
  14. }
    15. 
                
  15.  
    16. 
                
  16. .sliderWrap {
    17. 
                
  17.   width: 100%;
    18. 
                
  18.   max-width: 640px;
    19. 
                
  19.   margin: 40px auto 0
    20. 
                
  20. }
    21. 
                
  21.  
    22. 
                
  22. .sliderWrap img {
    23. 
                
  23.   width: 100%
    24. 
                
  24. }
    25. 
                
  25. </style>
    26. 
                
  26. </head>
    27. 
                
  27. <body>
    28. 
                
  28.   <div class="sliderWrap">
    29. 
                
  29.     <ul class="slider">
    30. 
                
  30.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider01.jpg"></li>
    31. 
                
  31.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider02.jpg"></li>
    32. 
                
  32.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider03.jpg"></li>
    33. 
                
  33.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider04.jpg"></li>
    34. 
                
  34.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider05.jpg"></li>
    35. 
                
  35.     </ul>
    36. 
                
  36.   </div>
    37. 
                
  37. <script type="text/javascript" src="js/jquery.min.js"></script>
    38. 
                
  38. <script type="text/javascript" src="js/slick.min.js"></script>
    39. 
                
  39. <script type="text/javascript">
    40. 
                
  40. (function($) {
    41. 
                
  41.   $(document).ready(function(){
    42. 
                
  42.     $(".slider").slick({
    43. 
                
  43.       arrows: false,
    44. 
                
  44.       speed: 2000,
    45. 
                
  45.       autoplay: true,
    46. 
                
  46.       autoplaySpeed: 2500,
    47. 
                
  47.       vertical: true,
    48. 
                
  48.       infinite: true
    49. 
                
  49.   });
    50. 
                
  50. })(jQuery)
    51. 
                
  51. </script>
    52. 
                
  52. </body>
    53. 
                
  53. </html>
    54.

2つ目は縦方法にスライドして、左右の矢印は無しの自動再生を永遠に繰り返すという設定をおこなっています。

See the Pen slickのサンプル02 by 竹馬 (@takeuma) on CodePen.

sample03.html

            
    
                
  1. <!DOCTYPE html>
    2. 
                
  2. <html>
    3. 
                
  3. <head>
    4. 
                
  4. <meta charset="UTF-8">
    5. 
                
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
    6. 
                
  6. <title>slickのサンプル03</title>
    7. 
                
  7. <link type="text/css" rel="stylesheet" href="css/slick.css">
    8. 
                
  8. <link type="text/css" rel="stylesheet" href="css/slick-theme.css">
    9. 
                
  9. <style>
    10. 
                
  10. * {
    11. 
                
  11.   margin: 0;
    12. 
                
  12.   padding: 0;
    13. 
                
  13.   box-sizing: border-box
    14. 
                
  14. }
    15. 
                
  15.  
    16. 
                
  16. .sliderWrap {
    17. 
                
  17.   width: 100%;
    18. 
                
  18.   max-width: 640px;
    19. 
                
  19.   margin: 40px auto 0
    20. 
                
  20. }
    21. 
                
  21.  
    22. 
                
  22. .sliderWrap img {
    23. 
                
  23.   width: 100%
    24. 
                
  24. }
    25. 
                
  25.  
    26. 
                
  26. .slick-dots li button::before {
    27. 
                
  27.   font-size: 28px;
    28. 
                
  28.   line-height: 32px
    29. 
                
  29. }
    30. 
                
  30. </style>
    31. 
                
  31. </head>
    32. 
                
  32. <body>
    33. 
                
  33.   <div class="sliderWrap">
    34. 
                
  34.     <ul class="slider">
    35. 
                
  35.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider01.jpg"></li>
    36. 
                
  36.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider02.jpg"></li>
    37. 
                
  37.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider03.jpg"></li>
    38. 
                
  38.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider04.jpg"></li>
    39. 
                
  39.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider05.jpg"></li>
    40. 
                
  40.     </ul>
    41. 
                
  41.   </div>
    42. 
                
  42. <script type="text/javascript" src="js/jquery.min.js"></script>
    43. 
                
  43. <script type="text/javascript" src="js/slick.min.js"></script>
    44. 
                
  44. <script type="text/javascript">
    45. 
                
  45. (function($) {
    46. 
                
  46.   $(document).ready(function(){
    47. 
                
  47.     $(".slider").slick({
    48. 
                
  48.       arrows: false,
    49. 
                
  49.       dots: true,
    50. 
                
  50.       slidesToShow: 1,
    51. 
                
  51.       centerMode: true,
    52. 
                
  52.       centerPadding: '40px',
    53. 
                
  53.       speed: 2000,
    54. 
                
  54.       swipe: true
    55. 
                
  55.   });
    56. 
                
  56. })(jQuery)
    57. 
                
  57. </script>
    58. 
                
  58. </body>
    59. 
                
  59. </html>
    60.

最後の3つ目はセンターモードを使用しています。これを使うと前後の画像を左右にちょっとだけ見せる事ができます。スライダーである事と画像がいくつもあるよ～というのが視覚的にもわかるかと思います。

こちらは自動再生はせずにページ送りのドットをクリックする事によって前後の画像に切り替わるという設定をおこなっています。

See the Pen slickのサンプル03 by 竹馬 (@takeuma) on CodePen.

いかがでしたでしょうか？

初心者の方には難しいと感じるトコロかも知れませんが、このスライダープラグインはカスタマイズもわかりやすくて使い勝手が良いです！まぁ、スライダーはなくてもホームページは作れます（笑）。

スライダーに挑戦するならまずはslickを試してみると良いかと思いますので、ぜひ頑張ってみてください！

Java Script / jQuery jQueryを使うために必要な「jquery.min.js」ファイルをダウンロードしよう

よく読まれている記事

おすすめの記事

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ！Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。

チェピレア日記