trim creek
Hi Everyone! I'm trying to make a website showcasing cars that I love. to do this, I've decided to implement carousels into the website. (youtube embeds are not working well and I want something in-source) the code I'm using is the first code to finally, actually display my photos in a carousel, however, I can only have one at a time. how can I seperate the timer between my two different lists so that they both run at the exact same time?
Here is the JavaScript
naive owl
What are you using to write you code?
trim creek
notepad
naive owl
And in general it's better to send code like this
```javascript
your code here
```
trim creek
trim creek
I have netbeans but
naive owl
Maybe install an actual code editor like VS Code or sublime
naive owl
I have netbeans but
netbean is for java only
trim creek
netbeans has a html/css/javascript thing though
naive owl
Yea but don't use netbean
Try VS Code
Or notepad++
Anyway, for your issue, do you know what happen when you do
const images = document.querySelectorAll('.carousel-image');
no, not really qwq
naive owl
Think about it
trim creek
I borrowed the code from someone who offered to help
naive owl
What do you think it does
trim creek
does it bunch up all the carousel-images into one array?
naive owl
I borrowed the code from someone who offered to help
Yea and it's fine, it would work if you only had one carousel
naive owl
does it bunch up all the carousel-images into one array?
Yea it's about that
You get all the carousel-images.
trim creek
ah..
naive owl
Now, can you see why it would cause an issue?
trim creek
yeah
so
theres like
two ways to solve this
trim creek
but is there a way to alter my current code to allow me to rope everything together seperately
sorry
im used to saying java
I know it's javascript i just get them mixed up cause i tend to shorten things
trim creek
my bad
yeah
but
anyway I'm just curious if there's a way to seperate the carousel images and keep the code relatively similar
cause this website is gonna have a LOT of carousels in it
naive owl
Of course there's a way to do that without changing the code too much. First thing you could do is a an id to your carousel containers then use the id to get the images separately. You'd have to query your images differently document.querySelectorAll('#myCarousel .carousel-image');
Another way would be to get all the carousel-container and iterate through all of them, fetch the images and create the interval
trim creek
Of course there's a way to do that without changing the code too much. First th...
what does #myCarousel do here?
naive owl
It's an id and it allows you to query only the images for the carousel with that id
It's just one solution but there's other ways too
trim creek
but in that case it'll only accept 1 of my containers right?
and I'll have to write a copy of the code with a different id passed thru for the other carousel
naive owl
Nah that's the thing you can change the way you initalize the the carousels to use the ids
But let me show you an example a bit more concrete
trim creek
alright
naive owl
<div class="carousel">
<img class="carousel-image" src="...">
<img class="carousel-image" src="...">
<img class="carousel-image" src="...">
</div>
<div class="carousel">
<img class="carousel-image" src="...">
<img class="carousel-image" src="...">
<img class="carousel-image" src="...">
</div>
// we fetch all the carousels and call initCarousel for each of them
const carousels = document.getElementsByClass("carousel");
carousels.forEach(carousel => initCarousel(carousel));
// this function fetch the images and create the loop for the carousel
function initCarousel(carousel) {
const images = carousel.getElementsByClass("carousel-images");
...
}
But obviously, your code will not work directly because of the way you handle the current index
Well... it might but it's going to be weird (it will cause an error) if you don't have the same amount of images
trim creek
oh, I need the same amount of images
naive owl
No not necessarily
You just need to completely handle them separately, you code isn't made for that currently
trim creek
oooh, I see how you did that
that's smart
i'll try that in a moment
i'm watching an auction
okay auction over
okay so do I replace my
const images = document.querySelectorAll('.carousel-image');
with
const images = carousel.getElementsByClass("carousel-images");
trim creek
but the rest of the code you supplied is all additional to the code i have
not replaceable
so I'm just making sure that this is the one part I do replace in my code
naive owl
Then, to give you a bit more hint of what you need to do, is create an interval for the next slide setInterval(rotateImage, 2000); (you can definitely simplify rotateImage, you don't have to loop through the images)
trim creek
I have another question
why is your getElementsByClass a double quote named something else?
why is it different than my .carousel-image?
if I put '.carousel-image' will it not work?
naive owl
The double quote is simply because I prefer double quote over single quote for strings
trim creek
it makes no difference in js?
naive owl
Nop
As for the . it's not required since the function is getElementsByClassName. querySelector and querySelectorAll is to make any kind of query so you need to specify if it's a class, tag or id
trim creek
ah, okay
trim creek
not entirely but I understand the concept
getElementByClassName is more case specific
and query selector is a wider use
naive owl
Please send the code differently
trim creek
sorry, I forgot to do the thing
trim creek
// JavaScript for the image carousel
const carousels = document.getElementsByClass("carousel-container");
carousels.forEach(carousel => initCarousel(carousel-container));
const images = carousel.getElementsByClass("carousel-images");
let currentIndex = 0;
function showImage(index) {
images.forEach((image, i) => {
if (i === index) {
image.style.display = 'block';
} else {
image.style.display = 'none';
}
});
}
function rotateImages() {
currentIndex = (currentIndex + 1) % images.length;
showImage(currentIndex);
}
// Show the first image
showImage(currentIndex);
// Rotate images every 2 seconds
setInterval(rotateImages, 2000);
Try VSCode, it's 100% free
I personally use, and would recommend, Sublime but it's not 100% free, it's free to use but there's a pop-up each n minutes if you don't get a licence
You can also try brackets, notepad++, etc.
trim creek
okay
I'll look into picking up VS code
I'm always a little iffy on downloading new apps on my computer cause I'm worried it'll slow down lol
I have netbeans, microsoft word and like
a couple browsers
naive owl
As a programmer you'll have to download tones of things
Just don't install malware and you should be fine
And btw, vscode is by microsft if you're worried about it for some reasons
Although, all of them are 100% safe and will not slow down your computer
trim creek
alrighty
okay, so does the code I sent look correct?
I refreshed the page and both carousels dissapeared 😔
naive owl
```
// JavaScript for the image carousel
const carousels = document.getElem...
// JavaScript for the image carousel
const carousels = document.getElementsByClass("carousel-container");
carousels.forEach(carousel => initCarousel(carousel-container));
const images = carousel.getElementsByClass("carousel-images");
let currentIndex = 0;
function showImage(index) {
images.forEach((image, i) => {
if (i === index) {
image.style.display = 'block';
} else {
image.style.display = 'none';
}
});
}
function rotateImages() {
currentIndex = (currentIndex + 1) % images.length;
showImage(currentIndex);
}
// Show the first image
showImage(currentIndex);
// Rotate images every 2 seconds
setInterval(rotateImages, 2000);
If you do (look at the js)
` ``js
it will color the code
```
real quick it seems fine
Although lots of it should be in afunction
trim creek
woah
naive owl
It's an important part of it XD
trim creek
// JavaScript for the image carousel
const carousels = document.getElementsByClass("carousel-container");
carousels.forEach(carousel => initCarousel(carousel-container));
const images = carousel.getElementsByClass("carousel-images");
let currentIndex = 0;
function showImage(index) {
images.forEach((image, i) => {
if (i === index) {
image.style.display = 'block';
} else {
image.style.display = 'none';
}
});
}
function rotateImages() {
currentIndex = (currentIndex + 1) % images.length;
showImage(currentIndex);
}
// Show the first image
showImage(currentIndex);
// Rotate images every 2 seconds
setInterval(rotateImages, 2000);
that is so cool!
i had no idea
naive owl
Using a editor like VS Code will show your code in color too
That helps a lot to read it
trim creek
yeah
I'm kinda confused about what's going on now, though, because both carousels are gone
no div either
should I move the code back to the top of the screen?
the only way it would work earlier was if I had the js at the bottom of my code
under the footer code
naive owl
// JavaScript for the image carousel
const carousels = document.getElementsByClass("carousel-container");
carousels.forEach(carousel => initCarousel(carousel-container));
function initCarousel(carousel) {
const images = carousel.getElementsByClass("carousel-images");
let currentIndex = 0;
function showImage(index) {
// this is overkill you can just get the image by the idnex directly
images.forEach((image, i) => {
if (i === index) {
image.style.display = 'block';
} else {
image.style.display = 'none';
}
});
}
function rotateImages() {
currentIndex = (currentIndex + 1) % images.length;
showImage(currentIndex);
}
// Show the first image
showImage(currentIndex);
// Rotate images every 2 seconds
setInterval(rotateImages, 2000);
}
the rest of my script sits at the top above the body
naive owl
Mmh
Hard to say just like that but yea it should probably be at the bottom or in a onload event
trim creek
is function initcarousel(carousel) missing a {?
naive owl
Yes
naive owl
```js
// JavaScript for the image carousel
const carousels = document.getElemen...
Also, generally, it's better to avoid nested functions (function inside a function)
But for now, it's fine
trim creek
yea thats what i mean
compare my code to the stuff u just sent
and try to make it run after i make sure it matches
naive owl
Don't just copy past my code
I don't even know if it works, it's all done very fast and without all the context
It's a global idea of what you need to do
Although it should pretty much work
trim creek
function initCarousel(carousel) {
const images = carousel.getElementsByClass("carousel-images");
let currentIndex = 0;
}```
should I do the brackets like this?
```js
function initCarousel(carousel) {
const images = carousel.getElementsByClass("carousel-images");
let currentIndex = 0;
function showImage(index) {
// this is overkill you can just get the image by the idnex directly
images.forEach((image, i) => {
if (i === index) {
image.style.display = 'block';
} else {
image.style.display = 'none';
}
});
}
}``` or like this?nest the showimage function in the initcarousel function? or leave it out?
and have the functions seperate?
trim creek
huh, still not appearing
naive owl
Check if there's any js error
I actually think we can't call forEach on getElementsByClass
naive owl
const carousels = document.querySelectorAll(".carousel");
carousels.forEach(carousel => initCarousel(carousel));
function initCarousel(carousel) {
const images = carousel.querySelectorAll(".carousel-image");
let currentIndex = 0;
function showImage(index) {
images.forEach((image, i) => {
if (i === index) {
image.style.display = 'block';
} else {
image.style.display = 'none';
}
});
}
function rotateImages() {
currentIndex = (currentIndex + 1) % images.length;
showImage(currentIndex);
}
// Show the first image
showImage(currentIndex);
// Rotate images every 2 seconds
setInterval(rotateImages, 2000);
}
Try this
trim creek
m'kay
naive owl
how? in the inspect on the website?
Yea you can see all that from the inspector in your browser
trim creek
that's from my previous one
naive owl
Oh
trim creek
i havent updated it with the code u just sent
naive owl
```js
const carousels = document.querySelectorAll(".carousel");
carousels.forEac...
This should work
trim creek
i'll do that now
naive owl
Yea it should work
<div class="carousel">
<img class="carousel-image" src="..." alt="1">
<img class="carousel-image" src="..." alt="2">
<img class="carousel-image" src="..." alt="3">
</div>
<div class="carousel">
<img class="carousel-image" src="..." alt="4">
<img class="carousel-image" src="..." alt="5">
<img class="carousel-image" src="..." alt="6">
</div>
<script>
const carousels = document.querySelectorAll(".carousel");
carousels.forEach(carousel => initCarousel(carousel));
function initCarousel(carousel) {
const images = carousel.querySelectorAll(".carousel-image");
let currentIndex = 0;
function showImage(index) {
images.forEach((image, i) => {
if (i === index) {
image.style.display = 'block';
} else {
image.style.display = 'none';
}
});
}
function rotateImages() {
currentIndex = (currentIndex + 1) % images.length;
showImage(currentIndex);
}
// Show the first image
showImage(currentIndex);
// Rotate images every 2 seconds
setInterval(rotateImages, 2000);
}
</script>
no, it doesn't work
my carousels aren't appearing
// JavaScript for the image carousel
const carousels = document.querySelectorAll(".carousel-container");
carousels.forEach(carousel => initCarousel(carousel-container));
function initCarousel(carousel-container) {
const images = carousel.querySelectorAll(".carousel-image");
let currentIndex = 0;
function showImage(index) {
images.forEach((image, i) => {
if (i === index) {
image.style.display = 'block';
} else {
image.style.display = 'none';
}
});
}
function rotateImages() {
currentIndex = (currentIndex + 1) % images.length;
showImage(currentIndex);
}
// Show the first image
showImage(currentIndex);
// Rotate images every 2 seconds
setInterval(rotateImages, 2000);
}
<td><div class="carousel-container">
<img class="carousel-image" src="PhotoGalleryPor68/Porsche968fv.png" alt="Image 1">
<img class="carousel-image" src="PhotoGalleryPor68/Porsche968sv.png" alt="Image 2">
<img class="carousel-image" src="PhotoGalleryPor68/Porsche968rv.png" alt="Image 3">
</div>
<h3>Car Name Here</h3>
<p>Description Here</p>
<p>
<a href="page2cprelude3.html">View Car Name Gallery</a>
</p>
</td>
</tr>
<tr>
<td><div class="carousel-container">
<img class="carousel-image" src="PhotoGalleryTemp/e320wagonf.png" alt="Image 1">
<img class="carousel-image" src="PhotoGalleryTemp/e320wagonf2.png" alt="Image 2">
<img class="carousel-image" src="PhotoGalleryTemp/e320wagonr.png" alt="Image 3">
<img class="carousel-image" src="PhotoGalleryTemp/e320wagonr2.png" alt="Image 4">
</div>
<h3>1995 E320</h3>
<p>Description Here</p>
this is what I've got
it's not producing anything
naive owl
Where did you put your js?
trim creek
my javascript sits at the bottom of the file currently
naive owl
And make sure to indent your code properly, it's easier to debug
trim creek
should I move it to the top?
naive owl
No just show me the whole file
trim creek
I would but it's really, really big
trim creek
where?
naive owl
I'm not going to tell you, otherwise it's not fun 😆
I'm joking, I'm going to make your find it
Look at each line
One by one
Start by this one
const carousels = document.querySelectorAll(".carousel-container");
Is there any issue there?
trim creek
I don't think so?
naive owl
Yes or no?
trim creek
nope
trim creek
no error
naive owl
You sure?
trim creek
I thought so...am I missing quotations? or the dot?
naive owl
First, arrows like this => are anonymous function, It translate to this
function(carousel) {
initCarousel(carousel-container));
}
See any error there?
There's 2-ish
trim creek
carousels.forEach(carousel-container => initCarousel(carousel-container));```Good you found this error but what is the second?
The second is trickier
Is this carousel-container a valid variable name?
trim creek
I thought it was
naive owl
;compile
var carousel-container = "something";
pale jungleBOT
naive owl
No class name and id can have dash but javascript variables can't
Anyway, here, it doesn't matter
Just rename the variable, that's all you have to do
trim creek
```html
<td><div class="carousel-container">
<img class="carousel-image"...
do I have to rename it here aswell?
trim creek
so then why doesn't the original variable name of carousel work? it doesn't have a dash
naive owl
You need to think of them as 2 completely separated things
trim creek
but I don't change the name of them in the query selector, right?
naive owl
You could easily do that
const carousels = document.querySelectorAll(".carousel-container");
carousels.forEach(ajjdnsakjdnasmndjans => initCarousel(ajjdnsakjdnasmndjans));
because it's calling upon the html class and creating a variable to call it for my script?
naive owl
You could easily do that
```js
const carousels = document.querySelectorAll(".car...
This is 100% legal
naive owl
because it's calling upon the html class and creating a variable to call it for ...
Mmh not really
trim creek
// JavaScript for the image carousel
const carousels = document.querySelectorAll(".carousel-container");
carousels.forEach(carouselContainer => initCarousel(carouselContainer));
function initCarousel(carouselContainer) {
const images = carousel.querySelectorAll(".carousel-image");
let currentIndex = 0;
is this okay?
naive owl
This document.querySelectorAll(".carousel-container"); will fetch the content in the html file that matches elements that have a class called carousel-container, the html object will be assigned in the carousels constant.
function initCarousel(carouselContainer) {
const images = carousel.querySelectorAll(".carousel-image");
let currentIndex = 0;
There's an issue here
More specifically here const images = carousel.querySelectorAll(".carousel-image");
Caused by function initCarousel(carouselContainer) {
trim creek
oh, it has to be
const images = carouselContainer.querySelectorAll(".carousel-image");```YESSSSS IT WORKS!!!!!!
thank you so much for helping me
i have the biggest smile on my face seeing this finally function as intended
you have no idea how much the help means to me
especially considering how long you spent working through it with me
i acknowledge (and applaud) ur patience and the time you spent out of your day to help me solve it
naive owl
It's a pleasure, I know it's a great feeling when everything start working
trim creek
it really is
naive owl
I just hope that you understood a bit more what were the issues and what you did