JSFiddle - React, Tailwind, and code Playground
HTML
<div id="homepageSlides">
<div id="promoSlides">
<div id="ps1">ps1</div>
<div id="ps2">ps2</div>
<div id="ps3">ps3</div>
</div>
<div id="vehicleSlides">
<div class="vehicleAreas" id="vs1">vs1</div>
<div class="vehicleAreas" id="vs2">vs2</div>
<div class="vehicleAreas" id="vs3">vs3</div>
</div>
</div>
<div id="vehicleSelector">
<a href="#" class="vehiclesList" id="show_vs1">show vehicle 1</a><br />
<a href="#" class="vehiclesList" id="show_vs2">show vehicle 2</a><br />
<a href="#" class="vehiclesList" id="show_vs3">show vehicle 3</a><br />
</div>
CSS
#ps1, #ps2, #ps3, #vs1, #vs2, #vs3 { display:none; height:100px; background:#ccc; }
#homepageSlides .displayBlock { display:block; }
JavaScript
var Rotator = (function (name) { return name; }(Rotator || {}));
Rotator.promoSlides = (function () {
var slides, vehicleSlides, slideLength;
var sControl = {
promoIndex : 0,
promoPrevIndex : 0,
currentVeh : "",
currentId : "",
prevId : "",
timerIsOn : true,
timer : {}
};
var init = function (promo_slides, vehicle_slides) {
// show spinner sometime before slides starts
// sorting not needed if the data coming in is already sorted
slides = SortByWeight(promo_slides);
vehicleSlides = vehicle_slides;
slideLength = slides.length;
addListeners();
start();
};
var SortByWeight = function (s) {
($("body").hasClass("en")) ? s.sort(SortByWeightEn) : s.sort(SortByWeightEnFr);
return s;
};
var SortByWeightEn = function (a, b) {
return b.weight - a.weight;
};
var SortByWeightEnFr = function (a, b) {
return b.frWeight - a.frWeight;
};
var stopTimer = function () {
clearInterval(sControl.timer);
};
var update = function () {
if (sControl.timerIsOn) {
sControl.promoPrevIndex = sControl.promoIndex;
sControl.promoIndex = (sControl.promoIndex < slideLength - 1) ? sControl.promoIndex + 1 : 0;
}
sControl.timerIsOn = true;
sControl.prevId = sControl.currentId;
sControl.currentId = slides[sControl.promoIndex].el;
if (sControl.prevId != sControl.currentId) {
fadeEffect(sControl.prevId, sControl.currentId);
}
};
var firstRun = function () {
sControl.currentId = slides[sControl.promoIndex].el;
$(sControl.currentId).fadeIn(300);
next();
};
var start = function () {
firstRun();
};
var next = function () {
sControl.timer = setInterval(update, 1300);
};
var showSecondary = function (id) {
stopTimer();
...