swiperをダウンロードしたが、スライドが実装できない

先日、swiperのデモをダウンロードして自分が作成しているサイトに反映させようと思ったのですが、スライドについているボタンを押しても次の要素が表示されません。
htmlには、swiper.min.cssとswiper.js・swiper.min.jsをリンクさせています。
原因がわからないので、ご教授願いたいです...。
特にエラーは出ていません。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>Headphones - Beautiful Design, Great Great Sound|B&amp;O</title>
8    <meta name="description" content="ヘッドフォン,BANG & OLUFSEN">
9    <meta property="og:site_name" content="Headphones - Beautiful Design, Great Great Sound|B&amp;O">
10    <meta property="og:title" content="日常に彩を">
11    <meta property="og:type" content="website">
12    <meta property="og:url" content="http://test007.members-dev.com/http://localhost:3000/">
13    <meta property="og:image" content="http://test007.members-dev.com/[サイトのOGP画像※1]">
14    <meta property="og:description" content="音質にこだわりを持つお金もちの女性(30代～40代)に対して「日常に彩を」というコンセプトをもとにヘッドフォンを紹介します。">
15    <meta name="twitter:card" content="summary">
16    <link rel="shortcut icon" href="/path/favicon.ico">
17    <meta name="viewport" content="width=device-width, initial-scale=1">
18    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">
19    <script type="text/javascript"src="./assets/js/fadein.js"></script>
20    <script src="./assets/js/swiper.min.js"></script>
21    <script src="./assets/js/swiper.js"></script>
22    <link rel="stylesheet" href="./assets/css/style.css">
23    <link rel="stylesheet" href="./assets/css/swiper.min.css">
24</head>
25<body>
26        <script>
27        var swiper;
28    swiper = new Swiper('.swiper-container', {
29        pagination: '.swiper-pagination',
30        paginationClickable: true,
31        direction: 'vertical',
32        touchAngle: 90,
33    });
34         </script>
35            <!-- ヘッダー -->
36            <header class="l-header">
37               <div class="l-header__topimage">
38                 <div class="l-header__all">
39              <nav class="l-header__nav">
40                 <div class="l-header__logo">
41                   <a href="#top"><img src="assets/images/logo.png"></a>
42                 </div>
43                  <ul class="l-header__list">
44                    <li class="l-header__item"><a class="item__child" href="#top">Top</a></li>
45                    <li class="l-header__item"><a class="item__child" href="#feature">Feature</a></li>
46                    <li class="l-header__item"><a class="item__child" href="#gallery">Gallery</a></li>
47                    <li class="l-header__item"><a class="item__child" href="#eventReport">Event&nbsp;Report</a></li>
48                  </ul>      
49              </nav>
50                </div>
51               </div>
52              </header>
53    <!-- ヒーローエリア -->
54      <div class="p-heroArea">
55           <div class="p-heroArea__catchCopy">
56             <h1 class="p-heroArea__title1">BEOPLAY&nbsp;H6</h1>
57             <p class="p-heroArea__sentence1">
58               プレミアムな音で<br>プレミアムな時間を提供する。<br>
59               世界最高の音質のヘッドフォン。
60             </p>
61             <div class="p-heroArea__catchCopy--btn">
62              <a class="online--btn" href="#onlinestor">オンラインストアで購入する</a>
63            </div>
64          </div>
65        </div>
66       </div>
67       <!-- 余白 -->
68       <div class="u-yohaku"></div>
69       <!-- プロダクト -->
70       <!-- Featureエリア -->
71       <div class="p-projectsArea">
72           <div class="p-projectsArea__contents">
73               <div class="p-projectsArea__feature">
74               <h1 class="p-projectsArea__title1">Feature</h1>
75               <div class="u-projectyohaku1"></div>
76               <div class="swiper-container">
77                <div class="swiper-wrapper">
78                        <div class="swiper-slide">
79                                    <img class="icons--btn" src="assets/images/PFM_icon.png" width="70px"heigth="70px">
80                                    <img class="icons--btn" src="assets/images/Material2.png" width="70px" height="70px">
81                                    <img class="icons--btn" src="assets/images/conect2.png" width="70px"height="70px">
82                                 <div class="u-projectyohaku1"></div>
83                                 <div class="allimage1">
84                                         <div class="squareDeepred"></div>
85                                         <div class="squarelightred"></div>
86                                         <div class="youso1">
87                                            <img class="imgfwoman" src="assets/images/F_woman.png">
88                                                 <div class="contents__description1">
89                                                    <h2 class="contents__heading1">Bang&amp;Olufsen Signature&nbsp;Sound</h2>
90                                                     <p class="contents__sentence1">
91                                                        カスタムデザインの40㎜を採用。自然な定位を実現するため、研究の結果から得られた最適な角度でドライバーを取り付けています。
92                                                        また、ハウジングにはベースポートを内蔵し、量感豊かで迫力のある音程を再現。
93                                                        さらに新たなチューニングを施し、広いサウンドステージと本格的でクリーンなサウンドパフォーマンスを実現しました。
94                                                    </p>
95                                                </div>
96                                            </div>
97                                    </div>
98                            </div>
99                            <div class="swiper-slide">
100                                    <img class="icons--btn" src="assets/images/PFM_icon2.png" width="70px" height="70px">
101                                    <img class="icons--btn" src="assets/images/Material.png" width="70px" height="70px">
102                                    <img class="icons--btn" src="assets/images/conect2.png" width="70px" height="70px">
103                                    <p class="contents__sentence1">
104                                            カスタムデザインの40㎜を採用。自然な定位を実現するため、研究の結果から得られた最適な角度でドライバーを取り付けています。
105                                            また、ハウジングにはベースポートを内蔵し、量感豊かで迫力のある音程を再現。
106                                            さらに新たなチューニングを施し、広いサウンドステージと本格的でクリーンなサウンドパフォーマンスを実現しました。
107                                           </p>
108                            </div>
109                    </div>
110                </div>
111                <div class="swiper-pagination"></div>
112                <div class="swiper-button-prev"></div>
113                <div class="swiper-button-next"></div>
114            </div>
115        </div>
116    </div>
117        <div class="u-yohaku"></div>
118</body>
119</html>

css
1body {
2  margin: 0%;
3  padding: 0%;
4  width: 1400px;
5  height: 4670px;
6  font-family: 'Century Gothic' , Book Antiqua, UICentury Gothic, Noto Sans JP Light, Noto Serif JP Light, Yu Gothic;
7  background: white;
8  color: black; }
9  @media (max-width: 750px) {
10    body {
11      background: yellow; } }
12
13.l-lighting {
14  position: relative; }
15
16.l-header {
17  width: 1400px;
18  height: 770px; }
19
20.l-header__topimage {
21  width: 1400px;
22  height: 770px;
23  background-image: url("../images/top.jpg"); }
24
25.l-header__all {
26  margin: 0 auto;
27  padding: 25px 0px;
28  width: 1000px;
29  height: 100px; }
30
31.l-header__logo {
32  position: absolute; }
33
34.l-header__list {
35  text-align: right;
36  font-size: 20pt; }
37
38.l-header__item {
39  display: inline-block;
40  padding: 0px 0px 0px 60px; }
41
42.item__child {
43  text-decoration-line: none;
44  color: black; }
45
46.p-heroArea {
47  width: 500px;
48  height: 536px;
49  left: 200px;
50  top: 160px;
51  position: absolute; }
52
53.p-heroArea__catchCopy {
54  padding: 64px 0px;
55  border-top: 1px solid black;
56  border-bottom: 1px solid black; }
57
58.p-heroArea__title1 {
59  margin: 0%;
60  font-weight: normal;
61  font-size: 48px; }
62
63.p-heroArea__sentence1 {
64  font-size: 20pt; }
65
66.p-heroArea__catchCopy--btn {
67  width: 500px;
68  height: 103px; }
69
70.online--btn {
71  padding: 20px;
72  font-size: 20pt;
73  text-decoration: none;
74  text-align: center;
75  display: block;
76  color: white;
77  background-color: black; }
78
79.u-yohaku {
80  height: 200px; }
81
82.p-projectsArea {
83  width: 1400px;
84  height: 950px;
85  position: relative; }
86
87.p-projectsArea__contents {
88  margin: 0 auto;
89  width: 1000px;
90  height: 950px; }
91
92.p-projectsArea__title1 {
93  margin: 0%;
94  font-size: 40pt;
95  font-weight: normal; }
96
97.u-projectyohaku1 {
98  height: 100px; }
99
100.icons--btn {
101  padding-left: 202px; }
102
103.allimage1 {
104  width: 1000px;
105  height: 950px;
106  position: relative; }
107
108.squareDeepred {
109  margin: 0%;
110  width: 152px;
111  height: 152px;
112  position: absolute;
113  float: left;
114  background: #a17070; }
115
116.squarelightred {
117  width: 500px;
118  height: 300px;
119  margin-top: 55px;
120  margin-left: 50px;
121  float: left;
122  background: #d99898; }
123
124.youso1 {
125  position: absolute; }
126
127.contents__description1 {
128  display: inline-block;
129  width: 500px;
130  vertical-align: bottom; }
131
132.contents__heading1 {
133  font-family: Book Antiqua;
134  font-weight: normal;
135  font-size: 38pt; }
136
137.contents__sentence1 {
138  width: 500px;
139  font-size: 25px; }
140
141.p-projectArea__gallery {
142  margin: 0 auto;
143  width: 1000px;
144  height: 10007px; }
145
146.p-projectsArea__title2 {
147  margin: 0%;
148  font-size: 40pt;
149  font-weight: normal; }
150

スライドさせたい場所は、プロジェクトエリアのFeaTureのところです。
コードが未完成なのと、私の書き方が未熟なので見づらくなっていてすいません...
よろしくお願いします。

m.ts10806

2019/05/07 04:05

Swiper部分だけを実装したミニマムコードをまず試してください。（結果を質問本文に追記してください）でないと何が影響するか分からないですし、問題の切り分けも難しくなります。

FujitaMaho

2019/05/07 04:59

承知しました。

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

回答1件

ベストアンサー

下記部分を</body>の直前の位置まで移動してみてください。

HTML
1        <script>
2        var swiper;
3    swiper = new Swiper('.swiper-container', {
4        pagination: '.swiper-pagination',
5        paginationClickable: true,
6        direction: 'vertical',
7        touchAngle: 90,
8    });
9         </script>