Carousal help ( right arrow button help)

HTML-CSS
1 
type or paste code here
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
    <div id="container" style="width:50%; margin:auto;">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-100" src="image1.jpg" alt="First slide">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="image2.jpg" alt="Second slide">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="image3.jpg" alt="Third slide">
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next" id="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <script src="img.js"></script>
</body>


</html>

var images = document.querySelectorAll("img");

function rightarrow() {
    var currentpic = images[0];
    for (var i = 0; i < images.length; i++) {
        if (i == images.length - 1) {
            currentpic = images[0]
        }
        else {
            currentpic = images[i];
        }

    }
}
  


var next = document.getElementById("next")
if (next.addEventListener) {
    next.addEventListener("click", rightarrow, false);
} else if (next.attachEvent) {
    next.attachEvent("onclick", rightarrow);
}

I am trying to get my right arrow button to work its not working for reason anyone know why

thanks

2

What is rightarrow supposed to accomplish, and what is it actually doing?

Currently, your right arrow function will always end with currentpic = images[0] because it will always run through all images, but when it gets to the last it just sets currentpic back to the first image.

3

so do i remove the for loop?

4

Is this part of a challenge, and if so, can you link the URL to it? I’m not familiar with the Carousal, or I’ve just forgotten it. I’m not sure what result you’re looking for.

5

i am just trying to when i clikc the right arrow the image changes to next pic

6 
var images = document.querySelectorAll("img");
var i = 0;
function rightarrow() {
    var currentpic = images[0];
   
    
        if (i == images.length - 1) {
            currentpic = images[0].src;
        }
        else {
            currentpic = images[i + 1].src;
            i++;
        }

    }

the image are not dispalying but when i insepct it its showing it will change

7

Is this a challenge and if so is there a link?

Hard to provide a detailed answer without knowing how the rest of the page is setup, but yeah, sounds like you don’t want a for loop in there. I’d think you’d want a global variable that keeps track of your current image, and then the right and left arrows would just increment/decriment that pointer to move back or forward through images.

8

no this isnt a challenge im doing it myself but needed help

 var images = document.querySelectorAll("img");
var i = 0;
function rightarrow() {
    var currentpic = images[0];
   
    
        if (i == images.length - 1) {
            currentpic = images[0].src;
        }
        else {
            currentpic = images[i + 1].src;
            
        }
    i++;
    }

is this in right direction

9

Seems so. Currentpic though is just a variable that will now contain a URL for the image you are wanting to show… so to displaythat image on your page you’d need a line at the end like:

document.getElementById(“myimage”).src = currentpic

Granted, thats just a quick answer, and I’m not exactly sure .src is the particular attribute you’d need to update.

10 
function rightarrow() {
    var currentpic = document.getElementById("img-" + i);

        if (i == (images.length) - 1) {
           // currentpic = images[0];
            currentpic=document.getElementById("img-1")
        }
        else {
            //currentpic = images[i + 1];
            currentpic = document.getElementById("img-" + i);
        }
    i++;
    }

the code is correct i think but the pictures are not changing only url is changing
how can i fix that please

11

I’m not sure if you can just change the src attribute of an image tag and have it instantly update… may have to do some sort of refresh or something. Other options would be to preload the images, then just show/hide them, but explaining how to set that up (which I wouldn’t know right of the top of my head) would be way to much for a forum answer. Those are some avenues to research, but sorry I don’t have an easy answer. Hopefully someone else can chime in with a quick answer solution, or you may want to look online for image carousal tutorials or something.

12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.