超初級。スライド画像を実装するプラグイン【Slick Slider】まずはコピペで動かしてみよう。 | ホームページ制作高品質で早くて月額

2023.1.21

超初級。スライド画像を実装するプラグイン【Slick Slider】まずはコピペで動かしてみよう。

jQuery
Listen & Subscribe
- MAIL MAGAZINE
WEBサイトでいろんな部分で表示されてる画像がスライドしてるやつです。

イメージ的に、初心者がまずは通るjQueryの王道プラグインといった感じでしょうか？

上記のレイアウト以外でも、いろんなパターンがあります。

そんなSlick Sliderについて簡単に解説していきます。

完成DEMOコード

取り急ぎ、下記コピーでOKです。
```
<!DOCTYPE html> 
<html> 
　<head> 
　　<title>SLICK SLIDER</title> 
　　<meta charset="utf-8"> 
　　<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
　　<meta name="viewport" content="width=device-width, initial-scale=1"> 
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css"/> 
　　<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css"/> 
　</head>
　<body> 　　
　　<ul id="slider">
     <li><img src="img/slide01.jpg" alt=""></li>
     <li><img src="img/slide02.jpg" alt=""></li>
     <li><img src="img/slide03.jpg" alt=""></li>
     <li><img src="img/slide04.jpg" alt=""></li>
   </ul>
　</body> 
　<script src="https://code.jquery.com/jquery-3.6.3.js"></script> 
　<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 
  <script type="text/javascript"> 
   'use strict'; 
   jQuery(function($){ 
     $(function () { 
       $('#slider').slick(); 
     }); 
   }); 
 </script>
```
これで動きます。

その他オプションに関しては公式ページを参考にされるといいかと思います。

kenwheeler.github.io

2 Posts

19 Users

6128 Pockets
slick - the last carousel you'll ever need
https://kenwheeler.github.io/slick/
slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

また、下記参考ページも色々なパターンで実装されてるコードを載せており大変参考になります。

株式会社アンドエイチエー｜AndHA inc.

9 Users

8 Pockets
【jQuery】slickの使い方とよく使うサンプル集 | 仙台を代表するホームページ制作...
https://and-ha.com/coding/slick/

実装の依頼はこちらから