My carousel runs well except bullet javascipt

JavaScript
1

I put bullet. it’s ok. Each bullet is linked to correct image. That’s ok. but if i want to use bullet to change of image. It isn’t ok. What the issue ? Thanks for your help. I’ve tried to put addEventListenre but it broke my code. and setInterval don’t work to. It is an array where i takes data to build my code. Jsbin console indicate that it cannot read the dots.appendChild( dot) because it is null. But my code runs except maybe the part of function selected. Maybe it is that that i have to update. When i click on left or right the bullet change of position but when i click on bullet directly nothing

here is the html code :

<div id="banner">
            <img src="./assets/images/slideshow/slide1.jpg" alt="Banner print-it">
                    <p>Impressions tous formats <span>en boutique et en ligne</span></p>
            <img class="arrow_left" src="./assets/images/arrow_left.png" alt="image fleche gauche">
            <img class="arrow_right" src="./assets/images/arrow_right.png" alt="image fleche droite">
        <div class="dots">
        </div>
    </div>

const slides = [
    {
        "image":"slide1.jpg",
        "tagLine":"Impressions tous formats <span>en boutique et en ligne</span>"
    },
    {
        "image":"slide2.jpg",
        "tagLine":"Tirages haute définition grand format <span>pour vos bureaux et events</span>"
    },
    {
        "image":"slide3.jpg",
        "tagLine":"Grand choix de couleurs <span>de CMJN aux pantones</span>"
    },
    {
        "image":"slide4.png",
        "tagLine":"Autocollants <span>avec découpe laser sur mesure</span>"
    }
]
const banner = document.getElementById('#banner');
const left = document.querySelector('.arrow_left');
const right = document.querySelector('.arrow_right');
const imageElement = document.querySelector('#banner > img');
const nomElement = document.querySelector('#banner > p');

const numberOfSlide = slides.length;

let i = 0;
/* Create bullet (dot) */ 
function dots() {
    const dots = document.querySelector('.dots');
    for (let i = 0; i < numberOfSlide; i++) {
    const dot = document.createElement('span');
    dot.classList.add('dot');
    dots.appendChild(dot);
    if (i == 0) { 
        dots.children[i].classList.add('dot_selected');
    }
    }
 }
dots();

/* Link bullet to image (dot) */
 function selected() {
    const dot = document.getElementsByClassName('dot');
    for (let i = 0; i < dot.length; i++) {
        dot[i].classList.remove('dot_selected');
    }
    dot[i].classList.add('dot_selected');
 }
/* Link tagline and image to HTML*/
function showSlide() {
    imageElement.src = `./assets/images/slideshow/${slides[i].image}`;
    nomElement.innerHTML = slides[i].tagLine;
    console.log(imageElement);
    console.log(nomElement);
    selected();
}
/* Call function to move left */
left.addEventListener("click", function () {
    if (i == 0) {
        i = numberOfSlide - 1;
    }
    else {
        i--;
    }
        console.log(left);
        showSlide();
});
/* Call function to move right */   
right.addEventListener("click", function () {
    if (i == numberOfSlide - 1) {
        i = 0;
    } else {
            i++;
    }
    console.log(right);
    showSlide();
    console.log(showSlide);
});

interval = setInterval(showSlide, 5000);
2

It would be nice if you could put your project on replit or something like it, so we can test it and see the images.

The other option is to put your project in a repo on GitHub and provide a link to the repo.

When I tested your app and comment out the setInterval line , it does appear that clicking on the left and right buttons does change the image (or at least the src and the tagline) to the correct ones based on the order of the slides array.

3

here is my reposotory github :

thanks for your help

4

I put your app in a replit and do not see what the issue is. I can click on either arrow button and go to correct previous/next slide (containing the image and text). See below for demo I made of your project.

Peek 2023-01-14 13-26

If you are wanting to be able to click on specific dot for a slide and have it load that slide’s image and text, then you could add a click event listener to each dot (inside the showDots function for loop and give each a unique id l(i.e. span0, span1, etc…). The event listener callback function would need to access the unique id of the dot clicked and capture the end number (representing the index of the slides array) and assign this value to i and then execute showSlide function.

5

I didn’t understand the bullets don’t work that the problem, the arrow yes. What is a replit ?

6

In the previous reply, I put a link to it.

7

how to code that i don’t know i’m a biginner in javascript. I put 15 days to write that code. I put before that code :

dot.addEventListener(‘click’, function(){

i = i;

selected();

})

but it doesn’t work. How to do what you advise.

8

This is redundant, because you are just assigning the value of i to i. Also the value of iafter showDots function runs will be the length of array minus 1. Do what I instructed you to do in a previous reply and you will achieve the desired result.

9

i cannot access to the replit

replit
replit1920×1080 58 KB

10

It does not matter. It was just the same code you already had. I did not change it. I did make the changes I suggested though and it works as expected.

11

ok thanks I will try tomorow. have a nice day.

12

I’ve been just try what you did and the bullet move but not the image. normally it’s one bullet for each image. there are four bullet and four image in the array.I’m going to see that and I will do a reply. Thanks a lot

13

I updated my suggested solution to how execute showSlide vs. selected.

14

Thanks a lot. Problem solved. Have a nice day

15

Good.

See the following replit for how I implemented it:

Print-it-JS - Replit