Surely that's what the Internet is for.
Acorn
Printable View
I went back to my new friend, ChatGPT and asked the following questions, again I won't the individual steps. The goal is to have 2 carousels on the same page, one scrolling right to left, the other the opposite direction:
How do I make this code start at image9 and go backwards? (I then pasted the code ChatGPT provided previously)
When I use this script, and add another carousel using the following script on the same page, only one works. (I pasted the modified code plus the <Head> to be sure ChatGPT had all the information.)
Now both carousels are static. (It fixed the static problem, but now I had 2 identical carousels scrolling the same direction.)
I would like carousel1 to start at image1 and scroll forward, and carousel2 to start at image9 and scroll backwards.
carousel2 is now static, showing image1
This didn't work. Carousel2 is still static and showing image1
I am still seeing no change. Here is the code I am using for carousel2. Is it correct? (I pasted the full code, head and body.)
ChatGPT then apologised and said it had made an error. I probably think I made the error, but Mr. Chat is far too old school British butler to say so.
A last single line of code change, and we now have 2 carousels on the same page going in opposite directions. Individual links can be added to the individual images, and the number of images can be edited at the drop of a hat.
CAROUSEL EXAMPLE
Placeholder Head for both carousels:
Placeholder Body (top carousel):Code:<title>Carousel</title>
<style>
.carousel {
display: flex;
overflow-x: scroll;
scroll-behavior: smooth;
width: 100%;
padding: 0px 0;
}
.carousel-item {
flex: 0 0 auto;
margin-right: 0px;
width: 720px;
height: 280px;
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
color: #fff;
}
</style>
Placeholder Body (bottom carousel):Code:<div class="carousel carousel1">
<a href="#" class="carousel-item"><img src="image1.jpg" alt="Image 1"></a>
<a href="#" class="carousel-item"><img src="image2.jpg" alt="Image 2"></a>
<a href="#" class="carousel-item"><img src="image3.jpg" alt="Image 3"></a>
<a href="#" class="carousel-item"><img src="image4.jpg" alt="Image 4"></a>
<a href="#" class="carousel-item"><img src="image5.jpg" alt="Image 5"></a>
<a href="#" class="carousel-item"><img src="image6.jpg" alt="Image 6"></a>
<a href="#" class="carousel-item"><img src="image7.jpg" alt="Image 7"></a>
<a href="#" class="carousel-item"><img src="image8.jpg" alt="Image 8"></a>
<a href="#" class="carousel-item"><img src="image9.jpg" alt="Image 9"></a>
</div>
<script>
const carousel1 = document.querySelector('.carousel1');
const carouselItems1 = document.querySelectorAll('.carousel1 .carousel-item');
const itemWidth1 = carouselItems1[0].offsetWidth + parseInt(getComputedStyle(carouselItems1[0]).marginRight);
let currentPosition1 = 0;
let direction1 = 1; // set initial direction to forward
let pauseDuration1 = 2000; // set default pause duration
carousel1.scrollTo(currentPosition1, 0);
function scrollToNextItem1() {
currentPosition1 += direction1 * itemWidth1;
// reverse direction if last item or first item is reached
if (currentPosition1 >= (carousel1.scrollWidth - carousel1.offsetWidth)) {
currentPosition1 = carousel1.scrollWidth - carousel1.offsetWidth;
direction1 = -1; // reverse direction to go backward
} else if (currentPosition1 <= 0) {
currentPosition1 = 0;
direction1 = 1; // reverse direction to go forward
}
carousel1.scrollTo(currentPosition1, 0);
}
setInterval(scrollToNextItem1, pauseDuration1);
</script>
Code:<div class="carousel carousel2">
<a href="#" class="carousel-item"><img src="image1.jpg" alt="Image 1"></a>
<a href="#" class="carousel-item"><img src="image2.jpg" alt="Image 2"></a>
<a href="#" class="carousel-item"><img src="image3.jpg" alt="Image 3"></a>
<a href="#" class="carousel-item"><img src="image4.jpg" alt="Image 4"></a>
<a href="#" class="carousel-item"><img src="image5.jpg" alt="Image 5"></a>
<a href="#" class="carousel-item"><img src="image6.jpg" alt="Image 6"></a>
<a href="#" class="carousel-item"><img src="image7.jpg" alt="Image 7"></a>
<a href="#" class="carousel-item"><img src="image8.jpg" alt="Image 8"></a>
<a href="#" class="carousel-item"><img src="image9.jpg" alt="Image 9"></a>
</div>
<script>
const carousel2 = document.querySelector('.carousel2');
const carouselItems2 = document.querySelectorAll('.carousel2 .carousel-item');
const itemWidth2 = carouselItems2[0].offsetWidth + parseInt(getComputedStyle(carouselItems2[0]).marginRight);
let currentPosition2 = carousel2.scrollWidth - carousel2.offsetWidth; // start at the end of carousel2
let direction2 = -1; // set initial direction to backward
let pauseDuration2 = 2000; // set default pause duration
carousel2.scrollTo(currentPosition2, 0);
function scrollToNextItem2() {
currentPosition2 += direction2 * itemWidth2;
// reverse direction if last item or first item is reached
if (currentPosition2 >= (carousel2.scrollWidth - carousel2.offsetWidth)) {
currentPosition2 = carousel2.scrollWidth - carousel2.offsetWidth;
direction2 = -1; // reverse direction to go backward
} else if (currentPosition2 <= 0) {
currentPosition2 = 0;
direction2 = 1; // reverse direction to go forward
}
carousel2.scrollTo(currentPosition2, 0);
}
setInterval(scrollToNextItem2, pauseDuration2);
</script>
trypoint - I have removed your links. New members are not permitted links.