Highlighted

Why doesn't my carousel in bootstrap 3.3.7 work?

New Here ,
Nov 23, 2017

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>

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

TOPICS
Dreamweaver FTP, Dreamweaver | Mac OS issues, Learn Dreamweaver

Views

6.3K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Why doesn't my carousel in bootstrap 3.3.7 work?

New Here ,
Nov 23, 2017

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>

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

TOPICS
Dreamweaver FTP, Dreamweaver | Mac OS issues, Learn Dreamweaver

Views

6.3K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 23, 2017 0
LEGEND ,
Nov 23, 2017

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2017 1
Adobe Community Professional ,
Nov 23, 2017

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>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2017 1
New Here ,
Nov 25, 2017

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 25, 2017 0
Adobe Community Professional ,
Nov 25, 2017

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.  

  • Your users in Europe will hit the CDN in Europe and your users in the US should hit the US CDN. As a result, this will reduce your overall page load time.
  • The scripts will already be cached in the visitor's browser if they visited another website that references the same library. In this case, the visitor won't even have to download Bootstrap & jQuery.
  • It's free!
  • If all the CDNs go down at once, the entire planet is in trouble.

Nancy

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 25, 2017 0