UPDATE: When I attempt to click on either the left or right icons, it unexpectedly scrolls me down to the bottom of the page. It seems to be related to the #truespeed aspect. The carousel functions perfectly when it is on a standalone page but causes issues when integrated into the website I am developing.
Update #2: After double-checking if the carousel code functions correctly on its own page, I have confirmed that it does. All external page links are also working as expected. I am truly perplexed by this issue.
Here is the code for my static page (including navbar, header, and footer):
<!-- Static Page Code -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index,follow">
<title>{{var pageTitle}}</title>
<link rel="icon" type="image/png" href="{{var protoHost}}FavIconsuperawesome32.png">
<link rel="icon" type="image/x-icon" href="{{var protoHost}}favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{{var protoHost}}css/main.css">
<link rel="stylesheet" href="{{var protoHost}}css/print.css">
<link rel="stylesheet" href="{{var protoHost}}css/navbar-custom.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
{{var extraHeaders}}
</head>
<body>
<div class="page">
<div class="container-fluid">
// Navbar, Header, Footer Content Here...
</div>
</div>
</body>
</html>
However, upon integrating the carousel code into my home page, all the Glyph icons appear along with the bottom circles, but they remain non-functional.
Below is an excerpt from my homepage code:
<?php
$this->setExtraHeader('<link rel="stylesheet" href="{{var protoHost}}css/home.css">');
$this->setExtraHeader('<meta name="description" content="superawesome is a brockville Internet and Phone provider for your needs. Let\'s get connected!">');
?>
<div class="contactspacer"></div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="superawesomeslider" class="carousel slide" data-ride="carousel">
<!-- Carousel Content Here... -->
</div>
</div>
</div>
</div>
If you have any insights or suggestions on what might be causing this issue, please let me know!