Bootstrap carousel

The Bootstrap carousel is a flexible, responsive way that is used to add a slider to your webpage. It is very responsive and flexible enough to allow, images, iframes, videos, or any other type of content that you want to add.

The Carousel Plugin:

The carousel plugin is a component for cycling through element, like a carousel. If you want to add plugin functionality individually, then you have to use carousel.js file or all at once (using “bootstrap.js” or “bootstrap.min.js”).

Bootstrap carousel Example

Let’s take a carousel example and see how to create a basic carousel.

             <title>Bootstrap Carousel</title>      <style data-penci-cache='cached' id='soledad_pagespeed-689ebea8f9937d180166a9a12d07bde4'>html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}[hidden],template{display:none;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:700;}h1{margin:.67em 0;font-size:2em;}img{border:0;}svg:not(:root){overflow:hidden;}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto;}input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;}@media print { *,:after,:before{color:#000 !important;text-shadow:none !important;background:0 0 !important;-webkit-box-shadow:none !important;box-shadow:none !important;}a,a:visited{text-decoration:underline;}a[href]:after{content:" (" attr(href) ")";}a[href^="javascript:"]:after,a[href^="#"]:after{content:"";}img,tr{page-break-inside:avoid;}img{max-width:100% !important;}h2,h3,p{orphans:3;widows:3;}h2,h3{page-break-after:avoid;} }*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0);}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;}a{color:#337ab7;text-decoration:none;}a:focus,a:hover{color:#23527c;text-decoration:underline;}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}img{vertical-align:middle;}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee;}[role=button]{cursor:pointer;}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px;}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px;}.h1,h1{font-size:36px;}.h2,h2{font-size:30px;}.h3,h3{font-size:24px;}.h4,h4{font-size:18px;}.h5,h5{font-size:14px;}p{margin:0 0 10px;}ol,ul{margin-top:0;margin-bottom:10px;}ol ol,ol ul,ul ol,ul ul{margin-bottom:0;}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}@media (min-width:768px) { .container{width:750px;} }@media (min-width:992px) { .container{width:970px;} }@media (min-width:1200px) { .container{width:1170px;} }label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700;}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}input[type=checkbox],input[type=radio]{margin:4px 0 0;margin-top:1px \9;line-height:normal;}input[type=file]{display:block;}input[type=range]{display:block;width:100%;}select[multiple],select[size]{height:auto;}input[type=file]:focus,input[type=checkbox]:focus,input[type=radio]:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}input[type=search]{-webkit-appearance:none;}fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled]{cursor:not-allowed;}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}@-o-keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}@keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05);}.well-lg{padding:24px;border-radius:6px;}.well-sm{padding:9px;border-radius:3px;}.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" ";}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both;}@-ms-viewport{width:device-width;}</style><link rel="stylesheet" id="689ebea8f9937d180166a9a12d07bde4" data-soledad_pagespeed-delay data-href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<style> .item > img, .carousel-inner > .item > a > img { width: 80%; margin: auto; }]]></style>
<div class="container">
<h1>Carousel Example</h1>
<div class="carousel slide" data-ride="carousel" id="myCarousel">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#myCarousel">
<li data-slide-to="1" data-target="#myCarousel">
<li data-slide-to="2" data-target="#myCarousel">     </ol>
<div class="carousel-inner" role="listbox">
<div class="item active">         <img decoding="async" alt="jokes 1" class=" penci-lazy penci-lazy"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%203%202'%3E%3C/svg%3E" data-src="../wp-content/static/images/jokes1.jpg">       </div>
<div class="item">         <img decoding="async" alt="jokes 2" class=" penci-lazy penci-lazy"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%203%202'%3E%3C/svg%3E" data-src="../wp-content/static/images/jokes2.jpg">       </div>
<div class="item">         <img decoding="async" alt="jokes 3" class=" penci-lazy penci-lazy"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%203%202'%3E%3C/svg%3E" data-src="../wp-content/static/images/jokes3.jpg">       </div>
</div>
<p>           <a class="left carousel-control" data-slide="prev" href="#myCarousel" role="button">       <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>       <span class="sr-only">Previous</span>     </a>     <a class="right carousel-control" data-slide="next" href="#myCarousel" role="button">       <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>       <span class="sr-only">Next</span>     </a> </p></div>
</div>
<p>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" id="e9cf29fffee32671775f3a96926272c8" type="PenciLazyScript"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" id="093b7f6d4492f722f07cfbe4c0fb3095" type="PenciLazyScript"></script>     </p>

Test it Now

Bootstrap carousel Example: add captions to slides

If you want to add captions to the slides, then you have to add <div class="carousel-caption"> within each <div class="item"> .

             <title>Job</title>      <style data-penci-cache='cached' id='soledad_pagespeed-689ebea8f9937d180166a9a12d07bde4'>html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}[hidden],template{display:none;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:700;}h1{margin:.67em 0;font-size:2em;}img{border:0;}svg:not(:root){overflow:hidden;}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto;}input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;}@media print { *,:after,:before{color:#000 !important;text-shadow:none !important;background:0 0 !important;-webkit-box-shadow:none !important;box-shadow:none !important;}a,a:visited{text-decoration:underline;}a[href]:after{content:" (" attr(href) ")";}a[href^="javascript:"]:after,a[href^="#"]:after{content:"";}img,tr{page-break-inside:avoid;}img{max-width:100% !important;}h2,h3,p{orphans:3;widows:3;}h2,h3{page-break-after:avoid;} }*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0);}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;}a{color:#337ab7;text-decoration:none;}a:focus,a:hover{color:#23527c;text-decoration:underline;}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}img{vertical-align:middle;}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee;}[role=button]{cursor:pointer;}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px;}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px;}.h1,h1{font-size:36px;}.h2,h2{font-size:30px;}.h3,h3{font-size:24px;}.h4,h4{font-size:18px;}.h5,h5{font-size:14px;}p{margin:0 0 10px;}ol,ul{margin-top:0;margin-bottom:10px;}ol ol,ol ul,ul ol,ul ul{margin-bottom:0;}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}@media (min-width:768px) { .container{width:750px;} }@media (min-width:992px) { .container{width:970px;} }@media (min-width:1200px) { .container{width:1170px;} }label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700;}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}input[type=checkbox],input[type=radio]{margin:4px 0 0;margin-top:1px \9;line-height:normal;}input[type=file]{display:block;}input[type=range]{display:block;width:100%;}select[multiple],select[size]{height:auto;}input[type=file]:focus,input[type=checkbox]:focus,input[type=radio]:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}input[type=search]{-webkit-appearance:none;}fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled]{cursor:not-allowed;}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}@-o-keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}@keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05);}.well-lg{padding:24px;border-radius:6px;}.well-sm{padding:9px;border-radius:3px;}.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" ";}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both;}@-ms-viewport{width:device-width;}</style><link rel="stylesheet" id="689ebea8f9937d180166a9a12d07bde4" data-soledad_pagespeed-delay data-href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<style> .item > img, .carousel-inner > .item > a > img { width: 80%; margin: auto; }]]></style>
<div class="container">
<h1>Carousel Example</h1>
<div class="carousel slide" data-ride="carousel" id="myCarousel">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#myCarousel">
<li data-slide-to="1" data-target="#myCarousel">
<li data-slide-to="2" data-target="#myCarousel">     </ol>
<div class="carousel-inner" role="listbox">
<div class="item active">         <img decoding="async" alt="jokes 1" class=" penci-lazy penci-lazy"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%203%202'%3E%3C/svg%3E" data-src="../wp-content/static/images/jokes1.jpg">         
<h3>Santa-Banta</h3>
<p>Read Santa-Banta jokes at tutoraspire.</p>
</div>
<div class="item">         <img decoding="async" alt="jokes 2" class=" penci-lazy penci-lazy"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%203%202'%3E%3C/svg%3E" data-src="../wp-content/static/images/jokes2.jpg">          
<h3>Santa-Banta</h3>
<p>Read Santa-Banta jokes at tutoraspire.</p>
</div>
<div class="item">         <img decoding="async" alt="jokes 3" class=" penci-lazy penci-lazy"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%203%202'%3E%3C/svg%3E" data-src="../wp-content/static/images/jokes3.jpg">          
<h3>Santa-Banta</h3>
<p>Read Santa-Banta jokes at tutoraspire.</p>
</div>
</div>
<p>           <a class="left carousel-control" data-slide="prev" href="#myCarousel" role="button">       <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>       <span class="sr-only">Previous</span>     </a>     <a class="right carousel-control" data-slide="next" href="#myCarousel" role="button">       <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>       <span class="sr-only">Next</span>     </a> </p></div>
</div>
<p>   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" id="e9cf29fffee32671775f3a96926272c8" type="PenciLazyScript"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" id="093b7f6d4492f722f07cfbe4c0fb3095" type="PenciLazyScript"></script>     </p>

Test it Now

Next TopicBootstrap Progress Bar

Bootstrap Carousel

Bootstrap carousel

Bootstrap carousel Example

Bootstrap carousel Example: add captions to slides

Bootstrap 4 Textarea

Bootstrap Popover

You may also like