If you are building any website using the bootstrap framework and want to add media slider carousel of your client above the footer area, then keep your close attention in this post as I am going to share how to create bootstrap media slider carousel.
Follow the below steps to create product quick view popup using HTML, CSS, and Bootstrap framework.
Step 1) Include the below JS & CSS file inside the HEAD TAG.
|
1 2 3 |
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> |
Step 2) Add the HTML code in your web page after the BODY TAG start.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<div class="container"> <div class="row"> <h2>Media Slider Carousel BS3</h2> </div> <div class='row'> <div class='col-md-12'> <div class="carousel slide media-carousel" id="media"> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-md-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> <div class="col-md-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> <div class="col-md-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> <div class="col-md-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> <div class="col-md-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> <div class="col-md-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-md-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> <div class="col-md-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> <div class="col-md-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> <div class="col-md-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div><div class="col-md-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> <div class="col-md-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-md-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> <div class="col-md-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> <div class="col-md-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> <div class="col-md-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> <div class="col-md-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> <div class="col-md-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> </div> </div> </div> <a data-slide="prev" href="#media" class="left carousel-control">‹</a> <a data-slide="next" href="#media" class="right carousel-control">›</a> </div> </div> </div> </div> |
Step 3) Add the below CSS code in your web page after the HEAD TAG start, inside STYLE tag.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
/* 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 */ |
Step 4) Add the below JS code in your web page after the HEAD TAG start, inside SCRIPT tag.
|
1 2 3 4 5 6 |
$(document).ready(function() { $('#media').carousel({ pause: true, interval: false, }); }); |
After following the above steps, media slider will look like the below screenshot.
I hope this tutorial helps you, if you have any questions regarding WordPress, then feel free to put your comments in below comment section. Do you like & share this article with your friends, and don’t forget to follow us on Facebook and Twitter to learn cool tutorials.
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
Article Tags: Bootstrap, Bootstrap Media Slider Carousel, bootstrap slider, bootstrap slider example, bootstrap slider template