I'm trying to implement a slider using Javascript only (no external libraries like jQuery).
Here is my HTML file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<script language="javascript" type="text/javascript" src="slider.js"></script>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container main-container">
<div id="container">
<img id='slider-img' src='images/img1.png'>
<div id='left_holder'><img onclick="slider(-1)" class='left' src="images/arrow_left.png"></div>
<div id='right_holder'><img onclick="slider(1)" class='right' src="images/arrow_right.png"></div>
</div>
</div>
</body>
</html>
JS slider file:
(function() {
slider();
})();
function slider(element) {
var imagecount = 1;
var totalimage = 11;
var image = document.getElementById("slider-img");
imagecount = imagecount + element;
image.src = "images/img" + imagecount + ".png";
}
I'm getting an error at image.src cannot set property src of null because document.getElementById("slider-img"); can't get the element img of the html code. Anybody have some insight on this issue?
var imagecount = 1;
function slider(element) {
var totalimage = 11;
var image = document.getElementById("slider-img");
imagecount = imagecount < totalimage ? imagecount + Number(element) : 1;
if (imagecount < 1) {
imagecount = 1;
};
image.src = "images/img" + imagecount + ".png";
console.log(imagecount)
}
window.onload = function() {
slider(0)
}<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<script language="javascript" type="text/javascript" src="slider.js"></script>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container main-container">
<div id="container">
<img id='slider-img' src='images/img1.png'>
<div id='left_holder'>
<img onclick="slider(-1)" class='left' src="images/arrow_left.png">
</div>
<div id='right_holder'>
<img onclick="slider(1)" class='right' src="images/arrow_right.png">
</div>
</div>
</div>
</body>
</html>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments