aタグとimgタグを同時にスライドショーしたいです。

aタグの中にimgタグがありそれを同時にスライドショーにしてそのimgタグの部分をクリックすればそこに飛べるようにしたいです。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta name="keywords" content="ベネヴィータ王慈のホームページ">
6    <meta name="description" content="ベネヴィータ王慈のホームページです。">
7    <link rel="stylesheet" type="text/css" href="ベネヴィータ王慈のホームページ.css">
8    <link rel="next" crossorigin="use-credentials" href="障がい者支援施設 ベネヴィータ王慈.html 地域密着型特別養護老人ホーム ベネヴィータ王慈.html 障がい児通所支援 地域生活支援 エンゼルきっず.html">
9    <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
10    <script src="ベネヴィータ王慈のホームページ.js" type="text/javascript" charset="utf-8"></script>
11    <script src="slick.js" type="text/javascript"></script>
12    <title>ベネウィータ王慈のホームページ</title>
13  </head>
14  <body>
15    <a class="b" href="ベネヴィータ王慈のホームページ.html">ベネヴィータ王慈のホームページ</a>
16    <p/>
17  <div class="single-item">
18    <div class="wa">
19    <a href="障がい者支援施設 ベネヴィータ王慈.html"><img src="ap.jpg" alt="ベネヴィータの写真"></a></div>
20    <div class="wa">
21    <a href="地域密着型特別養護老人ホーム ベネヴィータ王慈.html"><img src="hp/花見0405 (5).JPG" alt=""></a></div>
22    <div class="wa">
23    <a href="障がい児通所支援・地域生活支援 エンゼルきっず.html"><img src="hp/花見0405 (61).JPG" alt=""></a></div>
24    <div class="wa>"
25    <a href="ベネヴィータ王慈へのアクセス.html"><img src="hp/花見0405 (6).JPG"></a></div>
26    <div class="wa">
27    <a href="ベネヴィータ王慈のホームページ (行事).html"><img src="hp/忘年会1228 (277).JPG" alt=""></a></div>
28  </div>
29  <div class="tx">
30    <p><a href="#ne">法人の理念</a>と<a href="#vi">ベネヴィータの意味</a>は？</p>
31    <section class="be">
32      <p id="ne">こころゆたかに すこやかに</p>
33      <p class="be">私たち王慈福祉会の使命は、ご利用者、地域の方々そして働く職員が生活していく上で価値あるものでなければならないと考えています。私たち王慈福祉会は、お一人おひとりの尊厳、ニーズや権利に対する思いを心に刻み、暖かで和やかな空間、心の拠り所を整備し、誰もが幸せになれるよう、笑顔や心のこもった高水準のサービスの提供を心がけています。<br>
34      私たちの高齢者や障がい者、児童のための高品質な支援・サービスが、地域の方から最初に選ばれる存在であり続けたいと常に願っています。<br>
35      ご利用される皆さんの権利の尊重、倫理綱領につきましては、こちらに掲載しております。<br></p>
36      <p id="vi">ベネヴィータの意味とは？</p>
37      <p>よき人生、よき命、よい暮らしという意味です。</p>
38    </section>
39  </div>
40  </body>
41</html>

css
1div.single-item{
2  max-width: 400px;
3  max-height: 400px;
4}
5div.wa{
6  max-width: 300px;
7  max-height: 300px;
8}
9a img{
10  width: 300px;
11  height: 300px;
12  margin: 6px 6px;
13}

javascript
1$(function() {
2 $(".single-item").slick({
3   accessibility:true,
4   autoplay:true,
5   autoplaySpeed:15000,
6   dots:true,
7   fade:true,
8 });
9 });

よろしくお願いします。

kei344

2017/01/23 12:06

何がわからないか、エラーは出ていないのか、出力できているなら結果はどうなっているかなど、具体的に質問文に追記いただいたほうが回答を得られやすいと思います。まずデベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

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

回答1件

ベストアンサー

このように行えると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
7    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
8    <style type="text/css">
9        * {
10            margin: 0;
11            padding: 0;
12        }
13
14        body {
15            background-color: beige;
16        }
17
18        .slide {
19            margin: 0 auto;
20            width: 80%;
21        }
22
23        .slide img {
24            margin: 0 auto;
25        }
26
27        .slick-prev:before, .slick-next:before {
28            color: black;
29        }
30    </style>
31</head>
32<body>
33<div class="slide">
34    <a href="page1.html">
35        <img src="https://placehold.jp/ff70cb/ffffff/200x150.png?text=image1">
36    </a>
37    <a href="page2.html">
38        <img src="https://placehold.jp/9970ff/ffffff/200x150.png?text=image2">
39    </a>
40    <a href="page3.html">
41        <img src="https://placehold.jp/70b3ff/ffffff/200x150.png?text=image3">
42    </a>
43    <a href="page4.html">
44        <img src="https://placehold.jp/70ffea/ffffff/200x150.png?text=image4">
45    </a>
46    <a href="page5.html">
47        <img src="https://placehold.jp/70ff7c/ffffff/200x150.png?text=image5">
48    </a>
49    <a href="page6.html">
50        <img src="https://placehold.jp/f8ff70/ffffff/200x150.png?text=image6">
51    </a>
52</div>
53<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
54<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
55<script>
56    $(document).ready(function () {
57        $('.slide').slick({
58            accessibility: true,
59            arrows: true,
60            autoplay: true,
61            autoplaySpeed: 1500,
62            centerMode: true,
63            dots: true,
64            fade: true,
65            infinite: true,
66            pauseOnDotsHover: false,
67            pauseOnHover: false,
68            speed: 500
69        });
70    });
71</script>
72</body>
73</html>