画像の下にボタンを配置しカルーセル全体をセクションでまとめておきます。
- ボタンの配置
- セクションの配置
navタグ
ボタン
body全体
ボタンの配置
・前回までで戻る、進むボタンが出来て、重複していた関数も一つにまとめられスッキリしたと思います。
・今回はヘッダーの下によくある点を配置していきたいと思います。
・この点は今どこの画像を表示しているのかや点をクリックすることによって指定した画像を表示することが出来ます。
・では早速作っていきたいと思います。
・まずHTMLの方でマークアップしていきます。
・点というのは最終的にクリックができるようにしたいのでbuttonタグを使っていきたいと思います。
・まずはcontainerの外側に配置していくのでnavタグをconainerとscriptタグの間に配置していきます。
・そしてそのnavタグの中にbuttonタグを書いてきましょう。
・最後に後でJavaScriptで手を加えやすいように現在地を作っておきます。
・クラス属性で作っていって名前はcurrentとしてあげればいいですね。
・こんな感じです。
<nav>
<button class=”current”></button>
<button></button>
<button></button>
<button></button>
</nav>
セクションの配置
・次に前回作ったcontainerと今回のnavタグは同じカルーセルの仲間なのでセクションで囲ってあげると親切です。
・containerの直前からnavタグの終わりまでをsectionタグで囲います。
・この時クラス属性もつけておきましょう。
・名前はcarouselとしておきます。
・body全体はこんな感じになっています。
<body>
<section class=”carousel”>
<div class=”container”>
<ul>
<li><img src=”img/img1.jpg”></li>
<li><img src=”img/img2.jpg”></li>
<li><img src=”img/img3.jpg”></li>
<li><img src=”img/img4.jpg”></li>
</ul>
<button id=”prev”>«</button>
<button id=”next”>»</button>
</div>
<nav>
<button class=”current”></button>
<button></button>
<button></button>
<button></button>
</nav>
</section>
<script src=”js/main.js”></script>
</body>
以上
