I'm trying to design a slideshow using jQuery and I've come up with the code below, however, when I run it, it only cycles through one slide and then ceases to do anything further. How can I get the pictures to cycle through?
jQuery:
$(function() {
setInterval("rotateImages()", 3000);
});
function rotateImages() {
var CurrentPhoto = $('#slideshow .current');
var NextPhoto = CurrentPhoto.next();
if (NextPhoto.length == 0) {
NextPhoto = $('#slideshow div:first');
}
CurrentPhoto.removeClass('current').addClass('previous');
NextPhoto.css({ opacity: 0.0 }).addClass('current')
.animate({ opacity: 1.0 }, 1000,
function() {
CurrentPhoto.removeClass('previous');
}
}
HTML:
<div id="slideshow">
<div class="current"><img src="image1.jpg" alt="Img" height="382" width="594"> </div>
<div><img src="image2.jpg" alt="Img" height="382" width="594"> </div>
<div><img src="image3.jpg" alt="Img" height="382" width="594"></div>
<div><img src="image4.jpg" alt="Img" height="382" width="594"></div>
<div><img src="image5.jpg" alt="Img" height="382" width="594"></div>
</div>
...
CSS:
#slideshow div {
z-index: 0;
position: absolute;
margin: 0px 0px 0px 362px;
}
#slideshow div.previous {
z-index: 1;
}
#slideshow div.current {
z-index: 2;
}
There are two errors in your script:
There is a missing parenthesis (something that you could have easily see in the JavaScript console) to close the animate function.
NextPhoto == 0 is incorrect. You want to check if the length of NextPhoto is 0 or not, but not NextPhoto itself.
Fix those 2 things, and the problems is solved:
$(function() {
setInterval("rotateImages()", 3000);
});
function rotateImages() {
var CurrentPhoto = $('#slideshow .current');
var NextPhoto = CurrentPhoto.next();
if (NextPhoto.length == 0) {
NextPhoto = $('#slideshow div:first');
}
CurrentPhoto.removeClass('current').addClass('previous');
NextPhoto.css({ opacity: 0.0 }).addClass('current')
.animate({ opacity: 1.0 },
1000,
function() {
CurrentPhoto.removeClass('previous');
});
}
See it on this JSFiddle: http://jsfiddle.net/h7afu5ex/
function rotateImages() {
var CurrentPhoto = $('#slideshow .current');
var NextPhoto = CurrentPhoto.next();
if (NextPhoto.length == 0) {
NextPhoto = $('#slideshow div:first');
}
CurrentPhoto.removeClass('current').addClass('previous');
NextPhoto.css({ opacity: 0.0 }).addClass('current')
.animate({ opacity: 1.0 }, 1000,
function() {
CurrentPhoto.removeClass('previous');
});
};
$(function() {
setInterval(rotateImages, 3000);
});
i have changed few things
1. function invocation in setinterval
2. moving function declaration above and then refer to that function
3. completed braces at the end of the rotateImages function
Related
I am working on an image slideshow, and the fadeOut() functionality working with every image change, but the next image appears abruptly. I want it to fade in. I can't seem to get it working.
Here is the code without any fadeIn():
HTML:
<div id="backgroundChanger">
<img class="active" src="background1.jpg"/>
<img src="background2.jpg"/>
<img src="background3.jpg"/>
CSS:
#backgroundChanger{
position:relative;
}
#backgroundChanger img{
position:absolute;
z-index:-3
}
#backgroundChanger img.active{
z-index:-1;
}
Javascript:
function cycleImages(){
var $active = $('#backgroundChanger .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#backgroundChanger img:first');
$next.css('z-index',-2);
$active.fadeOut(1500,function(){
$active.css('z-index',-3).show().removeClass('active');
$next.css('z-index',-1).addClass('active');
});
}
$(document).ready(function(){
setInterval('cycleImages()', 7000);
})
I'd recommend something like this for your interval function:
window.setInterval(function (){
var images = $('#backgroundChanger img');
var active, next;
images.each(function(index, img) {
if($(img).hasClass('active')) {
active = index;
next = (index === images.length - 1) ? 0 : index + 1;
}
});
$(images[active]).fadeOut(1000, function() {
$(images[next]).fadeIn(1000);
});
$(images[next]).addClass('active');
$(images[active]).removeClass('active');
}, 3000);
And this is all you'd need for your css:
#backgroundChanger img:first-child {
display: block;
}
#backgroundChanger img {
display: none;
}
And keep the same HTML and you should be good to go!
You can fadeIn() the next image in the callback of fadeOut() as shown below:
$(window).load(function() {
var $slider = $("#backgroundChanger"),
$slides = $slider.find("img"),
$firstSlide = $slides.first();
function cycleImages() {
var $active = $('#backgroundChanger .active'),
$next = ($active.next().length > 0) ? $active.next() : $firstSlide;
$active.fadeOut(1000, function() {
$active.removeClass('active');
$next.fadeIn(1000).addClass('active');
});
}
setInterval(cycleImages, 3000);
})
#backgroundChanger img {
position: absolute;
width: 150px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="backgroundChanger">
<img class="active" src="http://i46.tinypic.com/2epim8j.jpg" />
<img src="http://i49.tinypic.com/28vepvr.jpg" />
<img src="http://i50.tinypic.com/f0ud01.jpg" />
</div>
Notes:
Since we're dealing with images, It's better to use load() handler than ready() to make sure the slide show starts after the images are loaded
You can slightly improve the performance by caching the elements accessed frequently
You don't have to play with z-index property at all since both fadeIn() and fadeOut() changes the elements `display property itself
Basically I am just trying to do random jQuery stuff for educational purpose, and here is my very simple slider. I want it to work automatically and also with controls (little arrows to scroll to next/previous slider). The only problem that I have right now is that when you press the arrow, the function that automatically switches slides every 5 seconds is still counting these 5000 ms, so the next slide appears faster then desired. What I want is to make those arrows reset the timer, so you press the arrow -> next slide appears -> only after 5 seconds later the slide switches again.
Sorry for sloppy explanation, hope I made it clear enough.
Here's the jsfiddle: http://jsfiddle.net/cA9aW/
and here is the code
HTML
<body>
<div id="wrapper">
<header>
<h1>Simplest Sliding Image Slider</h1>
</header>
<div id="content">
<div id="slider_container">
<div id="slider">
<div class="slides" id="slide1">
<img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt="" />
</div>
<div class="slides" id="slide2">
<img src="http://s2.postimg.org/66f6us2wl/cats2.jpg" alt="" />
</div>
<div class="slides" id="slide3">
<img src="http://s2.postimg.org/ai3sjs9th/cats3.jpg" alt="" />
</div>
</div>
</div>
</div>
<footer></footer>
</div>
</body>
JS
jQuery(document).ready(function($) {
// start slider function
startSlider();
// set width and step variables and add active class to first slider
var slideWidth = $('.slides').width();
$('#slide1').addClass('slides active');
// actual function
function startSlider() {
looper = setInterval(function() {
// remove and add class active
$('.active').removeClass('active').next().addClass('active');
// animation expression
$('.active').animate({'left': '-=' + (slideWidth) + 'px'}, 500);
$('.active').siblings().animate({'left': '-=' + (slideWidth) + 'px'}, 500);
// return to first slide after the last one
if($('.active').length == 0) {
$('#slide1').addClass('active');
$('.slides').animate({'left': 0}, 500);
}
}, 5000); // interval
// adding controls
$('.slides').append("<div class='controls'><a class='control_left' href='#'></a><a class='control_right' href='#'></a></div>");
// remove unnecessary controlls on first and last slides
$('.slides:nth-child(1) a.control_left').remove();
$(".slides:nth-child(" + $('.slides').length + ") a.control_right").remove();
// add functionality to controls
$('.control_left').on('click', function() {
$('.active').removeClass('active').prev().addClass('active');
$('.active').animate({'left': '+=' + (slideWidth) + 'px'}, 500);
$('.active').siblings().animate({'left': '+=' + (slideWidth) + 'px'}, 500);
});
$('.control_right').on('click', function() {
$('.active').removeClass('active').next().addClass('active');
$('.active').animate({'left': '-=' + (slideWidth) + 'px'}, 500);
$('.active').siblings().animate({'left': '-=' + (slideWidth) + 'px'}, 500);
});
}
});
Thx a lot in advance
Slideshow with prev/next buttons, autoslide, pause on hover
Instead of jQuery's .animate() and animating the left CSS property, use the GPU accelerated CSS transform: translateX for the animation on a common slides wrapper element
$(".SlideShow").each((i, EL) => {
const
$parent = $(EL),
$slides = $(".SlideShow-slides", EL),
$item = $(".SlideShow-item", EL),
$prevNext = $(".SlideShow-btn", EL),
tot = $item.length,
mod = (n, m) => ((n % m) + m) % m;
let
c = 0,
itv;
const prev = () => {c = mod(--c, tot); anim();};
const next = () => {c = mod(++c, tot); anim();};
const anim = () => $slides.css({transform: `translateX(-${c * 100}%)`});
const stop = () => clearInterval(itv);
const play = () => itv = setInterval(next, 4000);
$prevNext.on("click", (ev) => $(ev.currentTarget).is(".next") ? next() : prev());
$parent.hover(stop, play);
play(); // start
});
.SlideShow {
position: relative;
overflow: hidden;
width: 100%;
height: 180px;
}
.SlideShow-slides {
display: flex;
flex-flow: row-nowrap;
height: 100%;
width: 100%;
transition: transform 0.7s; /* Animation duration here */
}
.SlideShow-item {
min-width: 100%;
}
.SlideShow-item>img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.SlideShow-btn {
position: absolute;
top: 0;
z-index: 1;
width: 50px;
height: 100%;
background: rgba(255, 255, 255, 0.5);
opacity: 0.5;
border: 0;
cursor: pointer;
}
.SlideShow-btn:hover {
opacity: 1;
}
.SlideShow-btn.next {
right: 0px;
}
<div class="SlideShow">
<div class="SlideShow-slides">
<div class="SlideShow-item"><img src="http://placehold.it/600x400/0bf?text=A" alt=""></div>
<div class="SlideShow-item"><img src="http://placehold.it/600x400/fb0?text=B" alt=""></div>
<div class="SlideShow-item"><img src="http://placehold.it/600x400/0fb?text=C" alt=""></div>
</div>
<button type="button" class="SlideShow-btn prev"></button>
<button type="button" class="SlideShow-btn next"></button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
What you need to do it to clear the interval in the button clicks and start interval again.
function resetInterval(){ //add this method which wil reset the timer
window.clearInterval(looper); //clear current interval
looper = setInterval(autoSlide, 5000); //start auto slide again.
}
function autoSlide(){ //move this to a function from being anonymous
// remove and add class active
$('.active').removeClass('active').next().addClass('active');
// animation expression
$('.active').animate({
'left': '-=' + (slideWidth) + 'px'
}, 500);
$('.active').siblings().animate({
'left': '-=' + (slideWidth) + 'px'
}, 500);
// return to first slide after the last one
if ($('.active').length === 0) {
$('#slide1').addClass('active');
$('.slides').animate({
'left': 0
}, 500);
}
}
and
$('.control_left').on('click', function () {
resetInterval(); //reset it
....
$('.control_right').on('click', function () {
resetInterval(); //reset it
....
Demo
i have found this simple jQuery code for a slideshow below from this blog.
http://leavesofcode.net/2012/08/17/simple-slideshow/
It perfectly works in the project i am working on right now, where i can call the images with jQuery load() function and the slideshow still works. Although i would like to implement a previous and next button in the same code if its possible. Any help would be really appreciated. Please help thanks.
Here is the code: http://jsfiddle.net/mblase75/CRUJJ/
<script>
$(document).ready(function() {
setInterval(function() {
var $curr = $('.slideshow img:visible'), // should be the first image
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
// if there isn't a next image, loop back to the first image
$next.css('z-index',2).fadeIn('slow', function() { // move it to the top
$curr.hide().css('z-index',0); // move this to the bottom
$next.css('z-index',1); // now move it to the middle
});
}, 6000); // milliseconds
});
</script>
<div class="slideshow">
<img src="first-image.jpg" width="500" height="100" alt="first image">
<img src="second-image.jpg" width="500" height="100" alt="second image">
<img src="third-image.jpg" width="500" height="100" alt="third image">
<img src="fourth-image.jpg" width="500" height="100" alt="fourth image">
</div>
<style>
.slideshow {
position: relative; /* necessary to absolutely position the images inside */
width: 500px; /* same as the images inside */
height: 100px;
}
.slideshow img {
position: absolute;
display: none;
}
.slideshow img:first-child {
display: block; /* overrides the previous style */
}
</style>
You'll need to create functions for getNext and getPrev and attach those as event handlers to the elements you want to move you forward and backward through the slideshow.
I created a common transition function which is shared by both the getNext and getPrev functions so that the transition code can be shared.
In the below example, clicking the next or previous buttons will pause the slideshow, though it would be easy to change it to continue the automatic transitions.
Working Demo
var interval = undefined;
$(document).ready(function () {
interval = setInterval(getNext, 2000); // milliseconds
$('#next').on('click', getNext);
$('#prev').on('click', getPrev);
});
function getNext() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
transition($curr, $next);
}
function getPrev() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
transition($curr, $next);
}
function transition($curr, $next) {
clearInterval(interval);
$next.css('z-index', 2).fadeIn('slow', function () {
$curr.hide().css('z-index', 0);
$next.css('z-index', 1);
});
}
Use your code in click event of next button.
Something like this:
$("#button_id").click(function(){
all your lines in **setInterval**
});
For previous button use .prev instead of .next
responsive slideshow free jquery script
I used the above script in a project recently and its responsive, lightweight, fully customizable with or without buttons. My recommendation..
Add a couple of img in your HTML like this:
<div class="slideshow">
<img src="first-image.jpg" width="500" height="100" alt="first image">
<img src="second-image.jpg" width="500" height="100" alt="second image">
<img src="third-image.jpg" width="500" height="100" alt="third image">
<img src="fourth-image.jpg" width="500" height="100" alt="fourth image">
</div>
<img src="prev.jpg" width="50" height="50" id="imgPrev">
<img src="next.jpg" width="50" height="50" id="imgNext">
and change your javascript like this:
$(document).ready(function() {
$("#imgNext").click(function() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
$next.css('z-index',2).fadeIn('slow', function() {
$curr.hide().css('z-index',0);
$next.css('z-index',1);
});
});
$("#imgPrev").click(function() {
var $curr = $('.slideshow img:visible'),
$prev = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
$prev.css('z-index',2).fadeIn('slow', function() {
$curr.hide().css('z-index',0);
$prev.css('z-index',1);
});
});
set
Interval(function() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
$next.css('z-index',2).fadeIn('slow', function() {
$curr.hide().css('z-index',0);
$next.css('z-index',1);
});
}, 6000); // milliseconds
});
I tried it with your code on fiddler and it works :)
I know this is old, but correct the below:
$('.slideshow :first-child').fadeOut(1000).next('img').fadeIn(1000).end().appendTo('#slideshow');
.slideshow {
width: 100%;
position: relative;
height: auto;
}
.slideshow img:first-child { position:relative; } /*auto height adjust*/
.slideshow img {
top: 0;
left: 0;
width: 100%;
max-width: 600px;
height: auto;
position: absolute;
}
Just trying to figure on a reverse. All the above are nice, but the transitions were, uh, not smooth. Using class's for a reason on this one.
Try
$('.next').click(function(){
$('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
})
I was working with responsive web design and I wanted to slide some images in to a page. I tried some plugins but the problem with the plugin is it uses width and height property and also assigns position: absolute. So I thought of changing the src of the image myself using js and it worked fine, but can I give some transition effect to it?
Demo fiddle
What I have done is:
var i = 0;
var total = 2;
window.setInterval(function() {
show_hide();
}, 1000);
function show_hide() {
var img = $('.image-holder img, .image-holder2 img');
//alert(img.length);
if (i % 2 == 0) {
img[0].src = 'http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png';
img[1].src = 'http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png';
i = 0;
}
else {
img[0].src = 'http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834';
img[1].src = 'http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834';
}
i++;
}
My HTML is as follows:
<div class="image-holder" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834" />
</div>
<div class="image-holder2" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834" />
</div>
Here's what I put together. jsFiddle
javascript
var img = $(".image-holder img")
var i = 0;
var count = img.length - 1;
setInterval(function() {
showImage(i);
i++;
if (i > count) i = 0;
}, 2000);
function showImage(i) {
img.eq(i - 1).animate({
"opacity": "0"
}, 1000);
img.eq(i).animate({
"opacity": "1"
}, 1000);
}
HTML
<div class="image-holder" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834" />
</div>
<div class="image-holder" >
<img src="http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png" />
</div>
CSS
.image-holder img{ opacity: 0;}
.image-holder { position: absolute; }
I followed a tutorial to create a simple javascript slideshow but I am having a strange bug... The first 2 cycles work perfectly, but once the counter resets the slideshow begins showing the previous slide quickly then trying to fade in the correct slide. Any idea what is causing this?
I have 3 images (named Image1.png, Image2.png, and Image3.png) in a folder for my simple slideshow and 3 divs set up like this:
<div id="SlideshowFeature">
<div id="counter">
3
</div>
<div class="behind">
<img src="SlideShow/image1.png" alt="IMAGE" />
</div>
<div class="infront">
<img src="SlideShow/image1.png" alt="IMAGE" />
</div>
</div>
My javascript looks like this
var nextImage;
var imagesInShow;
var currentImage;
var currentSrc
var nextSrc
function changeImage() {
imagesInShow = "3";
currentImage = $("#counter").html();
currentImage = parseInt(currentImage);
if (currentImage == imagesInShow) {
nextImage = 1;
}
else {
nextImage = currentImage + 1;
}
currentSrc = $(".infront img").attr("src");
nextSrc = "SlideShow/image" + nextImage + ".png";
$(".behind img").attr("src", currentSrc);
$(".infront").css("display", "none");
$(".infront img").attr("src", nextSrc);
$(".infront").fadeIn(1000);
$("#counter").html(nextImage);
setTimeout('changeImage()', 5000);
}
$(document).ready(function () {
changeImage();
});
EDIT:
Also here is my CSS
#SlideshowFeature
{
text-align:center;
margin: 0 auto;
width:800px;
background: #02183B;
height:300px;
float: left;
overflow:hidden;
display:inline;
}
#SlideshowFeature div
{
width: 800px;
height:300px;
position:absolute;
}
#counter
{
display:none;
}
The problem seem to be in your HTML structure (and not in your JS):
...
<img src="SlideShow/image1.png" alt="IMAGE" />
...
<img src="SlideShow/image1.png" alt="IMAGE" />
...
I think you meant to put image1.png and then image2.png
.infront must be in front and .behind must be behind
.behind {
z-index: 1;
}
.infront {
z-index: 255;
}
And I also moved re-scheduling logic to fadeIn callback:
$(".infront").fadeIn(1000, function(){setTimeout('changeImage()', 2500)});
$("#counter").html(nextImage);
//setTimeout('changeImage()', 2500);
Looks good for me now.