I'm currently implementing an Image Slider from this source
For the site structure, I've set up an index.html file to display all the pages, allowing navigation by changing the content within <div id="isi">. Here's a snippet of the index file:
<body class="wg">
<div class="container">
<div class="header">
<h1 class="banner-font">Header</h1>
</div>
<div class="btn-group button-banner">
<button type="button" class="btn btn-default" onclick="getSummary(1)"
>Home</button>
<button type="button" class="btn btn-default" onclick="getSummary(5)">Contact Us</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">About Us <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" onclick="getSummary(2)">History</a></li>
<li><a href="#" onclick="getSummary(3)">Vision Mission</a></li>
<li><a href="#" onclick="getSummary(4)">Study Programs</a></li>
</ul>
</div>
<div id="isi">
<!-- content goes here -->
</div>
<footer>
<b>
© 2013 Kurnia Fredy Wijaya & Luki Ramadon <br>
Faculty of Engineering at Pancasila University
</b>
</footer>
</div>
<script type="text/javascript">
$(document).ready(function(){
getSummary(1);
});
</script>
</body>
Upon initial page load, the script runs getSummary(1) method to fetch data via Ajax. Here's the code snippet for the Ajax request:
function getSummary(id){
if(id==1){
address = "pages/home.html";
}
else if(id==2){
address = "pages/history.html";
}
$.ajax({
type: "GET",
url: address,
data: "id=" + id,
success: function(data) {
document.getElementById('isi').innerHTML = data;
console.log(document.getElementById('isi'));
}});}
The Image Slider in question is situated in pages/home.html. Here's the relevant code snippet:
<div class="contentFrame">
<div id="sliderFrame">
<div id="slider">
<a class="lazyImage" href="img/img1.jpg" title=""></a>
<a class="lazyImage" href="img/img2.jpg" title=""></a>
<a class="lazyImage" href="img/img3.jpg" title=""></a>
</div>
</div><br />
</div>
While the navigation functions smoothly, the issue arises with the image slider. When switching between pages and returning to the slider page, it appears to lag, displaying only the loading bar. Is there something crucial that I may be overlooking?