Highlighted

bootstrap carousel collapse!

Explorer ,
Dec 08, 2017

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

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

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>

Views

1.1K

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

bootstrap carousel collapse!

Explorer ,
Dec 08, 2017

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

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

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>

Views

1.1K

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
Dec 08, 2017 0
Adobe Community Professional ,
Dec 08, 2017

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>

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...
Dec 08, 2017 0
KevinB9 LATEST
Explorer ,
Dec 09, 2017

Copy link to clipboard

Copied

Nancy - thank you as always

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...
Dec 09, 2017 0