jQueryのslickスライダーで、矢印を押したら画像が切り替わるようにしたいです。

どうすればいいでしょうか。

ソースコードは以下の通りです。

<!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" type="text/css" href="slick/slick.css" media="screen" /> <link rel="stylesheet" type="text/css" href="slick/slick-theme.css" media="screen" /> <link rel="stylesheet" type="text/css" href="slick2.css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="slick/slick.min.js"></script> </head> <meta charset="utf-8"> <body> <ul id="slider"> <li><img src="images/desk.jpg"></li> <li><img src="images/innovation.jpg"></li> <li><img src="images/star1.gif"></li> <li><img src="images/star2.png"></li> </ul> <script type="text/javascript"> ;(function($) { $(function() { $('#slider').slick(); }); })(jQuery); </script> <script> $('#slider').slick({ autoplay: false, // 自動で切り替える autoplaySpeed: 2000, // 待機する時間 arrows: true, // 次へ・戻るボタンを非表示 dots: true // 点のペジャーナビゲーション }); </script> </body> </html>

行動規範の内容に同意します

回答1件

ベストアンサー

的外れかもしれませんが、以下のように行ってみてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
6    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">
7    <style type="text/css">
8        * {
9            margin: 0;
10            padding: 0;
11        }
12
13        body {
14            width: 100%;
15            background-color: #000000;
16        }
17
18        ul {
19            margin: 0 auto;
20            width: 700px;
21        }
22
23        ul img {
24            width: 100%;
25        }
26    </style>
27</head>
28<body>
29<ul class="slider">
30    <li>
31        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=images/desk.jpg">
32    </li>
33    <li>
34        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=images/innovation.jpg">
35    </li>
36    <li>
37        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=images/star1.gif">
38    </li>
39    <li>
40        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=images/star2.png">
41    </li>
42</ul>
43<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
44<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>
45<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
46<script>
47    $(function () {
48        $(".slider").slick();
49    });
50</script>
51</body>
52</html>