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

**URL:** <https://forum.readymag.com/t/creating-a-carousel-that-only-moves-images-once-clicked-and-can-be-repeated/5795>\
**Category:** Custom code\
**Created:** [December 29, 2025, 8:42pm UTC](https://forum.readymag.com/t/creating-a-carousel-that-only-moves-images-once-clicked-and-can-be-repeated/5795 "2025-12-29T20:42:07Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![ashkaiser](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@ashkaiser](https://forum.readymag.com/u/ashkaiser)\
**Post date:** [December 29, 2025, 8:42pm UTC](https://forum.readymag.com/t/creating-a-carousel-that-only-moves-images-once-clicked-and-can-be-repeated/5795/1 "2025-12-29T20:42:07Z")

</div>

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):

```auto
 <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:

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

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

```

and finally the Javascript:

```auto
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