Can anyone assist me in creating next and previous buttons? I've been struggling with my JavaScript skills. I noticed that many people use jQuery or pure JavaScript for this. Since I'm still learning JavaScript, there are a lot of concepts I'm not familiar with yet. Thank you for your help.
Requirement: Next / Previous button to navigate to the next page and go back to the previous page if users want to revisit it.
Link to my demo: https://jsfiddle.net/hioihia123/zgjswtay/3/
body {
font-size: 18px;
background: url("https://www.toptal.com/designers/subtlepatterns/patterns/groovepaper.png");
font-family: 'Gelasio', serif;
}
main {
color: black;
font-size: 1.1rem;
display: flex;
flex-direction: column;
width:100%;
margin-left : auto;
margin-right: auto;
}
main div {
width: 100%;
padding: 6rem 5rem;
}
h2 {
text-align: center;
font-size: 1.2rem;
font-weight: normal;
margin-bottom: 6rem;
}
h1 {
font-family: 'Ibarra Real Nova', serif;
text-align: center;
font-weight: 400;
font-size: 3rem;
text-transform: uppercase;
margin-bottom: 6rem;
letter-spacing: .1rem;
}
.right-page {
margin-top: 0;
padding-top: 0;
}
.right-page p {
line-height: 1.4;
text-align: justify;
text-justify: inter-word;
}
.right-page p:first-letter {
font-family: 'Ibarra Real Nova', serif;
font-size: 4.5rem;
float: left;
margin-top: .5rem;
margin-right: 1rem;
line-height: .7;
}
.left-page {
text-align: center;
padding-top: 4rem;
}
.left-page small {
font-style: italic;
}
.left-page img {
max-width: 90%;
display: block;
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 900px) {
main {
flex-direction: row;
with: 100%;
max-width: 1800px;
}
main div {
width: 50%;
}
.left-page {
padding-top: 14rem;
}
.right-page {
padding-top: 6rem;
max-height: 100vh;
height: 100vh;
}
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title> Old book Stories</title>
<link href="https://fonts.googleapis.com/css?family=Gelasio:400,400i|Ibarra+Real+Nova&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<main>
<div class="left-page">
<img src="https://www.oldbookillustrations.com/wp-content/uploads/2017/03/there-lonely.jpg"/>
<small>But go there, lonely,<br>
At eventide,<br>
And hearken, hearken<br>
To the lisping tide.<br>
</small>
</div>
<div class="right-page">
<h2>[ 1 ]</h2>
<h1>Depender</h1>
<p>
En cuanto a todas las cosas que existen en el mundo, unas dependen de nosotros,
otras no dependen de nosotros. De nosotros dependen; nuestras opiniones, nuestros
movimientos, nuestros deseos, nuestras inclinaciones, nuestras aversiones; en una
palabra, todas nuestras acciones.<br>
Así, ante toda fantasía perturbadora, está presto a decir: <i>“Tu no eres sino una
imaginación, y en absoluto eres lo que parece”</i>, enseguida examínala con atención y
ponla a prueba, para ello sírvete de las reglas que tienes, principalmente con esta
primera que es, a saber : de si la cosa que te hace penar es del número de aquellas
que dependen de nosotros o de aquellas que no están en nuestro poder. Di sin
titubear: <i>“Esa en nada me atañe”.</i>
</p>
</div>
</main>
<!-- partial -->
</body>
</html>