139
rated 0 times
[
140]
[
1]
/ answers: 1 / hits: 18043
/ 11 Years ago, fri, april 26, 2013, 12:00:00
I was searching for a simple carousel example in Google and I came across one and its link is :
http://jsfiddle.net/paulmason411/TZy7A/2/
<!DOCTYPE html>
<html>
<head>
<script src=//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js></script>
<script>
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds
function slides(){
return $slider.find($slide);
}
slides().fadeOut();
// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
// auto scroll
$interval = setInterval(
function(){
var $i = $slider.find($slide + '.active').index();
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
if (slides().length == $i + 1) $i = -1; // loop to start
slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
}
, $transition_time + $time_between_slides
);
</script>
<style>
.slider {
margin: 10px 0;
width: 580px; /* Update to your slider width */
height: 250px; /* Update to your slider height */
position: relative;
overflow: hidden;
}
.slider li {
display: none;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<ul class=slider>
<li>
<img src=http://lorempixel.com/580/250/nature/1> <!-- random image -->
</li>
<li>
<img src=http://lorempixel.com/580/250/nature/2> <!-- random image -->
</li>
<li>
<img src=http://lorempixel.com/580/250/nature/3> <!-- random image -->
</li>
<li>
<img src=http://lorempixel.com/580/250/nature/4> <!-- random image -->
</li>
</ul>
</body>
</html>
However I created a notepad file with .html extension and added all these code there and tried to open it in the browser and does not work. Could you please let me know why it did not work for me.
This is the code, this is the exact copy of what you see in the above link.
More From » jquery
