daily pastebin goal
14%
SHARE
TWEET

Untitled

a guest Jan 20th, 2019 60 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="well">
  2.  
  3. <div id="myCarousel" class="carousel slide">
  4.  
  5. <ol class="carousel-indicators">
  6.     <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  7.     <li data-target="#myCarousel" data-slide-to="1"></li>
  8.     <li data-target="#myCarousel" data-slide-to="2"></li>
  9. </ol>
  10.  
  11. <!-- Carousel items -->
  12. <div class="carousel-inner">
  13.  
  14. <div class="item active">
  15.     <div class="row-fluid">
  16.       <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
  17.       <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
  18.       <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
  19.       <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
  20.     </div><!--/row-fluid-->
  21. </div><!--/item-->
  22.  
  23. <div class="item">
  24.     <div class="row-fluid">
  25.         <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
  26.         <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
  27.         <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
  28.         <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
  29.     </div><!--/row-fluid-->
  30. </div><!--/item-->
  31.  
  32. <div class="item">
  33.     <div class="row-fluid">
  34.         <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
  35.         <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
  36.         <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
  37.         <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
  38.     </div><!--/row-fluid-->
  39. </div><!--/item-->
  40.  
  41. </div><!--/carousel-inner-->
  42.  
  43. <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
  44. <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
  45. </div><!--/myCarousel-->
  46.  
  47. </div><!--/well-->
  48.  
  49. <!-- This is just a little bit of custom CSS code to enhance things. Feel free to place this in your main CSS file. I've commented to say what each bit does. -->
  50. <style type="text/css">
  51. /* Removes the default 20px margin and creates some padding space for the indicators and controls */
  52. .carousel {
  53.     margin-bottom: 0;
  54.     padding: 0 40px 30px 40px;
  55. }
  56. /* Reposition the controls slightly */
  57. .carousel-control {
  58.     left: -12px;
  59. }
  60. .carousel-control.right {
  61.     right: -12px;
  62. }
  63. /* Changes the position of the indicators */
  64. .carousel-indicators {
  65.     right: 50%;
  66.     top: auto;
  67.     bottom: 0px;
  68.     margin-right: -19px;
  69. }
  70. /* Changes the colour of the indicators */
  71. .carousel-indicators li {
  72.     background: #c0c0c0;
  73. }
  74. .carousel-indicators .active {
  75. background: #333333;
  76. }
  77. </style>
  78.  
  79. <!-- Call jQuery 1.9, call bootstrap.js and run the carousel when the DOM is ready. Slide every 10 seconds. -->
  80. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  81. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  82. <script type="text/javascript">
  83. $(document).ready(function() {
  84.     $('#myCarousel').carousel({
  85.     interval: 10000
  86.     })
  87. });
  88. </script>
  89.    
  90. <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
  91. <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
  92.    
  93. <a class="carousel-control left" href="#myCarousel" data-slide="prev">
  94.         <span class="glyphicon glyphicon-chevron-left"></span></a>
  95. <a class="carousel-control right" href="#myCarousel" data-slide="next">
  96.         <span class="glyphicon glyphicon-chevron-right"></span></a>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top