Slider i javascript

De flesta element på en HTML-sida kan hantera händelser som berör just  det elementet. Det kan t ex vara att ett element visas på skärmen eller att användaren klickar en knapp. Man säger att elementet "fångar" händelsen och gör något med den.  "Något" i det här fallet är en javascript-kod.. Koden associeras med händelser med attributet on... där olika händelser har olika attribut. När man klickar på en knapp så hanteras det med attributet onclick. Attributet associeras med javascriptkod som 

<button .... onclick="någon javascriptkod". /> 

Javaskriptkoden kan göra något direkt men det är nog vanligare att det är ett anrop till en javaskriptfunktion som definieras någon annan stans. I ditt fall så ska du ha två funktioner som bläddrar till nästa bild respektive till föregående bild. 

Du kan läsa mer om events på följande länk https://www.w3schools.com/js/js_events.asp

Titta också på exemplet som borde leda dig i rätt riktning. Återkom om du har mer frågor.

Men det fungerar inte !

Prova med att lägga till onclick='goToPrevious' resp onclick='goToNext' på button i stället och ta bort addEventListener. Det kan ha att göra med att sidan inte är laddad när din js-kod laddas o körs och då finns inte dina element i DOM-trädet. 

Jag kan också tipsa om att köra debuggern. Jag kör Firefox och där högerklickar man på ett element och väljer "Inspektera" så kan du se om du får något fel och du kan vandra runt i DOM-trädet och se vilka värden resp attribut har.  

Här har du lite kod som gör något liknande som du försöker uppnå. Den fungerar så det borde din göra också.  Kontrollera att dina metoder gör vad de ska med debugger eller spårutskrifter 

<div class="book">
	<div class="book-pages">
		<div id='kalle' class="pages">
			<div class="page1">
				Kalle
			</div>
		</div>
		<div id='pelle' class="pages" style="display: none">
			<div class="page2">
				Pelle
			</div>
		</div>

	</div>	

	<button id="previous">Previous</button>
	<button id="next">Next</button>

</div>

<script>

var prevBtn = document.getElementById('previous');
var nextBtn = document.getElementById('next');

prevBtn.addEventListener('click',goToPrev);
nextBtn.addEventListener('click',goToNext);

function goToPrev() {
	document.getElementById('kalle').style.display = 'block';
	document.getElementById('pelle').style.display = 'none';
}

function goToNext() {
	document.getElementById('pelle').style.display = 'block';
	document.getElementById('kalle').style.display = 'none';

}

</script>

varför har du : none display i klassen pelle???

tänk att jag har 32 sådana sidor som klassen pages!

för att lägga alla id i document blir det för långt, är det if eller for loop som spelar roll där?

Div pelle och kalle upptar samma plats på sidan, ungefär som jag tänker mig att bilder i ett bildspel gör så initialt visas Kalle och Pelle döljs. Knapparna används sen för att omväxlande visa de två divarna. 

I ditt fall kan du t ex sätta samma namn (name=...) och sen använda getElementsByName som returnerar en vektor som du kan iterera framåt och bakåt med hjälp av ett index du kommer ihåg.  Alternativt skapar du en vektor med alla bilder och skapar nya img-taggar när du bläddrar. 

Det finns andra sätt men det här är det enklaste HTML/JS jag kan komma på.

Jag had lagt till id och JQuery kod. Initialt gömmer vi alla sidor med style="display: none;"

<div class="book">
	<div class="book-pages">
		<div class="pages page" id="page1" style="display: none;">
			<div class="page-content">
				<img src="page1.jpg">
			</div>
		</div>
		<div class="pages page" id="page2" style="display: none;">
			<div class="page-content">
				<img src="page2.jpg">
			</div>
		</div>

		<!-- Flera sidor .... -->
	</div>	

	<button id="previous">Previous</button>
	<button id="next">Next</button>

</div>

JQUERY

$(document).ready(function() {
	var currentPage = 1;
	var numberOfPages = $('.page').length;
	
	// Function to update the page view
	function updateView() {
		$('.page').hide(); // hide all pages
		$('#page' + currentPage).show(); // show current page
	}

	// Show the first page initially
	updateView();
	
	// Bind click event to the next button
	$('#next').click(function() {
		if(currentPage < numberOfPages) {
			currentPage++; // increment current page number
			updateView(); // update the view
		}
	});
	
	// Bind click event to the previous button
	$('#previous').click(function() {
		if(currentPage > 1) {
			currentPage--; // decrement current page number
			updateView(); // update the view
		}
	});
});

typ... har inte testkört det själv ;)

<div class="book">
<div class="book-pages">
<div class="pages">
<div class="page1">
<img src="page1.jpg">
</div>
</div>
<div class="pages">
<div class="page2">
<img src="page2.jpg">
</div>
</div>
<!-- Fortsätt lägg till div-element för varje sida -->

</div>

<button id="previous">Previous</button>
<button id="next">Next</button>
</div>

.book-pages {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}

.pages {
scroll-snap-align: start;
}

.page1,
.page2 {
width: 100%;
}

/* Lägg till fler sidor med motsvarande klasser */

button {
margin-top: 10px;
}

$(document).ready(function() {
var currentPage = 1;
var totalPages = $('.pages').length;

// Hantera klick på Previous-knappen
$('#previous').click(function() {
if (currentPage > 1) {
currentPage--;
$('.book-pages').animate({scrollLeft: $('.book-pages').scrollLeft() - $('.book-pages').width()}, 500);
}
});

// Hantera klick på Next-knappen
$('#next').click(function() {
if (currentPage < totalPages) {
currentPage++;
$('.book-pages').animate({scrollLeft: $('.book-pages').scrollLeft() + $('.book-pages').width()}, 500);
}
});
});