<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h1> Click Me </h1> <!-- Large modal --> <button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <h3>My First slide title</h3> <p> My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. </p> <p> My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. </p> </div> <div class="item"> <h3>My Second slide title</h3> <p> My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. </p> <p> My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. </p> </div> <div class="item"> <h3>My Third slide title</h3> <p> My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. </p> <p> My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. My slide content. </p> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </div> </div> </div>

body { padding-top: 20px; } .btn-default { top: 25%; left:25%; color: #999; background: #fffccc; } .carousel-inner .item, .modal-content {min-height:400px;} .carousel-inner .item {padding: 20px 140px;} /* .carousel-inner > .item { -webkit-transition: 5.0s ease-in-out left; -moz-transition: 5.0s ease-in-out left; -o-transition: 5.0s ease-in-out left; transition: 5.0s ease-in-out left; } */

$('.carousel').carousel({ interval: 6000 })