Salut,
J'aimerais concevoir un Slider moi-même mais je ne sais pas comment m'y prendre
Voici mon HTML :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Slider</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrappeSlider">
<div id="slider">
<div class="slides active" id="un">
<h1>First</h1>
</div>
<div class="slides" id="deux">
<h1>Second</h1>
</div>
<div class="slides">
<h1>Third</h1>
</div>
</div>
<div class="nav">
<a href="#" id="prev">❮</a>
<a href="#" id="next">❯</a>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Mon CSS :
html,
body {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: white;
}
.wrappeSlider {
overflow: hidden;
box-sizing: border-box;
position: relative;
}
#slider {
width: 100vw;
height: 60vh;
display: flex;
flex-direction: row;
}
#slider div {
flex-shrink: 0;
width: 100%;
height: 100%;
}
#un {
background-color: crimson;
}
#deux {
background-color: #404040;
}
.nav {}
.nav a {
position: absolute;
top: 150px;
font-size: 36px;
}
.nav #prev {
left: 50px;
}
.nav #next {
right: 50px;
}
h1 {
margin: 0;
}
et enfin ce qui me derange, mon JS
var slides = document.querySelectorAll('.slides')
var next = document.querySelector('#next')
var prev = document.querySelector('#prev')
prev.addEventListener('click', function (e) {
e.preventDefault();
for (var i = 0; i < slides.length; i++) {
var slide = slides[i];
}
});
En gros j'aimerais que lorsque je clique sur un des boutons de la navigation qu'il y'ait une translation à gauche ou à droite ça dépendra du bouton.Mais je bloque je ne sais pas comment concevoir mon algorithme.
Je sais que ça parait nul mais je suis coincé.
Besoin d'aide S.V.P