I have the following code that creates a slideshow with Javascript.
The HTML
<div id="buttons">
<a href="#" id="prev">prev</a>
<a href="#" id="next">next</a>
<div class="clear"></div>
</div>
<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>
The Javascript
<script>
$(document).ready(function() {
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>
This code automatically slides through the images.
I am am trying to add a previous and next button functionality to it, so that users can manually flip through the images. I would like to be an infinite carousel.
How do I do this with fade, as I have it now?
$('#next').click(function() {
}
EDIT
I tried this:
<script>
$(document).ready(function() {
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);
}
$('.slider img:gt(0)').hide();
$('#next').click(function() {
$('.slider img:first-child').fadeOut().next().fadeIn().end().appendTo('.slider');
});
$('#prev').click(function() {
$('.slider img:first-child').fadeOut();
$('.slider img:last-child').prependTo('.slider').fadeOut();
$('.slider img:first-child').fadeIn();
});
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>
Now the manual buttons work, but the automatic scrolling of the slides on interval doesn't work anymore, the slides only change when the buttons are clicked. How do I also keep my automatic slideshow functionality as it worked before?
cracker :
Try Like\n\n$('.img-wrap img:gt(0)').hide();\n\n$('.next').click(function() {\n $('.img-wrap img:first-child').fadeOut().next().fadeIn().end().appendTo('.img-wrap');\n});\n\n$('.prev').click(function() {\n $('.img-wrap img:first-child').fadeOut();\n $('.img-wrap img:last-child').prependTo('.img-wrap').fadeOut();\n $('.img-wrap img:first-child').fadeIn();\n});\n\n\nDemo",
2014-06-25T04:33:53