Как можно реализовать переключатель между слайдерами на моем сайте?

Question

teski @teski

JavaScript

Как можно реализовать переключатель между слайдерами на моем сайте?

Сайт: https://testssssws.000webhostapp.com/ (я его не адаптировал, нормальный вид будет на расширение 1920x1080)

Там есть кнопка назад, ну как ее можно запрограммировать, чтобы все работало?

Код сайта:

HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css">
	<title></title>
</head>
<body>
	<div class="container">
		<div class="info">
			
			<div class="container-back">
				<button id="back">Назад</button>
			</div>

			<p id="p1">Нажми на нас котиков! Чтобы появился наш сынок!</p>

			<img src="https://www.purina.ru/sites/default/files/2021-02/kot-ili-koshka-header%20smaller.jpg" id="img1">
			<img src="https://klike.net/uploads/posts/2019-07/1564314090_3.jpg" id="img2">
			<img src="https://www.meme-arsenal.com/memes/6aacb9770a762216515d3c06e4835d85.jpg" id="img3">

			<p id="p4">Ты спас меня)))))</p>
			<button id="bt1">Нажми на меня чтобы я попал в руки хозяину!</button>

			<p id="p3">Котик потерялся((((((</p>
			<button id="bt2">Нажми на меня чтобы спасти его!</button>

			<div class="container-slider">
				<div id="st1"></div>
				<div id="st2"></div>
				<div id="st3"></div>
				<div id="st4"></div>
			</div>

		</div>
	</div>
	<script type="text/javascript" src="js.js"></script>
</body>
</html>

CSS:

*{
	font-size: 30px;
	font-weight: 900;
}

.container{
	margin-top: 80px;
}

.info{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: relative;
}

#img2{
	display: none;
}

#p2{
	display: none;
}

#bt1{
	background: orange;
	border: 2px solid darkorange;
	display: none;
	margin-top: 50px;
}

#bt1:active{
	background: darkorange;
	border: 3px solid orange;
}


#p3{
	color: red;
	font-size: 80px;
	display: none;
}

#bt2{
	background: blue;
	border: 2px solid darkblue;
	color: yellow;
	display: none;
}

#bt2:active{
	background: darkblue;
	border: 3px solid blue;
}

#img2{
	width: 25%;
}
#img3{
	display: none;
}

#p4{
	display: none;
}

.container-back{
	position: fixed;
	margin-right: 1500px;
}

#back{
	position: absolute;
	margin-right: 1500px;
	background: green;
	border: 3px solid darkgreen;
	display: block;
}

#back:active{
	background: daarkgreen;
	border: 4px solid green;
}


.container-slider{
	display: flex;
	margin-top: 50px;
	position: fixed;
	margin-top: 700px;
}

#st1{
	background: black;
    content: "";
    height: 15px;
    width: 15px;
    border-radius: 5px;
}

#st2{
	background: black;
    content: "";
    height: 15px;
    width: 15px;
    border-radius: 5px;
}

#st3{
	background: black;
    content: "";
    height: 15px;
    width: 15px;
    border-radius: 5px;
}

#st4{
	background: black;
    content: "";
    height: 15px;
    width: 15px;
    border-radius: 5px;
}

#st1, #st2, #st3, #st4{
	margin-right: 50px;
	margin-left: 50px;
}

JAVA SCRIPT:

let body = document.querySelector('body')
let img1 = document.querySelector('#img1')
let img2 = document.querySelector('#img2')
let p1 = document.querySelector('#p1')
let p2 = document.querySelector('#p2')
let bt1 = document.querySelector('#bt1')
let p3 = document.querySelector('#p3')
let bt2 = document.querySelector('#bt2')
let img3 = document.querySelector('#img3')
let p4 = document.querySelector('#p4')

let st1 = document.querySelector('#st1')
let st2 = document.querySelector('#st2')
let st3 = document.querySelector('#st3')
let st4 = document.querySelector('#st4')

st1.style.background = 'red'
st2.style.background = ''
st3.style.background = ''

let back = document.querySelector('#back', '#back.display');
back.style.display = 'none'


img1.onclick = function(){
	p1.style.display = 'none'
	img1.style.display = 'none'
	img2.style.display = 'block'
	bt1.style.display = 'block'

	st1.style.background = ''
	st2.style.background = 'red'
	st3.style.background = ''

	back.style.display = 'block'
}


bt1.onclick = function(){
	img2.style.display = 'none'
	bt1.style.display = 'none'
	p3.style.display = 'block'
	bt2.style.display = 'block'

	st1.style.background = ''
	st2.style.background = ''
	st3.style.background = 'red'

	back.style.display = 'block'

}




bt2.onclick = function(){
  bt2.style.display = 'none'
  p3.style.display = 'none'
  img3.style.display = 'block'
  p4.style.display = 'block'

	st1.style.background = ''
	st2.style.background = ''
	st3.style.background = ''
	st4.style.background = 'red'

	back.style.display = 'block'
}