We recently created a new website for Ashton & Partners, a design firm located in downtown San Francisco. The Ashton & Partners home page features a series of images that slowly cross-fade from one to the next, all of which can be controlled via a custom WordPress control panel. In designing the site, it was important that the site work on devices that do not support Flash (i.e. – iPhone, iPad, etc.) so we chose to create all site animations using JavaScript.
While there are thousands of pre-built animation scripts out there, most of the scripts I found were overblown or not exactly what we needed. Below are the component parts for our custom infinite loop cross-fade script (HTML, CSS, and Javascript) plus links to a working demo and source files. Note: by applying the “rotating-item” class, the script can be used to infinitely loop over any set of HTML elements (paragraphs, divs, etc.), we just happen to target images in this example.
The HTML
We start with a basic HTML5 doctype. In the head of the document, we link to the jQuery JavaScript library via Google AJAX APIs and include our ‘infinite-rotator.js’ file. Note: for slightly better page load speed you can link to the Javascript files at the bottom of the HTML instead. We then create a list of images and assign each a class of “rotating-item”. We’ll use this class to control the images via CSS and JavaScript later. Finally, we wrap all of our rotating images in a DIV we give an id of “rotating-item-wrapper” which we explain in the CSS section. Unstyled, the HTML will display the entire series of images (view unstyled page).
Infinite Rotating Images Using jQuery (JavaScript) <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1"></script><script type="text/javascript" src="js/infinite-rotator.js"></script> </pre> <h1>Infinite Rotating Images Using jQuery (JavaScript)</h1> <div id="rotating-item-wrapper"><img class="rotating-item" src="images/greenpeople.jpg" alt="a person entering a building" width="980" height="347" /> <img class="rotating-item" src="images/entrance.jpg" alt="photo of building across from our office" width="980" height="347" /> <img class="rotating-item" src="images/bluepeople.jpg" alt="building entrance with neon backlit walls" width="980" height="347" /> <img class="rotating-item" src="images/reflection3.jpg" alt="building lobby window reflections" width="980" height="347" /> <img class="rotating-item" src="images/reflection2.jpg" alt="reflection on building windows" width="980" height="347" /> <img class="rotating-item" src="images/manequine.jpg" alt="two manequines in window" width="980" height="347" /></div> <pre>
The CSS
Our CSS code is simple and basically does two things — it absolutely positions all of our rotating items on top of each other in the wrapper DIV and hides the items using CSS display=none.
#rotating-item-wrapper { position: relative; width: 980px; height: 347px; } .rotating-item { display: none; position: absolute; top: 0; left: 0; }
The JavaScript
This is the heart of the rotating image functionality. Now that we have our basic HTML markup and have absolutely positioned and hidden our images using CSS, we can now rotate between them. We start our JavaScript only when the HTML document and images have finished loading by using the window load function. For those familiar with jQuery, this is a bit different than the document ready command which fires after the document is ready, not when linked images have loaded which is important here. (Note: the same can be achieved by linking the JavaScript files at the bottom of the HTML versus in the head of the document.) We then define a few timing variables — the initial fade-in time, the interval between items, and the cross-fade time — all set in milliseconds. Adjust as desired. On line 23, we reveal the first image, then on line 26 kick off our infinite loop.
$(window).load(function() { //start after HTML, images have loaded var InfiniteRotator = { init: function() { //initial fade-in time (in milliseconds) var initialFadeIn = 1000; //interval between items (in milliseconds) var itemInterval = 5000; //cross-fade time (in milliseconds) var fadeTime = 2500; //count number of items var numberOfItems = $('.rotating-item').length; //set current item var currentItem = 0; //show first item $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn); //loop through the items var infiniteLoop = setInterval(function(){ $('.rotating-item').eq(currentItem).fadeOut(fadeTime); if(currentItem == numberOfItems -1){ currentItem = 0; }else{ currentItem++; } $('.rotating-item').eq(currentItem).fadeIn(fadeTime); }, itemInterval); } }; InfiniteRotator.init(); });
That’s it! I hope you found this example useful.
View Demo Download Files CodePen Github
PS – An extension of this code, you might notice we embedded an Easter Egg on the Ashton & Partners home page. Fun things happen when you “triple-click” the word “Approachable…”
PPS – A number of people in the comments have asked “can you modify the code to…[do something different]?” Of course, the answer is yes — but as much as I would like to help, creating custom scripts for everyone is simply not feasible. You can try posting your question in the comments and perhaps another commenter can respond. Failing that, the better solution would be to learn how to do it yourself. For this, I highly recommend SitePoint’s Simply JavaScript, by Kevin Yank & Cameron Adams followed by jQuery: Novice to Ninja, by Earle Castledine & Craig Sharkie. Power through these two books and you’ll be writing scripts like this from scratch. Seriously, you can do it!
This article is translated to Serbo-Croatian language by Jovana Milutinovich from Webhostinggeeks.com.
Enjoy this post? Please subscribe to our Email List, Facebook page, or RSS feed.
Author | Brian McNitt
Brian’s career path zigzagged from pre-med at Purdue University to bike racing and a career in sales and marketing for Schwinn and other bicycle companies. That was until the inception of the World Wide Web, when he took his science and marketing background full force into web design. He was a founding member of Montclare Technologies—one of the first and hottest interactive agencies in the U.S. In 2000, he founded TrendMedia, a San Francisco-based web design and interactive agency. Brian is now one of the leading experts in web technology and social media, and is a recognized authority in web accessibility, WordPress and SEO.
Thanks for that – it worked well, even with a div that had an image instead of just an image
Not working in my browser yo.
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12 GTB7.1
Thank you, works fine 😉
Just wanted to say thank you for posting this. This is a very elegant solution, and it’s very flexible to adapt to a wide range of applications.
Keep up the good work!
I digg this script, thanks! Still looking for a way to pause the loop on mouseover (for rotating DIVs that contain text).
…And manually showing DIVs by clicking or hovering over a link.
Rens, did you ever find a way to pause the loop on mouseover? I’m looking to do just that.
H
For anyone looking for mouseover/hover- to pause functionality…
https://jsfiddle.net/uz3ku1wu/1/
There you go.
Well done, Bryan! Thank you for sharing that.
Thank you for this! This is perfectly fantastic!
Why did the script stop working all of a sudden?
Works perfect !
Work fine inside my joomla website,,, used it for header
Is it possible to add one more thing to the loop. So when an image is shown to animate it, so it slowly zooms into the image and then after the interval ends it moves to the next picture?
There are a lot of scripts out there, but this was by far the easiest to follow and install. I have bookmarked for future reference. Thanks!
This script is not working with IE 9
Hi jCode,
Just tested the script in IE9. It works fine for me.
Hi Brian
I am using IE Tester and the IE 9 tab does not display the images for the following link
http://trendmedia.com/code/jquery-infinite-rotator/
Hi JCode,
Just tested in IE Tester. It works for me. Wondering if you have IE9 installed on your virtual machine? I believe IE Tester uses it to display content. Without IE9 installed, the IE9 view will not work. Same for IE10, etc.
Hi Brian,
I was wondering if you could take advantage of this script on a company’s Facebook page? I’m not sure if they give the javascript flexibility but seems like a great marketing tool for a company’s brand page on FB.
Thanks,
Eric
thank you very much – nice and simple!
Very useful script! Thanks for posting, this saved me some time!
Eric: If you haven’t sorted the FB page already, facebook allows your to embed an iframe into your company page – therefor you can have whatever you want on it! Except auto playing video’s I think, and maybe some other bits in their guidelines..
I love this code. Simple and clean. I’m trying to deploy it in a “trio” of images. I have a couple issues I’d like input on.
The first is the images loop through once, per div. I’d like each div to loop independently, and infinitely.
Seccond: this page doesn’t show in IE. Only FireFox. Any clues?
My page: http://www.cityofcampbell.com/_indexRotation.htm
hey man, i got this weird problem.
everything is working fine n all, but if you leave the site open and ignore it while doing something else, when you go back to the site, the rotation will speed up ridiculously ‘to make up’ for the times it didn’t rotate while you’re looking at other things.
any workaround? is this a common bug?
Hi Ammar,
What platform and browser?
windows 7 and mozilla firefox.
i guess something was wrong with my jquery js file, it was a different version downloaded from another website. i used a different version and its working nicely now.
Cool beans.
One of my users reported this issue but I’m having trouble reproducing it. Does this script reliably work with later versions of JQuery also?
Brian, could this be used to loop through two divs that just contain html text? (My case: French and English book titles, for a web page promoting the English translation). I am assuming anything could be in the looping divs, so long as each one had the class rotating-item?
Chris, that’s exactly right. I’m using the script to rotate images, but it should work on any HTML element with class of .rotating-item — divs, headers, paragraphs, tables, etc. Please give it a shot and report back!
Brian, this script is lovely and working perfectly for me, but(and I feel a bit dumb asking this, since the title of the post is Infinite Loop, but anyway) is there something I can replace infiniteLoop with in order for it to stop on the last image in the folder? Or to stay on the last image for longer than the rest?
Did you ever find out how to do this? I would also like the rotation to go through just once and then to stop…
hi
your script is very nice.but i have an issue.
when i added the script in first page that is index page its working but when the same sript is added in second page images are not displaying..is it a bug.
Hello,
Thanks for posting such a useful and simple code. I’m a newcomer to javascript and this is a great learning tool.
I’ve been playing for a couple of hours now but can’t seem to figure out how to get the loop to end on the final image and hold it – freeze so to speak. I’ve contemplated setting the final image as the background in the HTML doc and just ending the loop which would reveal the background, but there must be a more acceptable way – anyone?
This does not work with Google Chrome. Is there a fix for
that? Please help!
Benedict,
Not sure what you’re seeing. Just tested in Chrome. Works fine here.
A beautiful script for displaying images…thanks so much for this…I use it over and over in various incarnations…
Thanks. Your website for Ashton and Partners is a perfection. Sharing the code for the rotating images is a very generous service.. Thanks!
Thank you for sharing this useful script. I’ve already implemented it.
My only concern is that if the visitor does not have javascript enabled, they won’t see anything. Is there a way to enable a fallback header in such a circumstance? I mean, in addition to a message stating that javascript should be enabled for full functionality.
Hi Kate,
I think fewer and fewer web developers are considering the “no javascript” case these days since this case currently represents between 0.5- 1.5% of web users. Still, it’s a valid point. Perhaps someone would like to update the script to include a no javascript fallback and get credit in this article? 🙂
Cheers,
Brian
Thanks for the really great code. I’ve been trying to pause/restart the infinite loop with mouse-over/out. Pausing works with no problem, when restarting, however, the images timing and sequence is all out of wack. Any suggestions on pausing/restarting?
Thanks
Have you managed to solve this? Can you help me with pausing on mouseover?
Thx for your help!
I have the code deployed and it works well. I’d like to present the images randomly. Can it be done with this code? Thanks Brian! ~Todd
I am also looking for a way to present the images randomly… i’m not a js programmer, but i imagine this would be simple for someone who is…
I’ve modified the script to produce a random result. Still needs a bit of tweaking to eliminate a blank space, but seems pretty good so far.
$(window).load(function() { //start after HTML, images have loaded
var InfiniteRotator =
{
init: function()
{
//initial fade-in time (in milliseconds)
var initialFadeIn = 0;
//interval between items (in milliseconds)
var itemInterval = 5000;
//cross-fade time (in milliseconds)
var fadeTime = 2500;
//count number of items
var numberOfItems = $(‘.rotating-item’).length;
//set current item
var currentItem = Math.floor((Math.random()*numberOfItems)/* +1 */);
//show first item
$(‘.rotating-item’).eq(currentItem).fadeIn(initialFadeIn);
//loop through the items
var infiniteLoop = setInterval(function(){
$(‘.rotating-item’).eq(currentItem).fadeOut(fadeTime);
currentItem = Math.floor((Math.random()*numberOfItems) /* +1 */);
$(‘.rotating-item’).eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
InfiniteRotator.init();
});
Aaron,
You need to ensure your next item is not the same as your current item – that’s where the blank comes from. Instead of this for your loop:
var infiniteLoop = setInterval(function(){
$(‘.rotating-item’).eq(currentItem).fadeOut(fadeTime);
currentItem = Math.floor((Math.random()*numberOfItems) /* +1 */);
$(‘.rotating-item’).eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
Use This:
var infiniteLoop = setInterval(function() {
$(“.rotating-item”).eq(currentItem).fadeOut(fadeTime);
nextItem = 0;
do {
nextItem = Math.floor((Math.random()*numberOfItems));
} while (nextItem == currentItem)
currentItem = nextItem;
$(“.rotating-item”).eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
Thanks Matt, Big Help.
I had to change the double-quotes to single-quotes to get functional syntax but other than that it works perfectly now. Thanks again.
Thanks so much Matt and Aaron, this helped me SO MUCH! The only issue I’m having now is that although the code is working perfectly in FF and Chrome, In IE the first image (or comment, since I have this script running in 2 places on my page) loads and then just endlessly reloads. Is anyone else having issues in IE?
Hi,
This script is awesome and is exactly what I needed to fulfill a request for a rotating header image.
Unfortunately, the site also uses Lightbox for image viewing. These two scripts do not seem to jive with each other – in that only one will work at a time.
Does anyone have any suggestions how I can have these two scripts work together?
[…] Rotating Header Images I found Infinite Rotating Images Using jQuery […]
Great code, really helped me a lot and learned something a little bit! Thanks!
Hi people!
It’s really a greaaaat script, and I can say, because i’m still a noob in this stuff and it worked immediately.
But I would really love it to pauze on mouse over, and that the slide will continue when mouse is off the image. Can anybody help?
Hi David,
Not sure whether you got this resolved, but I was having the same issue. However, I found my answer, so in case anybody Googles to get here, I’ll post my solution. 🙂 Keep in mind, I’m relatively new to JavaScript, but with some devoted searching, I found something simple that suited the need. Basically, you first need to create two time objects:
var now, before = new Date();
Then, use these two time objects in the loop like such:
now = new Date();
var elapsedTime = now.getTime() – before.getTime();
if(elapsedTime > (fadeTime + itemInterval))
{$(‘.rotating-item’).stop(true, true);}
It works like this: when you go to another tab for a while, then come back, there is basically a huge time delay. This time delay is given by elapsedTime. The code always checks to see whether elaspedTime is greater than the time it takes for the image to fade in and be displayed. If it is, then what happens is the sort of “queue-line” that is created with all these backed-up images is erased, and the code essentially starts with a clean slate.
Hope this helps! 🙂
Whoops! Sorry, I think I posted on the wrong person’s comment. This code is supposed to fix the “rushing” that occurs when you leave the tab and come back.
This is awesome! WOrks great on a mac in Firefox, and Chrome, but it’s not working for me in Safari. Any work arounds?
Hi Brian,
Thanks for your code…!!!
hi
does anyone have a solution to having the roating image in a div with 2 other divs overlaid ontop of it? i.e. one top and one bottom with text inside them (50% see through divs if possible)
Cheers
How can i change the fade out color from white to black?
Thanks for the great code. I am placing the images in a space 300 pixels high X 570 pixels wide. Some images are not 570 pixels wide. Is there a way to center?
Thanks!
Guessing you could adjust the CSS top and left positing of .rotating-item to achieve this. See: http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/ Good luck!
change image canvas size not image size to match the others will fix your problem.
Hey Brian,
First of all, this thing is awesome!
But I do have a question: For some reason when it loads a new image my browser automaticly scrolls up, is this supposed to happen? or did i maybe do something wrong?
thanks in advance!
Joep
Great code, Brian. Works so smoothly–thanks so much!
thank you very much, i’ve been struggling with this kind of concept and this works great!
stupid question but how do I modify this code so that it doesn’t loop?
I have used this code perfectly to work as instructed but I want to use it on another page where it stops on the last image.
Hi can I ask, were does the last section get put in your document the javascript part. I don’t know were it goes or how it works? any feedback would be greatful.
have a noob question script works great with my images. I click on the index icon to view it looks great but how do I apply it to my webpage, file/folders. very lost please help…
please someone reply to this, i am so stuck!
Hi can I ask, were does the last section get put in your document the javascript part. I don’t know were it goes or how it works? any feedback would be greatful.
Hi Kieran,
A link to the JS file goes in the HTML doc. Download the working demo files and you will see it. Just make sure your paths are correct and it will work. Good luck!
Thanks for the reply Brian.
finally got one to work, been trying to figure these things out for so long 🙂
With Chome and inactive browser tabs, they can buffer setInterval/setTimeout. So use .stop(true,true) to stop buffered events
Thanks so much, this was a great tutorial.
One thing – with the CSS positioning you might want to get rid of the top/left absolute placing on the item class – but of course if you’re adept enough to use jquery you’ll be able to figure out how to position your element 🙂
You are the best … this rocks!
Thank you so much
Thanks a lot! quick implementation! 🙂
Great script! I dispensed with the images (just used a background image) and used a mix of heading and paragraph tags.
I also varied the positions of the headings so it gave a nicer effect to the presentation.
Thanks a bundle Brian!
Works great in IE, but Firefox 13.0.1 throws this error:
“$ is not defined” (first line of infinite-rotator.js). I googled the issue and tried some suggested workarounds but haven’t figured it out yet. any suggestions?
Thank you so much for this post. I’ve been googling for days on how to do this, and your post is the only one that simplifies it enough for me to understand. You rock!
(I know the post is 2 years old, but I sincerely thank you nonetheless)
Script is working fine. but only two images are being shown.. remaining are not shown.. why is it so?
Hi Brian,
I was trying to create a jQuery script to rotate elements when I found this page. Your script works great – thank you!
For my purposes, I needed the rotator script to be reusable in multiple pages where the fade-effect would vary.
I modified your script to make use of the “data” attribute for HTML-5. More info here:
http://www.sluniverse.com/ffn/index.php/2011/02/using-html5s-data-attributes-with-jquery/
In a nutshell, the modified script uses the data attribute (specified in the rotator wrapper markup) to pass a variable to the jQuery script.
$(window).load(function() {
var elementFadeCycle = {
init: function() {
//get cycle rate and set derivatives
var cycle = $(‘#fade-cycle-element-wrapper’).data(‘rate’);
var start = (cycle*.25);
var fade = (cycle*.25);
//queue up the elements and start the cycle
var elements = $(‘.fade-cycle-element’).length;
var current = 0;
$(‘.fade-cycle-element’).eq(current).fadeIn(start);
//cycle through elements
var engine = setInterval(function(){
$(‘.fade-cycle-element’).eq(current).fadeOut(fade);
if (current == (elements – 1)) {
current = 0;
} else {
current++;
}
$(‘.fade-cycle-element’).eq(current).fadeIn(fade);
}, cycle);
}
};
elementFadeCycle.init();
});
Hope someone elese can make use of this idea. Thanks again for posting the script!
Hey Brian! As many have said, thanks for the post! I was searching around the site and noticed on the page http://ashtonandpartners.com/our-work/aaa/ there is the same header, but the arrows on the left and right side. This is what I’m really looking to do. Can you help me understand how to do this? Thanks!
Hi Cayle,
It’s a good question but is far more than I could easily explain. This said, power through the two SitePoint books listed at the end of the post and you’ll be able to create the same. It’s really the only way. You can do it!
Thanks for this tutorial! I have one issue here: the fadeOut() is not executed. Instead the image is removed and the next image is faded in. Would you know what causes this?
Hi Brian,
Thanks for the great work. Is there any way to get random image when refreshing the page. I tried many ways but didn’t get the result.
Thank you for such an easy to understand tutorial. For the first time I actually have rotating images working!
Great script! Has anyone tried adding “slide numbers” for lack of a better term, so that users can switch to an image if they want to go back to a previous image?
Hey, works really well however I have a long lag on the initial rotate. I have swapped the initial fade transition to 0 & 1000 but it still takes an age about 10 seconds) before it starts to rotate through. This happens locally and on the server so I don’t think its to do with load time.
Hi Pete,
Are you finding this with the demo linked in the article? If you have an image heavy page, this could account for the delay. To rule out load time, you might try changing the first line of JavaScript from $(window).load to $(document).ready. The former starts the JavaScript when the HTML document and all images have finished loading, the latter only when the document is ready, which is usually before all images are done loading. If you have large images or a large number of images, you might want to load rotating images via AJAX. That’s a different solution however. Good luck!
Possible to add something like watermark above pictures and when user rightclicks at the “slideshow” to get that as saved?
Thanks a tonn!!! worked perfectly well in my website.
Thank you very much
This is amazing. thanks for sharing. I had to reduce the fade in time because the display was off on Firefox (19.0.2), but now it works perfect.
Hi, i’m still learning script and for some reason when i try to link it within dreamweaver, it goes missing and the pictures aren’t showing up in live view, can someone help?
I have this running on my allisoniowa.com website and I have one question: upon opening the site, the first image takes about 15 seconds to load. Then cycles through the remaining images as expected. I’m trying to learn this stuff as I work and experiment, but it takes so much time. We’re all lucky to have sites like this where the code is already written for us, but there is still lots to learn.
This script is wonderful. Thanks. The Elvis Egg is amazing. Any chance I could use that too. If not, I understand. You have been more than generous already.
Thanks so much. May I use the Elvis egg too?
It is just so cool but beyond my talent.
You’re free to use the Elvis egg too if you can figure it out, which I bet you can. 😉 Spend some time looking at the code and playing with it. I bet you get it working. Good luck!
Thanks so much for this great script.
I have one problem on the page I have it installed on: http://www.stevenkennard.com/index.html
It works great on Chrome and on Firefox. On IE it aligns to the left side.
On mobile, in the default Android browser, as in IE, it aligns left of the page, as if it were outside of the div in which it is place. In Chrome and Dolphin on Android, the block is centered.
A fix that I tried, which was to put the following code into the Rotating-image wrapper css info:
margin: 0 auto;
}
fixed the problem in IE and in the default mobile browser. However it threw the images in Chrome, Firefox, etc. over to the right.
I am at a loss…
If you had any thought on how to fix this, I would very much appreciate it.
Many thanks,
Ellie
Hi Brian, i do thank you for the code mine runs very well with explorer but not mozilla kindly assist
Hi this has been a massive help. I was wondering if you can attach text to the jqueries, so each time the image changes a caption will change also?
This is great! Thanks! How do I modify it so I can use it on three sections of my page at the same time? I would like to have three sets of rotating images. Thanks again!
I dont know if this will help but I had a similar issue. Not being very jquery talented, I created two separate “rotating-item-wrapper” ID’s and “rotating-item” classes I then copied and modified the script by adding a “B” to the rotating item class. Works great.
the page is http://www.rmcc.bayshaman.com/treats.html
When i Add 3 or 4 images than it was showing all images not showing one by one
Simply Superb. Works Perfect.
Works beautifully! Thank you very much for the quick code.
Hi there! I just came across this. Thank you for the code. My website keeps displaying all the images like they are not styled and then applies the fade out to the topmost picture and cycles through for some reason. Can you please help – Thank you.
Hi Dan. That means the CSS is not being applied to the code. You are seeing the unstyled elements. Either the CSS is missing (check your path) or is being overridden by more specific CSS rules (check your rules). Hope this helps!
HI Brian,
Thanks for the js code. This is ideal for my scenario. One challenge I’m having though…I would like the images to be full width and height of screen (i.e. background-position=’cover’). When I do that however, the display of images breaks. Can you possibly enlighten me? Thx.
hi
I need to auto-highlight
an image map having area and coords.
please suggest me a code if any one aware of it.
thanks
Manohar
Is there an example of this script using previous and next buttons to advance the slides manually? This should be pretty easy to accomplish, but I’m quite a novice with javascript so I’m have trouble figuring it out. Any help would be greatly appreciated.
hi!
i have a problem. I have this rotating-item-wrapper on the left side only. When i minimize the page then it jumps down. I tryed to make it fixed position but it dosnt help :((
ok for those of us that are brand new to jquery and limited coding, could use some more details, like where do you put each part of the code? is that last part a seperate file? and referrenced by file that needs the code? i followed step by step and did not get results (As i am sure it may be a location of where i copy and paste this code goes) but lost…
The HTML
We start with a basic HTML5 doctype. In the head of the document, we link to the jQuery JavaScript library via Google AJAX APIs and include our ‘infinite-rotator.js’ -what does this mean? this probably is why i am not getting results.
Can this be used in multiple instances on the same web page? (two or more different rotating image boxes on the same page)
Thanks for any advice!
How do i change the last slide “itemInterval” value?
I want last slide item interval is more than remaining item interval.
Please help me on this!
This is a dream on my http pages but does not function on my https pages .. how can this be corrected?
Can’t get it to work,images shows one after the other