Javascriptのscriptを書く場所がわからない

A Pen by André Cortellini

\r\n

\r\n
\r\n
Slide #1
\r\n Sub-title #1\r\n
\r\n \r\n
\r\n
\r\n
Slide #2
\r\n Sub-title #2\r\n
\r\n \r\n
\r\n
\r\n
Slide #3
\r\n Sub-title #3\r\n
\r\n \r\n
\r\n
\r\n
Slide #4
\r\n Sub-title #4\r\n
\r\n \r\n
\r\n
\r\n
Slide #5
\r\n Sub-title #5\r\n
\r\n \r\n

\r\n\r\n \r\n

\r\n

\r\n\r\n

\r\n

\r\n \r\n

\r\n \r\n\r\n

現在ホームページ作成しておりまして、こちらのリンクのJSを使ったスライドを表示させたいのですが、
JSのスクリプト<script src="script.js"></script>をHTMLの
どこに、どのように書けばいいのかわからず苦戦しております。

わかる方いらっしゃいましたらご教示お願い致します。

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

回答1件

ベストアンサー

jquery使ってるので先にjqueryを読み込めばOkかと思います。

html
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
2<script src="script.js"></script>
3</body>

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
6    <link href='https://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
7    <link href='https://fonts.googleapis.com/css?family=Neucha' rel='stylesheet' type='text/css'>
8    <title>test</title>
9</head>
10
11<body>
12    <div id="wrapper">
13
14        <h1>Simple Image Slider</h1>
15        <h2>A Pen by <a href="http://www.andrecortellini.com" target="_blank">André Cortellini</a></h2>
16
17        <div id="slider-wrap">
18            <ul id="slider">
19                <li data-color="#1abc9c">
20                    <div>
21                        <h3>Slide #1</h3>
22                        <span>Sub-title #1</span>
23                    </div>
24                    <i class="fa fa-image"></i>
25                </li>
26
27                <li data-color="#3498db">
28                    <div>
29                        <h3>Slide #2</h3>
30                        <span>Sub-title #2</span>
31                    </div>
32                    <i class="fa fa-gears"></i>
33                </li>
34
35                <li data-color="#9b59b6">
36                    <div>
37                        <h3>Slide #3</h3>
38                        <span>Sub-title #3</span>
39                    </div>
40                    <i class="fa fa-sliders"></i>
41                </li>
42
43                <li data-color="#34495e">
44                    <div>
45                        <h3>Slide #4</h3>
46                        <span>Sub-title #4</span>
47                    </div>
48                    <i class="fa fa-code"></i>
49                </li>
50
51                <li data-color="#e74c3c">
52                    <div>
53                        <h3>Slide #5</h3>
54                        <span>Sub-title #5</span>
55                    </div>
56                    <i class="fa fa-microphone-slash"></i>
57                </li>
58
59
60            </ul>
61
62            <!--controls-->
63            <div class="btns" id="next"><i class="fa fa-arrow-right"></i></div>
64            <div class="btns" id="previous"><i class="fa fa-arrow-left"></i></div>
65            <div id="counter"></div>
66
67            <div id="pagination-wrap">
68                <ul>
69                </ul>
70            </div>
71            <!--controls-->
72
73        </div>
74
75    </div>
76    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
77    <script src="script.js"></script>
78</body>
79
80</html>