Last active
March 21, 2019 08:32
-
-
Save yutaide/7e69621f56f5c255bd4bd09da52bfdc9 to your computer and use it in GitHub Desktop.
slickを使った写真スライダーの実装(html)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="UTF-8"> <!-- charsetをUTF-8にしないとスライダーの両端にある矢印が文字化けor出ません --> | |
| <link rel="stylesheet" href="./testcss.css"> | |
| <link rel="stylesheet" type="text/css" href="./slick-1.8.1/slick/slick.css"/> | |
| <link rel="stylesheet" type="text/css" href="./slick-1.8.1/slick/slick-theme.css"/> | |
| </head> | |
| <body> | |
| <div class="your-class"> <!-- 自分の環境に合わせて画像ファイルのパスを書き換えてください --> | |
| <div><img src="./images/paris.jpg"></div> | |
| <div><img src="./images/tokyo.jpg"></div> | |
| <div><img src="./images/london.jpg"></div> | |
| <div><img src="./images/la.jpg"></div> | |
| <div><img src="./images/baru.jpg"></div> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- JQueryの読み込み / これはslickに限らずJQueryを利用したものには必ず必要です --> | |
| <script type="text/javascript" src="./slick-1.8.1/slick/slick.min.js"></script> <!-- slickのjavascriptファイル --> | |
| <!-- スライダーの初期化設定はJQueryやslickのjavascriptファイルの読み込み以降に書かないとスライダーが機能しません --> | |
| <script> | |
| $(document).ready(function(){ | |
| $('.your-class').slick({ | |
| slidesToShow: 3, | |
| slidesToScroll: 1, | |
| autoplay: true, | |
| autoplaySpeed: 2000, | |
| dots: true, | |
| arrows: true, | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment