cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0
Upvote

Why doesn't my carousel in bootstrap 3.3.7 work?

elizabethschenk
New Here ,
Nov 23, 2017 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>

Views

7.9K

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
community guidelines

correct answers 1 Correct answer

Nancy OShea Community Expert
Community Expert , Nov 23, 2017 Nov 23, 2017

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>

...

Votes

Translate

Translate
replies 4 Replies 4
latest latest Jump to latest reply
pziecina
LEGEND ,
Nov 23, 2017 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?

Votes

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
community guidelines
Nancy OShea Community Expert
Community Expert ,
Nov 23, 2017 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
elizabethschenk
New Here ,
Nov 25, 2017 Nov 25, 2017

Copy link to clipboard

Copied

In Response To Nancy OShea

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?

Votes

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
community guidelines
Nancy OShea Community Expert
Community Expert ,
Nov 25, 2017 Nov 25, 2017

Copy link to clipboard

Copied

LATEST
In Response To elizabethschenk

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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Copyright © 2023 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices