• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

bootstrap carousel collapse!

Explorer ,
Dec 08, 2017 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

Views

1.7K

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

Community Expert , Dec 08, 2017 Dec 08, 2017

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

...

Votes

Translate

Translate
Community Expert ,
Dec 08, 2017 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— 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
Explorer ,
Dec 09, 2017 Dec 09, 2017

Copy link to clipboard

Copied

LATEST

Nancy - thank you as always

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