Creating a carousel that only moves images once clicked, and can be repeated

Custom code
1

I’ve been struggling and dreading way too much on trying to figure this out so I’m finally giving in and asking here lol. Very big newb to code, but I wanted to do a “carousel” type animation for my landing page on my portfolio, but instead of a loop-like movement, I wanted to set it up like this:

  • Move every image in the carousel a set number of pixels to either the left or the right.
  • Each click only moves the carousel once in one direction. (I’ve tried using animations but it moves the images through every step/movement upon one click.) ((Basically I want one click = one movement instead of the one click = all movement steps.))

I also have my “buttons” as custom images, since I wanted them to be heart shaped and I’d have to use the ID’s for each image anyway. I have what small amount of code I do have done below, most of it’s unfinished.

HTML code (with my image ID’s swapped for placeholdernames):

 <div class="leftarrow">
                    <div id="arrowimagehere"></div> 
                </div>

                <div class="rightarrow">
                    <div id="anotherarrowimagehere"></div> 
                </div>

            <div class="portfolio_preview">

                <div id="imageone"></div> 
                <div id="imagetwo"></div>
                <div id="imagethree"></div>
                <div id="imagefour"></div>
                <div id="imagefive"></div>
                <div id="imagesix"></div>
                <div id="imageseven"></div>

            </div>

CSS:

 .slidetoleft {
            transform: translate(-280px, 0px); 
            transition: 0.7s ease;
            }

             .slidetoright {
            transform: translate(280px, 0px); 
            transition: 0.7s ease;
            }

and finally the Javascript:

const leftarrow = document.getElementById("leftarrow");
                const rightarrow = document.getElementById("rightarrow");

                const portfolio_preview = document.getElementsByClassName("portfolio_preview");

                leftarrow.onclick = () => {

                    if (leftarrow.onclick) {
                        portfolio_preview.position = slidetoleft;
                    }

                }

                document.getElementById('leftarrow').addEventListener ('click', () => slidetoleft)
                document.getElementById('rightarrow').addEventListener ('click', () => slidetoright)

Sorry this is so long, I’ve just spent over 10 hours scouring the depths of the internet to attempt to figure out what I’m doing, but to no advail :’D