I'm having trouble with the functionality of the "Back" button on pages 2 and 3 of my website. Can anyone help me figure out why it's not working?
My goal is to create a website that resembles a game menu, similar to Deus Ex The Fall. I'm using Swiper JS to create a slider with parallax effects for the background images. However, something seems to have gone wrong.
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'horizontal',
parallax: true,
});
document.querySelector('.back').onclick = () => {
swiper.slideTo(0)
}
document.querySelector('.page1').onclick = () => {
swiper.slideTo(1)
}
document.querySelector('.page2').onclick = () => {
swiper.slideTo(2)
}
document.querySelector('.page3').onclick = () => {
swiper.slideTo(3)
}
...
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testttt</title>
<link rel="stylesheet" href="./swiperjs/swiper-bundle.min.css">
<link rel="stylesheet" href="./index.css">
...
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="parallax-bg" style="background-image:url(./images/panorama.jpg)"
data-swiper-parallax="100%"></div>
<!-- Slides -->
<div class="swiper-slide">
<h1>Page 0</h1>
<div class="buttons">
<button class="page1">Page1</button>
<button class="page2">Page2</button>
<button class="page3">Page3</button>
</div>
</div>
The "Back" button works correctly on Page 1
<div class="swiper-slide">
<h1>Page 1</h1>
<div class="buttons">
<button class="back">Back</button>
</div>
</div>
However, the buttons are no longer functioning from this point onwards
<div class="swiper-slide">
<h1>Page 2</h1>
<div class="buttons">
<button class="back">Back</button>
</div>
</div>
<div class="swiper-slide">
<h1>Page 3</h1>
<div class="buttons">
<button class="back">Back</button>
</div>
</div>
</div>
</div>
<script src="./swiperjs/swiper-bundle.min.js"></script>
<script src="./index.js"></script>
</body>
</html>