I am looking to achieve the same fadeIn and fadeOut effect as demonstrated in the example below:
However, the issue I'm facing is that this example was designed for only 3 slides and I need more than 3 slides or the ability for it to dynamically increase.
How can I modify the script to automatically accommodate the maximum amount of slides? If I generate the slideshow dynamically within a CMS, for instance, it's impossible to predict the exact number of slides beforehand. Hence, I don't want to manually update the *.js file every time at these specific parts :/
if (this.Last < 1) {
this.Last = 3;
}
if ($$.Slideshow.Counter > 3)
{
$$.Slideshow.Counter = 1; #
}
It would be greatly appreciated if someone could assist me (and probably many others) with this issue :)
Below is the JavaScript used in this example:
var $$ = $.fn;
$$.extend({
SplitID : function()
{
return this.attr('id').split('-').pop();
},
Slideshow : {
Ready : function()
{
$('div.tmpSlideshowControl')
.hover(
function() {
$(this).addClass('tmpSlideshowControlOn');
},
function() {
$(this).removeClass('tmpSlideshowControlOn');
}
)
.click(
function() {
$('div.tmpSlide').hide();
$('div.tmpSlideshowControl').removeClass('tmpSlideshowControlActive');
$('div#tmpSlide-' + $(this).SplitID()).show()
$(this).addClass('tmpSlideshowControlActive');
}
);
this.Counter = 1;
this.Transition();
},
Transition : function()
{
if (this.Interrupted) {
return;
}
this.Last = this.Counter - 1;
if (this.Last < 1) {
this.Last = 3;
}
$('div#tmpSlide-' + this.Last).fadeOut(
'slow',
function() {
$('div#tmpSlideshowControl-' + $$.Slideshow.Last).removeClass('tmpSlideshowControlActive');
$('div#tmpSlideshowControl-' + $$.Slideshow.Counter).addClass('tmpSlideshowControlActive');
$('div#tmpSlide-' + $$.Slideshow.Counter).fadeIn('slow');
$$.Slideshow.Counter++;
if ($$.Slideshow.Counter > 3) {
$$.Slideshow.Counter = 1;
}
setTimeout('$$.Slideshow.Transition();', 5000);
}
);
}
}
});
$(document).ready(
function() {
$$.Slideshow.Ready();
}
);
I have also conducted some research and encountered another interesting issue:
Upon increasing the Last value from 3 to 5, there seems to be a problem with the navigation controls - When you are on slide 4 and click on slide 2, the navigation will jump back to the previous track, meaning it will move to slide 5 instead of 3.
If anyone could provide assistance with this, it would be highly appreciated.