Carousel Bootstrap version 3.3 does not rotate - javascript

I have the following problem:
I want to implement a Carousel with Bootstrap version 3.3.7 on my website. The code looks like this:
<!-- Carousel
================================================== -->
<div class="row dark-start d-none d-lg-block">
<div class="col-md-12">
<div id="categoryExampleSlider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#categoryExampleSlider" data-slide-to="0" class="active"></li>
<li data-target="#categoryExampleSlider" data-slide-to="1"></li>
<li data-target="#categoryExampleSlider" data-slide-to="2"></li>
<li data-target="#categoryExampleSlider" data-slide-to="3"></li>
<li data-target="#categoryExampleSlider" data-slide-to="4"></li>
<li data-target="#categoryExampleSlider" data-slide-to="5"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../imgs/slider1_sport.jpg" alt="sport">
</div>
<div class="item">
<img src="../imgs/slider2_outdoor.jpg" alt="outdoor">
</div>
<div class="item">
<img src="../imgs/slider3_senioren.jpg" alt="ass">
</div>
<div class="item">
<img src="../imgs/slider4_ass.jpg" alt="ass">
</div>
<div class="item">
<img src="../imgs/slider5_risiko.jpg" alt="risiko">
</div>
<div class="item">
<img src="../imgs/slider6_rettervideo.jpg" alt="rettervideo">
</div>
</div>
<a class="left carousel-control" href="#categoryExampleSlider" 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="#categoryExampleSlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
</div>
</div>
The controls and the indicators are displayed but it does not rotate. Neither automatically nor when I click on the controls and/or indicators.
What am I doing wrong here?

Try with bootstrap 3.4.0 version. You need to change the version. It absolutely works. This example is useful for u.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row dark-start d-none d-lg-block">
<div class="col-md-12">
<div id="categoryExampleSlider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#categoryExampleSlider" data-slide-to="0" class="active"></li>
<li data-target="#categoryExampleSlider" data-slide-to="1"></li>
<li data-target="#categoryExampleSlider" data-slide-to="2"></li>
<li data-target="#categoryExampleSlider" data-slide-to="3"></li>
<li data-target="#categoryExampleSlider" data-slide-to="4"></li>
<li data-target="#categoryExampleSlider" data-slide-to="5"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="public/images/1.svg" alt="sport">
</div>
<div class="item">
<img src="public/images/1.svg" alt="outdoor">
</div>
<div class="item">
<img src="public/images/1.svg" alt="ass">
</div>
<div class="item">
<img src="public/images/1.svg" alt="ass">
</div>
<div class="item">
<img src="public/images/1.svg" alt="risiko">
</div>
<div class="item">
<img src="public/images/1.svg" alt="rettervideo">
</div>
</div>
<a class="left carousel-control" href="#categoryExampleSlider" 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="#categoryExampleSlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>
</html>

