hと矢印ボタン＜＞を並べて、キャプション付きのa,imgを５つずつスライドしたいです。

前提・実現したいこと

タイトル　　　　　　　　　　　　　　　＜　＞

画像　　　　　　　画像画像　　　　　　　画像画像　
キャプション　　　　キャプション　　　キャプション　　　　キャプションキャプション

タイトル２　　　　　　　　　　　　　　　＜　＞

画像　　　　　　　画像画像　　　　　　　画像画像　
キャプション　　　　キャプション　　　キャプション　　　　キャプションキャプション

＜　＞をクリックで５つずつ画像がスライドされる上記の形にしたいのですが、

発生している問題・エラーメッセージ　

１、タイトルと＜　＞をdisplay:flex;してしまうと、jsの方が動かなくなってしまいまいます。

２、画像とキャプションにはリンクが貼られており、aタグを使用していますが、
インラインのため、キャプションが画像と横並びになってしまいます。

３、タイトル２の方のスライドが、色々ズレたまま、動くようになったのですが、
上のスライドが動かなくなりました。

画像とキャプションの頭を揃えて、aでリンクを貼りスライドにする方法が知りたいです。

初めて、javascriptを実装中です。

エラーメッセージ

該当のソースコード

###html

html
1
2<h1 class="title">〇〇〇</h1>
3<div class="hscroll_wrapper">
4<span class="arrow left">＜</span><span class="arrow right">＞</span>
5<div>
6<a class="link" href="URL"><img class="imgman" src="images/▲▲▲" alt="◆◆◆">◆◆◆</a>
7<a class="link" href="URL"><img class="imgman" src="images/▲▲▲" alt="◆◆◆">◆◆◆</a>
8<a class="link" href="URL"><img class="imgman" src="images/▲▲▲" alt="◆◆◆">◆◆◆</a>
9<a class="link" href="URL"><img class="imgman" src="images/▲▲▲" alt="◆◆◆">◆◆◆</a>
10<a class="link" href="URL"><img class="imgman" src="images/▲▲▲" alt="◆◆◆">◆◆◆</a>
11<a class="link" href="URL"><img class="imgman" src="images/▲▲▲" alt="◆◆◆">◆◆◆</a>
12<a class="link" href="URL"><img class="imgman" src="images/▲▲▲" alt="◆◆◆">◆◆◆</a>
13<a class="link" href="URL"><img class="imgman" src="images/▲▲▲" alt="◆◆◆">◆◆◆</a>
14<a class="link" href="URL"><img class="imgman" src="images/▲▲▲" alt="◆◆◆">◆◆◆</a>
15<a class="link" href="URL"><img class="imgman" src="images/▲▲▲" alt="◆◆◆">◆◆◆</a>
16<a class="link" href="URL"><img class="imgman" src="images/▲▲▲" alt="◆◆◆">◆◆◆</a>
17<a class="link" href="URL"><img class="imgman" src="images/▲▲▲" alt="◆◆◆">◆◆◆</a>
18<a class="link" href="URL"><img class="imgman" src="images/▲▲▲" alt="◆◆◆">◆◆◆</a>
19<a class="link" href="URL"><img class="imgman" src="images/▲▲▲" alt="◆◆◆">◆◆◆</a>
20</div>
21

###css

css
1
2.title{
3  font-size: 20px;
4}
5.left{
6  margin-left:1010px;
7}
8.hscroll_wrapper {
9	position:relative;
10	max-width:1100px;
11}
12.hscroll_wrapper div {
13	white-space:nowrap;
14	overflow-x:hidden;
15	scroll-behavior:smooth;
16	scroll-snap-type:inline;
17}
18.hscroll_wrapper a{
19	display:inline-block;
20}
21.imgman{
22  height: 200px;
23  width: 200px;
24  margin-bottom: 30px;
25}
26.link{
27  width:200px;
28  height: 200px;
29  margin-right: 10px;
30  color: #404040;
31  font-size: 14px;
32}
33
34

###js

js
1
2document.querySelectorAll('.left').forEach(elm => {
3	elm.onclick = function () {
4		let div = this.parentNode.querySelector('.hscroll_wrapper div');
5		div.scrollLeft -= (div.clientWidth / 0.5);
6	};
7});
8document.querySelectorAll('.right').forEach(elm => {
9	elm.onclick = function () {
10		let div = this.parentNode.querySelector('.hscroll_wrapper div');
11		div.scrollLeft += (div.clientWidth / 0.5);
12	};
13});
14

試したこと

初めはdivで分けてdisplay:flex;で横並びにしていたのですが、
divとidが増えすぎて、違うところを区切るようになり、jsも動かず、わからなくなってしまいました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

K_3578

2021/03/29 04:40 編集

ソースコードはMarkDownの<code>ブロック内に貼り付けてください。質問は編集できますので。

K_3578

2021/03/29 04:43

@質問者さんソースコードの貼り付け方が分らないと存じたので下に例示しておくので参考に貼り付けてみて下さい。 <code>を押すと出てくる ```ここに言語を入力コード ``` という型にhtml,css,jsそれぞれ分けて貼り付けてください。 <code>ブロック間は1行空けておかないと一つのブロックと認識されるのでそこは注意を。