CODEWITHSUNDEEP
javascript
Mirza Muneeb
Mirza Muneeb

Reputation: 136

Javascript based simple slider not working correctly

I am trying to make a really simple slider. All is working correctly except one thing. The problem is that it's not loading the image named as 'b.jpg'. If i rename the same picture with any other name it loads it but it's not loading any image with name 'b.jpg'. Here's my code. Please tell me if something is wrong.

<!DOCTYPE html>
<html>
<head>
    <title>Slider ~ Javascript</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <img id="imgSlider">

    <script type="text/javascript" src="script.js"></script>

</body>
</html>

Here's script.js : 

var imgLinks = ['a.jpg', 'b.jgp', 'c.jpg', 'd.jpg', 'e.jpg'];
var mySlider = document.getElementById('imgSlider');
var imgIndex = 0;  
function changeImage() {
    mySlider.setAttribute('src', imgLinks[imgIndex]);
    imgIndex++;
    if (imgIndex >= imgLinks.length) {
        imgIndex = 0;
    };
}

var intervals = setInterval(changeImage, 2000);
mySlider.onclick = function (c) {
    clearInterval(intervals);
}

Upvotes: 0

Views: 32

Answers (1)

Strikers
Strikers

Reputation: 4776

your code has b.jgp and all others are jpg. 

imgLinks = ['a.jpg', 'b.jgp', 'c.jpg', 'd.jpg', 'e.jpg'];

correct it to b.jpg it will work fine

imgLinks = ['a.jpg', 'b.jpg', 'c.jpg', 'd.jpg', 'e.jpg'];

Upvotes: 1

Related Questions