Copy link to clipboard
Copied
I've been using dreamweaver for only a few months. My carousel on my index page was working fine until I moved some of my files around so that they would all be in the same folder. Now my carousel won't work at all, I've tried deleting the old carousel and adding a new one, I tried to delete my old file of bootstrap and add a new one... nothing worked. The only thing different between my code for the old carousel that worked and my new code that doesn't work is that this bootstrap has 3.3.7 in the name... could this be my problem?
This is my code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INARELS Research</title>
<!-- <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> -->
<link href="css/bootstrap-3.3.7.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="home1">
<br>
<br>
<br>
<nav>
<ul class= "navlist">
<li class="navlistitem active"><a href="index.html">Home</a> </li>
<li class="navlistitem"><a href="About.html">About</a> </li>
<li class="navlistitem"><a href="OurResearchers.html">Our Researchers</a></li>
<li class="navlistitem"><a href="Projects.html">Projects</a></li>
<li class="navlistitem"><a href="ContactUs.html">Contact Us</a></li>
</ul>
</nav>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="carousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="images/Carousel_Placeholder.png" alt="First slide image" class="center-block">
<div class="carousel-caption">
<h3>First slide Heading</h3>
<p>First slide Caption</p>
</div>
</div>
<div class="item"><img src="images/Carousel_Placeholder.png" alt="Second slide image" class="center-block">
<div class="carousel-caption">
<h3>Second slide Heading</h3>
<p>Second slide Caption</p>
</div>
</div>
<div class="item"><img src="images/Carousel_Placeholder.png" alt="Third slide image" class="center-block">
<div class="carousel-caption">
<h3>Third slide Heading</h3>
<p>Third slide Caption</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
<br>
<br>
</div>
<br>
Try this:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Bootstrap 3.7 Carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Latest compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
...Copy link to clipboard
Copied
I don't use bootstrap, but as you say you have moved the location of your html files, i am wondering if you also updated the link to the jQuery file within your html file?
Copy link to clipboard
Copied
Try this:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Bootstrap 3.7 Carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Latest compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!--begin Bootstrap Carousel-->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5200">
<!-- Slide Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://placeimg.com/1200/475/nature" alt="...">
<div class="carousel-caption">
<h3>Heading</h3>
<p>Caption</p>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/1200/475/arch/3" alt="...">
<div class="carousel-caption">
<h3>Heading</h3>
<p>Caption</p>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/1200/475/tech" alt="...">
<div class="carousel-caption">
<h3>Heading</h3>
<p>Caption</p>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/1200/475/animals" alt="...">
<div class="carousel-caption">
<h3>Heading</h3>
<p>Caption</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span> </a>
<!--end carousel-->
</div>
<!--latest jQuery 3-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Bootstrap JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Copy link to clipboard
Copied
Thank you, that did make my carousel work... but don't I need my files to be in one place when I load the finished website onto the server? Or will the URL in my code for the bootstrap always work?
Copy link to clipboard
Copied
Bootstrap and jQuery are hosted on official CDNs for everyone's benefit. It saves bandwidth for you and it makes the web faster.
A Content Delivery Network (CDN) is a system of computers that exist all over the world and cache files for users to access. CDNs can greatly reduce the load time of a page by offering files at a higher bandwidth from a server that is physically closer to your visitor than your web server might be. For example, your server might be in San Francisco but a site visitor might be in Eastern Europe.
Nancy