Suggest a feature
×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
0
Language: HTML
Posted by: Kelly Walker
Added: Aug 13, 2018 9:14 PM
Modified: Aug 13, 2018 9:18 PM
Views: 6
Tags: no tags
Basic carousel with Java script control code and supporting CSS for image attachment
  1.  <section id="showcase">
  2.             <div id="myCarousel" class="carousel slide" data-ride="carousel">
  3.                 <ol class="carousel-indicators">
  4.                     <li class="active" data-target="#myCarousel" data-slide-to="0"></li>
  5.                     <li  data-target="#myCarousel" data-slide-to="1"></li>
  6.                     <li data-target="#myCarousel" data-slide-to="2"></li>
  7.                 </ol>
  8.  
  9.                 <div class="carousel-inner ">
  10.                     <div class="carousel-item carousel-image-1 active">
  11.                         <div class="container">
  12.                             <div class="carousel-caption d-none d-sm-block text-right mb-5 ">
  13.                                 <h1 class="display-3">Heading One</h1>
  14.                                 <p class="lead">
  15.                                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, numquam, nobis blanditiis accusantium quo iusto magni voluptatibus tenetur neque dicta!
  16.                                 </p>
  17.                                 <a href="#" class="btn danger btn-lg">Sign Up Now</a>
  18.                             </div>
  19.                         </div>
  20.                     </div>
  21.                     <div class="carousel-item carousel-image-2 ">
  22.                         <div class="container ">
  23.                             <div class="carousel-caption d-none d-sm-block  mb-5">
  24.                                 <h1 class="display-3">Heading Two</h1>
  25.                                 <p class="lead">
  26.                                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, numquam, nobis blanditiis accusantium quo iusto magni voluptatibus tenetur neque dicta!
  27.                                 </p>
  28.                                 <a href="#" class="btn danger btn-lg">Learn More</a>
  29.                             </div>
  30.                         </div>
  31.                     </div>
  32.                     <div class="carousel-item carousel-image-3">
  33.                         <div class="container">
  34.                             <div class="carousel-caption d-none d-sm-block text-left mb-5 ">
  35.                                 <h1 class="display-3">Heading Three</h1>
  36.                                 <p class="lead">
  37.                                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, numquam, nobis blanditiis accusantium quo iusto magni voluptatibus tenetur neque dicta!
  38.                                 </p>
  39.                                 <a href="#" class="btn danger btn-lg">Sign Up Now</a>
  40.                             </div>
  41.                         </div>
  42.                     </div>
  43.                 </div>
  44.                 <a href="#myCarousel" data-slide="prev" class="carousel-control-prev">
  45.                     <span class="carousel-control-prev-icon"></span>
  46.                 </a>
  47.                 <a href="#myCarousel" data-slide="next" class="carousel-control-next">
  48.                     <span class="carousel-control-next-icon"></span>
  49.                 </a>
  50.             </div>
  51.         </section>
  52.  
  53.         <script>
  54.             $(' .carousel').carousel({
  55.                 interval: 6000,
  56.                 pause: 'hover'
  57.             });
  58.         </script>
  59.        
  60.         <style type="text/css">
  61.           .carousel-item {
  62.                 height: 450px;
  63.             }
  64.  
  65.             .carousel-image-1{
  66.                 background: url('img/tech-01.jpg' );
  67.                 background-size: cover;
  68.             }
  69.             .carousel-image-2{
  70.                 background: url('img/tech-02.jpg' );
  71.                 background-size: cover;
  72.             }
  73.             .carousel-image-3{
  74.                 background: url('img/tech-03.jpg' );
  75.                 background-size: cover;
  76.             }
  77.        </style>