Kamran Kamran - 4 months ago 12
HTML Question

I'm making an image slider but only the first image displays it does not display the rest

I'm making an image slider with images that hava name ending with the numbers 1 to 5 but only the first image displays. the path is fine and i've tried displaying each picture separately and that worked ...




<head>

<title>jQuery Image Slider</title>

<script src = "jquery-3.0.0.js"></script>

<style>

#container {
height: 300px;
width: 1350px;
margin: 20px auto;
position: relative;
}

#img {
height: 300px;
width: 1350px;
position: absolute;
}

#left-holder {
height: 100px;
width: 100px;
position: absolute;
left: 0px;
top: 100px;
}

#right-holder {
height: 100px;
width: 50px;
position: absolute;
right: 0px;
top: 100px;
}

.left {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
left: 0px;
}

.right {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
left: 0px;
}

</style>

<script>

var imageCount = 1;
var totalImages = 5;

function slide(x) {
var Image = document.getElementById("img");
imageCount = imageCount + x;
if (imageCount > totalImages)
imageCount = 1;
if (imageCount < 1)
imageCount = totalImages;
Image.src = "E:\JavaScript work\Web Project\carousel"+imageCount+".jpg";
}

window.setInterval(function slideAuto() {
var Image = document.getElementById("img");
imageCount = imageCount + 1;
if (imageCount > totalImages)
imageCount = 1;
if (imageCount < 1)
imageCount = totalImages;
Image.src = "E:\JavaScript work\Web Project\carousel"+imageCount+".jpg";
}, 1000);

</script>

</head>

<body>

<div id = "container">

<img id = "img" src = "E:\JavaScript work\Web Project\carousel1.jpg" />

<div id = "left-holder">
<img class = "left" onClick = "slide(-1)" src = "E:\JavaScript work\Web Project\left.png" />
</div>

<div id = "right-holder">
<img class = "right" onClick = "slide(1)" src = "E:\JavaScript work\Web Project\right.png" />
</div>

</div>

</body>



Answer

Problem: You are using backslash \ in src. Javascript uses backslash to escape.

Image.src = "E:\JavaScript work\Web Project\carousel"+imageCount+".jpg";

Solution: Either use forward slash / or if you still want to use backslash you can use \\

Comments