Bootstrap slider doesn't work - html

Question

I downloaded html and css codes from bootstrap then run it on my local server but the slider function doesn't work. The screen just dropped below when I click the arrow. I don't know why it doesn't work in spite of just copied the codes below from bootstrap.
<div class="container">
<div class="row">
<div class="row">
<div class="col-md-9">
<h3>
Carousel Product Cart Slider</h3>
</div>
<div class="col-md-3">
<!-- Controls -->
<div class="controls pull-right hidden-xs">
<a class="left fa fa-chevron-left btn btn-success" href="#carousel-example"
data-slide="prev"></a>
<a class="right fa fa-chevron-right btn btn-success" href="#carousel-example"
data-slide="next"></a>
</div>
</div>
</div>
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Sample Product</h5>
<h5 class="price-text-color">
$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Product Example</h5>
<h5 class="price-text-color">
$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Next Sample Product</h5>
<h5 class="price-text-color">
$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Sample Product</h5>
<h5 class="price-text-color">
$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Product with Variants</h5>
<h5 class="price-text-color">
$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Grouped Product</h5>
<h5 class="price-text-color">
$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Product with Variants</h5>
<h5 class="price-text-color">
$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Product with Variants</h5>
<h5 class="price-text-color">
$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
css codes
/* carousel */
.media-carousel
{
margin-bottom: 0;
padding: 0 40px 30px 40px;
margin-top: 30px;
}
/* Previous button */
.media-carousel .carousel-control.left
{
left: -12px;
background-image: none;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
height: 40px;
width : 40px;
margin-top: 30px
}
/* Next button */
.media-carousel .carousel-control.right
{
right: -12px !important;
background-image: none;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
height: 40px;
width : 40px;
margin-top: 30px
}
/* Changes the position of the indicators */
.media-carousel .carousel-indicators
{
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the colour of the indicators */
.media-carousel .carousel-indicators li
{
background: #c0c0c0;
}
.media-carousel .carousel-indicators .active
{
background: #333333;
}
.media-carousel img
{
width: 250px;
height: 100px
}
/* End carousel */

Answer 1

Please add the following css and scripts in your solution and hope it would be work.
In head section scripts links
<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"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
have look in snippet, It will work proper in full page
<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"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="row">
<div class="col-md-9">
<h3>
Carousel Product Cart Slider</h3>
</div>
<div class="col-md-3">
<!-- Controls -->
<div class="controls pull-right hidden-xs">
<a class="left fa fa-chevron-left btn btn-success" href="#carousel-example"
data-slide="prev"></a>
<a class="right fa fa-chevron-right btn btn-success" href="#carousel-example"
data-slide="next"></a>
</div>
</div>
</div>
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Sample Product</h5>
<h5 class="price-text-color">
$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Product Example</h5>
<h5 class="price-text-color">
$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Next Sample Product</h5>
<h5 class="price-text-color">
$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Sample Product</h5>
<h5 class="price-text-color">
$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Product with Variants</h5>
<h5 class="price-text-color">
$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Grouped Product</h5>
<h5 class="price-text-color">
$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Product with Variants</h5>
<h5 class="price-text-color">
$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Product with Variants</h5>
<h5 class="price-text-color">
$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
jsfiddle links
https://jsfiddle.net/6y3za13j/