Seeking assistance with creating a dynamic loop for multiple divs (3 or more) using jQuery. The desired outcome is to have the main image div on the homepage rotate with other divs, changing both the background image and links within each div.
I initially achieved this effect by stacking CSS and fading images behind, but now I need the links within the divs to update as well.
Below is the HTML for the section:
<head>
<title>Sample</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.leanModal.min.js"></script>
<link type="text/css" rel="stylesheet" href="index.css" />
</head>
The Div that needs to change:
<div class="jumbotron-1">
<div class="container">
<h1>What We Are</h1>
<p> A Paragraph</p>
<div class="divbutton">
<a href="#" class="myButton">Learn more</a>
</div>
</div>
</div>
<div class="jumbotron-2">
<div class="container">
<h1>What We Are</h1>
<p> A Paragraph</p>
<div class="divbutton">
<a href="#" class="myButton">Learn more</a>
</div>
</div>
</div>
<div class="jumbotron-3">
<div class="container">
<h1>What We Are</h1>
<p> A Paragraph</p>
<div class="divbutton">
<a href="#" class="myButton">Learn more</a>
</div>
</div>
</div>
Discovered a similar code snippet:
var slideShowDivs = ['.jumbrotron-1', '.jumbotron-2', '.jumbotron-3'];
var currentID = 0;
var slideShowTimeout = 1000;
$(document).ready(function() {
for (var i = 1; i < slideShowDivs.length; i++) $(slideShowDivs[i]).hide();
setTimeout(slideShowChange, slideShowTimeout);
});
function slideShowChange() {
var nextID = currentID + 1;
if (nextID >= slideShowDivs.length) nextID = 0;
$(slideShowDivs[currentID]).stop(true).fadeOut(400);
$(slideShowDivs[nextID]).stop(true).fadeIn(400, function() {
setTimeout(slideShowChange, slideShowTimeout);
});
currentID = nextID;
}
However, it appears to be non-functional. Any suggestions?