JavaScript 画像切り替えと転移について

<style>
	.genre {
		display: flex;
		margin: 0 auto;
		width: 70%;
		height: 100vh;
	}

	.geare_img {
		display: flex;
	}

	img {
		width: 300px;
	}

	.button_img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.input_back {
		position: absolute;
		top: 50%;
		left: 30%;
	}

	.input_forward {
		position: absolute;
		top: 50%;
		right: 30%;
	}

	.img_link {
		border: 0;
	}
</style>
<script>
	var img_src = [
			"./img2/fish.png",
			"./img2/bento.png",
			"./img2/meet.png",
			"./img2/bread.png",
			"./img2/cup.png",
			"./img2/spice.png",
			"./img2/nyu.png",
			"./img2/drink.png",
			"./img2/snack.png",
			"./img2/fruit.png",
			"./img2/vege.png"
	];
	var urls = [
		"https://website_1",
		"https://website_2",
		"https://website_3",
		"https://website_4",
		"https://website_5",
		"https://website_6",
		"https://website_7",
		"https://website_8",
		"https://website_9",
		"https://website_10",
		"https://website_11"
	];
	var num = 0;

	function forward() {
		if (num == 10) {
			num = 0;
		}
		else {
			num++;
		}
		document.getElementById("img").src=img_src[num];
	}

	function back() {
		if (num == 0) {
			num = 10;
		}
		else {
			num--;
		}
		document.getElementById("img").src=img_src[num];
	}

	function goto() {
		window.location.href = urls[num];
	}
</script>
<div class="genre">
	<div class="genre_img">
		<input type="button" value="&lt;" onclick="back()" class="input_back">
		<a href="javascript:goto()" class="img_link"><img src="./img2/nyu.png" id="img" class="button_img"></a>
		<input type="button" value="&gt;" onclick="forward()" class="input_forward">
	</div>
</div>