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: 
Exit
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0
Upvote

Issues with bootstrap carousel in Dreamweaver

kevino62849551
New Here ,
Apr 01, 2017 Apr 01, 2017

Hello, I am a confessed complete and utter novice when it comes to anything related to web design. I am currently building a website as part of a requirement for one of my college modules. I've run into an issue with the carousel feature in dreamweaver. Firstly, I can't figure out how to get the carousel exactly where I want it. The aim is to have it below a static image on my page with little to no space in between. Both the carousel and the image are in the same section. However, when I go to insert the carousel it inserts in between the first two sections, which leaves a blank white space between the background colours of the sections and looks terrible. In addition, for some reason two of the images in the carousel are identically sized yet one is far larger. I can't fathom why that is.

Here is the code I'm working with (image names removed for obvious reasons):

<secton id="one"><img src="branding"  class="img-responsive" alt="Placeholder image">

  <div class="container-fluid">

  <div id="carousel1" class="carousel slide" data-ride="carousel">

   <ol class="carousel-indicators">

     <li data-target="#carousel1" data-slide-to="0"></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="carousel image 1" 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="carousel image 2" 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="carousel image 3" 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>

  </div>

If anyone could help me I'd really appreciate it. As I've already stated, I have barely any experience in this sort of thing so if the problem is something really obvious and stupid please be nice.

3.0K
Translate
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 , Apr 01, 2017 Apr 01, 2017

Copy & paste this into a new, blank document.  Save & Preview in browser.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap 3.3.7 Starter</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+PmST

...
Translate
replies 1 Reply 1
latest latest Jump to latest reply
Nancy OShea Community Expert
Community Expert ,
Apr 01, 2017 Apr 01, 2017
LATEST

Copy & paste this into a new, blank document.  Save & Preview in browser.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap 3.3.7 Starter</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>

<secton id="one" class="container-fluid"> <img src="http://dummyimage.com/400x100.jpg"  class="center-block img-responsive" alt="brand">

<!--BEGIN CAROUSEL-->

<div id="carousel1" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">

<li data-target="#carousel1" data-slide-to="0"></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="http://lorempixel.com/1200/400/nature/1" alt="placeholder">

<div class="carousel-caption">

<h3>First slide Heading</h3>

<p>First slide Caption</p>

</div>

</div>

<div class="item"> <img src="http://lorempixel.com/1200/400/nature/2" alt="placeholder">

<div class="carousel-caption">

<h3>Second slide Heading</h3>

<p>Second slide Caption</p>

</div>

</div>

<div class="item"><img src="http://lorempixel.com/1200/400/nature/3" alt="placeholder">

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

</secton>

<!--latest jQuery-->

<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" 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
Translate
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 © 2025 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