Swiperについてです

html
1<!DOCTYPE html>
2<html lang="ja">
3	<head>
4	<meta charset="UTF-8">
5		<link href="css/recruitment.css" rel="stylesheet" type="text/css" >
6        <link href="css/swiper.min.css" rel="stylesheet" type="text/css" >
7		<title></title>
8	<meta name="viewport" content="width=device-width,initial-scale=1">
9	<script type="text/javascript" src="js/swiper.min.js"></script>
10	
11<script>
12  let mySwiper = new Swiper ('.swiper-container', {
13    loop: true,    
14    pagination: {
15      el: '.swiper-pagination',
16      clickable: true,
17    },
18
19    navigation: {
20      nextEl: '.swiper-button-next',
21      prevEl: '.swiper-button-prev',
22    },
23  })
24</script>
25
26  
27    </head>
28<body>
29	   
30    
31    
32	<div class="section1">
33 <div class="swiper-slide">
34    <div class="slide-img zoom"><img src="image/slide/recruitment-1.jpg" alt=""></div>
35  <div class="slide-content">
36    <h1 class="from_top">スライド１</h1>
37    <p>あああああ</p>
38    <div class="caption">caption 01</div>
39  </div>
40</div>
41<div class="swiper-slide">
42  <div class="slide-img translate1"><img src="image/slide/recruitment-2.jpg" alt=""></div>
43  <div class="slide-content">
44    <h2 class="from_left">スライド２</h2>
45    <p class="from_right">いいいいい</p>
46    <div class="caption">caption 02</div>
47  </div>
48</div>
49<div class="swiper-slide">
50  <div class="slide-img translate2"><img src="image/slide/recruitment-3.jpg" alt=""></div>
51  <div class="slide-content">
52    <h3 class="from_bottom">スライド３</h3>
53    <p>ううううう</p>
54    <div class="caption">caption 03</div>
55  </div>
56</div>
57    </div><!--section1-->
58<div class="footer">
59</div>
60</body>
61</html>

エラーがでて動きません。
どこがまちがっているのかわかりません。
よろしくお願いします。

エラー

DevTools failed to load SourceMap: Could not load content for js/jquery.min.map: System error: net::ERR_FILE_NOT_FOUND
DevTools failed to load SourceMap: Could not load content for js/swiper.min.js.map: System error: net::ERR_FILE_NOT_FOUND

m.ts10806

2021/05/25 07:47

タイトルには要件を記載してくださいコードはマークダウンのcode機能にてご提示ください htmlなど含めて他者がコピペで現象再現できるようご配慮くださいどんなエラーが出ているのかコピペしてください

K_3578

2021/05/25 07:48

>エラーがでて動きません。そのエラーメッセージを提示しましょう。それと、エラーメッセージやソースコードはMarkDownのcode機能でブロック化してご提示ください。やり方は、<code>を押す、 ```ここに言語を入力コード ``` という型が出てくる ```ここに言語を入力←ここを言語名と置き換えるコード←ここをソースコードをそのまま貼り付けて置き換える ``` です。エラーメッセージとソースコードのブロックは分割した上で、質問文内でブロックの間は1行以上スペースを空けてください。質問編集画面の右側にこちらから見えるのと全く同じプレビューが表示されているのでそれを見ながら調整して頂ければと。

uemaSR

2021/05/25 07:58

htmlのclass名などが間違っている可能性があるので、htmlも書いていただけますか？

K_3578

2021/05/25 08:11

>エラーはシンタックスエラーですそうじゃない、エラーメッセージをそのままコピペして貼り付けてくれと言っている。

K_3578

2021/05/25 08:21

↑全然シンタックスエラーじゃないじゃないか！ FILE NOT FOUNDだからパスが合ってないのでは？階層確認してみてください。

m.ts10806

2021/05/25 08:23

タイトルは要件を。他者がコピペで現象再現できるようご配慮ください。ご自身のコードにはscriptやcssの読み込みはおろかbodyやdoctypeも書いてないのですか？

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

回答1件

ベストアンサー

htmlの書き方についていろいろつっこみたい点があるのですが、とりあえず見ただけで分かるswiperが動かない原因について説明します。出ているエラーについての説明はしません。

下記は公式のサイトから引っ張ってきたコードです。

html
1<!-- Slider main container -->
2<div class="swiper-container">
3  <!-- Additional required wrapper -->
4  <div class="swiper-wrapper">
5    <!-- Slides -->
6    <div class="swiper-slide">Slide 1</div>
7    <div class="swiper-slide">Slide 2</div>
8    <div class="swiper-slide">Slide 3</div>
9    ...
10  </div>
11  <!-- If we need pagination -->
12  <div class="swiper-pagination"></div>
13
14  <!-- If we need navigation buttons -->
15  <div class="swiper-button-prev"></div>
16  <div class="swiper-button-next"></div>
17
18  <!-- If we need scrollbar -->
19  <div class="swiper-scrollbar"></div>
20</div>