daneh daneh - 4 months ago 11
jQuery Question

Building a jquery slideshow by changing the margin

I'm trying to create jquery slideshow from an array of images in php. I've got the html and css set up, but the javascript isn't doing anything. If what I am trying to do isn't possible or there is a better alternative route I'll happily take that advice. Any help would be appreciated!

PHP/HTML

$pic_array = array();
$titles = array();
$descriptions = array();
while ($row = $result->fetch_assoc()) {
$pic_array[$count] = $row['pic_url'];
$titles[$count] = $row['title'];
$descriptions[$count] = $row['description'];
$count++;
}
echo "<div id='slider'>
<ul class='slides'";
for ($x=0; $x < count($pic_array); $x++) {
echo " <li class='slide'><img src= " . $dir . $pic_array[$x] . " /></li>";
}
echo " </ul>
</div";


CSS

#slider {
width: 450px;
height: 250px;
overflow:hidden;
}
#slider .slides {
display: block;
width:10000px;
height: 250px;
margin:0;
padding:0;

}
#slider .slide {
float: left;
list-style-type: none;
width: 450px;
height: 250px;
}
img {
width: 450px;
height: 250px;
}


Javascript

$(function() {

setInterval (function () {
$('.slider .slides').animate({'margin-top':'-=250px'}, 1000);
}, 3000);
});

Answer

You have wrong jquery selector. It should be $('#slider .slides') because slider is an id, not a class.

Also, you are missing closing angle bracket in the ul element: ...<ul class='slides'>"; and in the div#slider element: ...</div>";