#premox this is your exact answer I didn't change anything except writing CDN links and your good to go:
Check below snippet copied you exact code.
By this I guess you have wrong jquery link in your code.
.item {
height : 400px;
width : 400px;
border: 1px solid red;
margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row dark-start d-none d-lg-block">
<div class="col-md-12">
<div id="categoryExampleSlider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#categoryExampleSlider" data-slide-to="0" class="active"></li>
<li data-target="#categoryExampleSlider" data-slide-to="1"></li>
<li data-target="#categoryExampleSlider" data-slide-to="2"></li>
<li data-target="#categoryExampleSlider" data-slide-to="3"></li>
<li data-target="#categoryExampleSlider" data-slide-to="4"></li>
<li data-target="#categoryExampleSlider" data-slide-to="5"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../imgs/slider1_sport.jpg" alt="sport">
</div>
<div class="item">
<img src="../imgs/slider2_outdoor.jpg" alt="outdoor">
</div>
<div class="item">
<img src="../imgs/slider3_senioren.jpg" alt="ass">
</div>
<div class="item">
<img src="../imgs/slider4_ass.jpg" alt="ass">
</div>
<div class="item">
<img src="../imgs/slider5_risiko.jpg" alt="risiko">
</div>
<div class="item">
<img src="../imgs/slider6_rettervideo.jpg" alt="rettervideo">
</div>
</div>
<a class="left carousel-control" href="#categoryExampleSlider" 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="#categoryExampleSlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
</div>
</div>

Related

How to Set Tabs inside Bootstrap Carousel

I an trying to implement four tabs/Button with in the Bootstrap Carousel .Here each slide of carousel contains 4 tabs so 4 carousel slides and 4*4 tabs totally here
<!-- The main page goes here -->
<div id="container" class="chart_sectn">
<div class="main">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Forecast</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">Last Week</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">Last Year</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">Trend</label>
<section id="content1">
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 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">
<div class="item active">
<div id="chart_div"></div>
</div>
<div class="item">
<h2>car 1 disp2</h2>
</div>
<div class="item">
<h2>car 1 disp3</h2>
</div>
<div class="item">
<h2>car 1 disp4</h2>
</div>
</div>
<!-- Left and right controls
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>-->
</div>
</div>
<script type="text/javascript">
$('.carousel').carousel({
interval: false
});
</script>
</section>
<section id="content2">
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#step11" data-toggle="tab" aria-expanded="false" class="active"></li>
<li data-target="#step12" data-toggle="tab" aria-expanded="false"></li>
<li data-target="#step13" data-toggle="tab" aria-expanded="false"></li>
<li data-target="#step14" data-toggle="tab" aria-expanded="false"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" id="step11">
<h2>car 2 disp1 </h2>
</div>
<div class="item" id="step12">
<h2>car 2 disp2</h2>
</div>
<div class="item" id="step13">
<h2>car 2 disp3</h2>
</div>
<div class="item" id="step14">
<h2>car 2 disp4</h2>
</div>
</div>
<!-- Left and right controls
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>-->
</div>
</div>
<script type="text/javascript">
$('#myCarousel').carousel();
$('#myCarousel1').carousel();
$('.carousel').carousel({
interval: false
});
</script>
</section>
<section id="content3">
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#step21" data-toggle="tab" aria-expanded="false" class="active"></li>
<li data-target="#step22" data-toggle="tab" aria-expanded="false"></li>
<li data-target="#step23" data-toggle="tab" aria-expanded="false"></li>
<li data-target="#step24" data-toggle="tab" aria-expanded="false"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" id="step21">
<h2>Car3 disp1</h2>
</div>
<div class="item" id="step22">
<div id="chart_div"></div>
<h2>Car3 disp2</h2>
</div>
<div class="item" id="step23">
<h2>Car3 disp3</h2>
</div>
<div class="item" id="step24">
<h2>Car3 disp4</h2>
</div>
</div>
<!-- Left and right controls
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>-->
</div>
</div>
<script type="text/javascript">
$('#myCarousel').carousel();
$('#myCarousel1').carousel();
$('.carousel').carousel({
interval: false
});
</script>
</section>
<section id="content4">
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#step31" data-toggle="tab" aria-expanded="false" class="active"></li>
<li data-target="#step32" data-toggle="tab" aria-expanded="false"></li>
<li data-target="#step33" data-toggle="tab" aria-expanded="false"></li>
<li data-target="#step34" data-toggle="tab" aria-expanded="false"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" id="step31">
<h2>Car4 disp1</h2>
</div>
<div class="item" id="step32">
<h2>Car4 disp2</h2>
</div>
<div class="item" id="step33">
<h2>Car4 disp3</h2>
</div>
<div class="item" id="step34">
<h2>Car4 disp4</h2>
</div>
</div>
<!-- Left and right controls
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>-->
</div>
</div>
<script type="text/javascript">
$('#myCarousel').carousel();
$('#myCarousel1').carousel();
$('.carousel').carousel({
interval: false
});
</script>
</section>
</div>
</div>
The above is my code and here after i click on the each tab a chart will be displayed.If we swipe to the second slide another chart with four tabs like that 4 charts each chart contains 4 tab i wan to place it inside the carosel. any ideas or suggestion to do this in better way

Why will my bootstrap 3.7 carousel not work?

I've been following a guide on how to implement this feature of bootstrap and for the life of me I can't figured out why it isn't working. I have all of the CDNs linked in my header and the Js Script linked. All of them are directly copied from the bootstrap website.
<div id="productCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#productCarousel" data-slide-to="0" class="active"></li>
<li data-target="#productCarousel" data-slide-to="1"></li>
<li data-target="#productCarousel" data-slide-to="2"></li>
<li data-target="#productCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../../static/images/city.jpg">
</div>
<div class="item">
<img src="../../static/images/city.jpg">
</div>
<div class="item">
<img src="../../static/images/city.jpg">
</div>
<div class="item">
<img src="../../static/images/city.jpg">
</div>
</div>
<a class="left carousel-control" href="#productCarousel" 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="#productCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I checked your code an everything works fine.
Check how you embed the libraries.
Boostrap CSS
jQuery
Bootstrap JS
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="productCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#productCarousel" data-slide-to="0" class="active"></li>
<li data-target="#productCarousel" data-slide-to="1"></li>
<li data-target="#productCarousel" data-slide-to="2"></li>
<li data-target="#productCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/800x400">
</div>
<div class="item">
<img src="http://placehold.it/800x400">
</div>
<div class="item">
<img src="http://placehold.it/800x400">
</div>
<div class="item">
<img src="http://placehold.it/800x400">
</div>
</div>
<a class="left carousel-control" href="#productCarousel" 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="#productCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Bootstrap carousel images not loaded

Getting crazy :D Been stuck for three days.
I am trying to put a carousel in my page, I am loading the images located in my machine, each one having a size of 1200*480.
When I test it the images are not shown.
This is the code:
<div class="jumbotron">
<h1>Kurt Angle</h1>
<p>Olympic Gold Medalist, World Champion, Hall of Famer, Living Legend</p></div>
<!--CAROUSEL BEGINES-->
<div class="fluid-container">
<div class="carousel slide"
data ride="carousel"
id="carousel">
<!--indicators--->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!--wrapper of the images(itmes)--->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="Pictures/angle_olympics_croppedxcf.jpg" alt="slide1">
</div>
<div class="item">
<img src="file:///home/davide/Pictures/angle%20cropped%202.jpg"
alt="slide2">
</div>
<div class="item">
<img src="file:///home/davide/Pictures/kurt_angle_cropped_3.jpg"
alt="slide3">
</div>
</div>
<!--now let's put right and left control-->
<a class="left carousel-control"
href="#carousel"
role="button"
data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
CSS:
.jumbotron{
background-color: #241f14 !important;
color: #ffffff;
}
.carousel .item{
height: 100%;
}
Codepen page
Please could you help me?
try this one:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://media.istockphoto.com/photos/overhead-view-of-two-business-persons-in-the-lobby-picture-id520791880?s=2048x2048" alt="Image">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="http://media.istockphoto.com/photos/friends-connection-digital-devices-technology-network-concept-picture-id525208898?s=2048x2048" alt="Image">
<div class="carousel-caption">
<h3>Lorem</h3>
<p>Lorem ipsum...</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>
</div>
DEMO HERE

Bootstrap Carousel Issue: indicator click

My Carousel isn't working. The problem is that it's not moving next when I click on indicator. I also tried to include carousel.js but all in vain.
Here is snippet:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicator-->
<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>
</ol>
<!-- wrapper of slide-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../images/banner/slide1.jpg">
</div>
<div class="carousel-caption">
<h4>Find Your Agent Here</h4>
<a class="btn btn-info">Find Agent</a>
</div>
<div class="item">
<img src="../images/banner/slide2.jpg">
</div>
<div class="item">
<img src="../images/banner/slide3.jpg">
</div>
</div>
<!-- Carousel Controler-->
<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>
</div><!-- End of Carousel -->
This should help out.
http://getbootstrap.com/javascript/#carousel
You need to include jquery and bootstrap to use that plugin.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicator-->
<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>
</ol>
<!-- wrapper of slide-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg">
</div>
<div class="carousel-caption">
<h4>Find Your Agent Here</h4>
<a class="btn btn-info">Find Agent</a>
</div>
<div class="item">
<img src="http://im.rediff.com/news/2016/mar/01smith1.jpg">
</div>
<div class="item">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg">
</div>
</div>
<!-- Carousel Controler-->
<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>
</div>
<!-- End of Carousel -->

Cannot load bootstrap carousel

I have tried doing carousel in bootstrap but it does not load on Firefox or Google chrome in Windows 8.This is the code I wrote,so can someone please explain to me what i did wrong.
<html>
<body>
<div id="mycarousel" class="carousel slide">
<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>
</ol>
<div class="carousel-inner">
<div class="item">
<img src="img/Capture.PNG" />
<div class="item">
<img src="img/img1.PNG" />
<div class="item">
<img src="img/img3.PNG" />
</div>
<a class="left carousel-control" href="#mycarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#mycarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
You should include carousel.js in bootstrap3 and close your div item
Please include carousel.js in your html document
Refer to download carousel.js:
http://getbootstrap.com/javascript/#carousel
Close your div "item" tag, then set the first "item" to "active"
<div class="carousel-inner">
<div class="active item">
<img src="Capture.PNG" />
</div>
<div class="item">
<img src="img1.PNG" />
</div>
<div class="item">
<img src="img3.PNG" />
</div>
</div>
Then the most important thing, is don't forget to load "bootstrap.css"
=> http://getbootstrap.com/2.3.2/assets/css/bootstrap.css.
Because bootsrap used that css file.

Categories