My picture won't slide and even change position i JavaSctipt-CodePudding

i'm new in JavaScript Programming. I have some problem. I added some picture that i want to be slideshow with previous and next buttons.

const carouselSlide = document.querySelector('.carouselImage');
const carouselImages = document.querySelectorAll('.carouselImage img');

//Buttons
const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');

//Counter
let counter = 1;
const  size = carouselImages[0].clientWidth;

carouselSlide.style.transform = 'translateX('   (-size * counter)   'px)';


nextBtn.addEventListener('click',()=>{
    carouselSlide.style.transform = 'transform 0.4s ease-in-out';
    counter  ;
    carouselSlide.style.transform = 'translateX('   (-size * counter)   'px)';

});

First image and last image are duplicated becouse I want smoothness in this. Look on the HTML Code

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8"/>
    <title>Benedykt Borowski</title>
    <meta name="description" content="Młody człowiek cieszącym się życjem"/>
    <meta name="keyword" content="Młody, blog, programista, cieszący się życiem"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
    <link href="CSS/styleshets.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;700&display=swap" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
    </style>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="ParentDiv">
    <div id="IndexName">
        <h1>Banedykt Borowski</h1>
    </div>
    <div  id="IndexMenu">
        <ul ><a href="$"> Home</a></ul>
        <li><a href="$">About me</a>
        <div >
            <ul>
                <li><a href="$">My bedroom</a></li>
                <li><a href="$">My workspace</a></li>
            </ul>
        </div>
        </li>
        <li><a href="$">My travels</a></li>
        <li><a href="$">My work</a></li>
        <li><a href="$">My Studing</a></li>
    </div>
    <div id="indexText>">
    <div id="indexFirstWords">
        <p>Witam,<br>
        Jestem młodym człowiekiem chcącym pokazać wszystkim ludziom kim jestem,
            co robie, jak korzystam z życia i oczywiście jak żyje.</p>
        <p>Odrazu odsyłam do zakładek po lewej stronie! <br>
        Tam dowiecię się o mnie trochę więcej :D</p>
        <p>A jeżeli chcecie poczytać odrazu to na dole pare rzeczy!</p>
        <p> Może zacznijmy od moich stanowisk które posiadałem  przez większość życia</p>

            </div>
        <div >
            <div >
                <img src="./img/setup/FifthPicOfSetup.png" id="LastClone" alt="">
                <img src="./img/setup/FirstPicOfSetup.jpg" alt="">
                <img src="./img/setup/SecondPicOfSetup.jpg" alt="">
                <img src="./img/setup/ThirdPicOfSetup.jpg" alt="">
                <img src="./img/setup/FourthPicOfSetup.png" alt="">
                <img src="./img/setup/FifthPicOfSetup.png" alt="">
                <img src="./img/setup/FirstPicOfSetup.jpg" id="FirstClone" alt="">
        </div>
    </div>
        <button id="prevBtn">Previous</button>
        <button id="nextBtn">Next</button>
    </div>
</div>

</body>

</html>

And CSS file:

.Menu-side-bar{
    background-color: aliceblue;
    list-style-type:none;
    width: 10%;
    text-align: left;
    font-family: 'Lato', sans-serif;;
    font-weight: 300;

}
.Menu-side-bar ul{
    padding: 5%;
}
.Menu-side-bar li{
    padding: 3%;
}
.Menu-side-bar a{
    text-decoration: none;
    color: black;
}
.Menu-side-bar li:hover{
    color: white;
    background-color:green ;
}
.active{
   color: white;
    background-color:green ;
}
#ParentDiv{
width: 100%;
text-align: center;
}
#IndexName{
    display: inline-block;
    width: 100%;
    color: black;
    background-color: aliceblue;
}
#IndexMenu{
    float: left;
}
#indexText{
    float: left;
}
.drop-down-menu{
display: none;
}
.Menu-side-bar li:hover .drop-down-menu{
    display: block;
    position: absolute;
    background-color: aliceblue;
    width: 10%;
    padding: 0.1%;
    margin-left: -0.3%;
}
#indexFirstWords{
    width: 50%;
    text-align: center;
    display: inline-block;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
}
.carouselSlide{
    width: 27%;
    margin: auto;

}
.carouselImage{
    display: flex;
    width: 100%;
    height: 500px;
}

Don't know what happend there, my friend is doing it and it works perfectly. Thanks for all help!

CodePudding user response：

What exactly are you wanting to happen when you say slide? Are you meaning a smooth transition between photos, or just for the photos to move? Because I put your code into codepen (and threw in my photos) and the next button does advance the carousel. It isn't a smooth animation, if that's what you're wanting help with. Your back previous button doesn't work, but you also don't have any code in your js to make it do anything.

CodePudding user response：

I just want photos to move. On my computer next button does nothing. I know that previous button don't work and i don't have any code. I want to take care of next button first.