jQuery:プラグイン:Slick
slickの使い方:完成版にリンク
レスポンシブに強いカルーセルスライダーslickの使い方|Gimmick log:参考サイト
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>slickの使い方</title> <link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/slick-theme.css"> <script src="js/jquery-2.2.1.min.js"></script> <script src="js/slick.min.js"></script> <script> $(function(){ $('.sample').slick({ autoplay:true, autoplaySpeed:2000, dots:true, pauseOnHover:true }); }); </script> <script> $(function(){ $('.single-item').slick(); }); </script> </head> <body> <ul class="sample"> <li><img src="img/01.png"></li> <li><img src="img/02.png"></li> <li><img src="img/03.png"></li> </ul> </body> </html>