Laurens Laurens - 1 month ago 5
CSS Question

issue creating sliders with jQuery

I'm currently working through this tutorial from helpingdev, but have come up against a brick wall - I've followed every step so far as i can tell and have the interface working - however when i run the page the image doesn't change, it simply stays on the first one.

the video is over three years old, so I'm guessing something in the syntax just need's to be changed - i just can't figure out what even with chrome dev tools.

Thanks for your help.

Here's the html, css, and js for the page:

html:

<!DOCTYPE>
<html>
<head>
<title>Slider example.</title>
<link rel="stylesheet" href="../css/slider.css">
</head>
<body>
<div class="wrapper">
<div id="slider">
<img id="1" src="../images/tromso.jpg">
<img id="2" src="../images/fjord.jpg">
<img id="3" src="../images/tromso_aerial.jpg">
<img id="4" src="../images/sognefjord.jpg">
</div>

<a href="#" class="left">Previous</a>
<a href="#" class="right">Next</a>

</div>

<script src="../js/jquery.js"></script>
<script src="../js/slider.js"></script>

</body>
</html>


css:

.wrapper {
width: 600px;
margin: 0 auto;
}

#slider {
width: 600px;
height: 400px;
overflow: hidden;
margin: 30px auto;
}

#slider > img {
width: 600px;
height: 600px;
float: left;
display: none;
}

a {
padding: 5px 10px;
background-color: #F0F0F0;
margin-top: 30px;
text-decoration: none;
color: #666;
}

a.left {
float: left;
}

a.right {
float: right;
}


js:

sliderInt = 1;
sliderNext = 2;

$(document).ready(function(){
$("#slider > img#1").fadeIn(300);
startSlider();

});

function startSlider(){
count = $("#slider > img").length;

loop = setInterval(function(){

if(sliderNext > count){
sliderNext = 1;
sliderInt = 1;

}

$("slider > img").fadeOut(300);
$("#slider > img#" + sliderNext).fadeIn(300);

sliderInt = sliderNext;
sliderNext = sliderNext + 1;

},3000);


}

Answer

This $("slider > img").fadeOut(300);

Should be

$("#slider > img").fadeOut(300);

You missed a # in front of slider

Also remove the code loop = you are assigning a function to the loop variable but never executing it. So what you need is to run it rather than assigning it. Removing the assignment will execute that block of code.

Comments