Slide

Ekim Kael
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.
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" 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">&#10094;</a>
            <a href="#" id="next">&#10095;</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: 350px;
    display: flex;
    flex-direction: row;
}

#slider div {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    constraint: layout;
}

#un {
    background-color: crimson;
}

#deux {
    background-color: #404040;
}

.nav {}

.nav a {
    position: absolute;
    top: 150px;
    font-size: 36px;
    color: black;
}

.nav #prev {
    left: 50px;
}

.nav #next {
    right: 50px;
}

h1 {
    margin: 0;
}

.active {
    transition: transform 0.5s ease;
}

Mon JS

var prev = document.getElementById('prev');
var next = document.getElementById('next');
var slide = document.getElementById('slider')

next.style.display = 'none';

prev.addEventListener('click', function () {
    var counter = 1;

    if (counter === 1) {
        slide.style.transform = 'translate3d(-100%, 0, 0)';
        slide.style.transition = 'transform 0.5s ease';
        next.style.display = 'block';

        counter++;
        console.log(counter)
    } else if (counter === 2) {
        slide.style.transform = "translate3d(-100%, 0, 0)";
        slide.style.transition = 'transform 0.5s ease';

        counter++;
        console.log(counter)
    } else if (counter === 3) {
        prev.style.display = 'none';

    } else {
        return false;
    }

})

next.addEventListener('click', function () {
    prev.style.display = 'block';

    slide.style.transform = 'translate3d(0, 0, 0)';
    slide.style.transition = 'transform 0.5s ease';
})

je voudrais que chaque fois que je clique sur le bouton avec id prev que toute mes slides passent.Pour l'instant une seule passe.
c'est surement ridicule mais ça me dépasse

Aucune réponse