Copy link to clipboard
Copied
I am trying to set up a bootstrap carousel using the "one-click" method from the "insert" menu. I have had success with this previously.
The carousel begins normally with the first image loading but when it comes time for the second image to slide in, the window (image area) collapses - full width but no height! The slide advance mechanism seems to have stopped too.
Can anyone explain what is wrong and how to fix it? Thanks.
Kevin from Cambridge
This is most likely caused by one or more code errors. Without a link, it's impossible to be more specific.
In the meantime, the code below works. Compare it with what you have.
<!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 Bootstrap 3 CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
...Copy link to clipboard
Copied
This is most likely caused by one or more code errors. Without a link, it's impossible to be more specific.
In the meantime, the code below works. Compare it with what you have.
<!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 Bootstrap 3 CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.center-block {float:none}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-10 center-block">
<!--begin Bootstrap Carousel-->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- 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>
<!--/carousel--></div>
<!--/col--></div>
<!--/row--></div>
<!--/container--></div>
<!--latest jQuery 3-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Latest Bootstrap 3 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
Nancy - thank you as always