Suggest a feature
×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
0
Language: HTML
Posted by: Jacob Mahto
Added: Aug 22, 2018 5:21 AM
Views: 2
A sliding carousel with arrows and captions
  1. <div id="slider1" class="carousel slide mb-5" data-ride="carousel">
  2.             <!--Slides indicators-->
  3.             <ol class="carousel-indicators">
  4.                 <li class="active" data-target="#slider1" data-slide-to="0"></li>
  5.                 <li data-target="#slider1" data-slide-to="0"></li>
  6.                 <li data-target="#slider1" data-slide-to="0"></li>
  7.             </ol>
  8.  
  9.             <!--All images in this block-->
  10.             <div class="carousel-inner" role="listbox">
  11.                 <div class="carousel-item active">
  12.                     <img class="d-block img-fluid" src="img/galaxy.jpg" alt="First Slide">
  13.                     <div class="carousel-caption d-none d-md-block">
  14.                         <h3>Slide one</h3>
  15.                         <p>Here are the details of Slide 1.</p>
  16.                     </div>
  17.                 </div>
  18.                 <div class="carousel-item">
  19.                     <img class="d-block img-fluid" src="img/1.jpg" alt="First Slide">
  20.                     <div class="carousel-caption d-none d-md-block">
  21.                         <h3>Slide one</h3>
  22.                         <p>Here are the details of Slide 1.</p>
  23.                     </div>
  24.                 </div>
  25.                 <div class="carousel-item">
  26.                     <img class="d-block img-fluid" src="img/pixels.jpg" alt="First Slide">
  27.                     <div class="carousel-caption d-none d-md-block">
  28.                         <h3>Slide one</h3>
  29.                         <p>Here are the details of Slide 1.</p>
  30.                     </div>
  31.                 </div>                
  32.             </div>
  33.  
  34.             <!--Control here-->
  35.             <a href="#slider1" class="carousel-control-prev" data-slide="prev">
  36.                 <span class="carousel-control-prev-icon"></span>
  37.             </a>
  38.             <a href="#slider1" class="carousel-control-next" data-slide="next">
  39.                 <span class="carousel-control-next-icon"></span>
  40.             </a>
  41.         </div>
  42.  
  43.         <!-- Javascript here -->
  44.         <script>
  45.         $('.carousel').carousel({
  46.            interval:3000,
  47.            keyboard:true,
  48.            pause:'hover',
  49.            wrap:true
  50.         });
  51.        
  52. //        $('#slider1').on('slide.bs.carousel',function(){
  53. //            console.log('slide');
  54. //        });
  55. //        $('#slider1').on('slid.bs.carousel',function(){
  56. //            console.log('slid');
  57. //        });
  58.         </script>