API tools faq
paste
Advertisement
valno

car-slider

valno
Jan 20th, 2019
2,606
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.14 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3.   <head>
  4.     <title>Title</title>
  5.     <!-- Required meta tags -->
  6.     <meta charset="utf-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  8.  
  9.     <!-- Bootstrap CSS -->
  10.     <link rel="stylesheet" href="asset/css/bootstrap.min.css">
  11.     <!-- Custom CSS -->
  12.     <link rel="stylesheet" href="asset/css/card-slider.css">
  13.   </head>
  14.   <body>  
  15.     <!-- Nav -->
  16.     <nav class="navbar navbar-expand-sm navbar-light bg-light">
  17.         <a class="navbar-brand" href="#">Navbar</a>
  18.         <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
  19.            aria-expanded="false" aria-label="Toggle navigation">
  20.             <span class="navbar-toggler-icon"></span>
  21.         </button>
  22.         <div class="collapse navbar-collapse" id="collapsibleNavId">
  23.             <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
  24.                 <li class="nav-item active">
  25.                     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  26.                 </li>
  27.                 <li class="nav-item">
  28.                     <a class="nav-link" href="#">Link</a>
  29.                 </li>
  30.                 <li class="nav-item dropdown">
  31.                     <a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
  32.                     <div class="dropdown-menu" aria-labelledby="dropdownId">
  33.                         <a class="dropdown-item" href="#">Action 1</a>
  34.                         <a class="dropdown-item" href="#">Action 2</a>
  35.                     </div>
  36.                 </li>
  37.             </ul>
  38.             <form class="form-inline my-2 my-lg-0">
  39.                 <input class="form-control mr-sm-2" type="text" placeholder="Search">
  40.                 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  41.             </form>
  42.         </div>
  43.     </nav>
  44.     <!-- ./ Nav -->
  45.     <div class="container">
  46.    
  47.     <!-- Card Slider -->
  48.     <div id="carouselId" class="carousel slide" data-ride="carousel">
  49.         <ol class="carousel-indicators">
  50.             <li data-target="#carouselId" data-slide-to="0" class="active"></li>
  51.             <li data-target="#carouselId" data-slide-to="1"></li>
  52.             <li data-target="#carouselId" data-slide-to="2"></li>
  53.         </ol>
  54.         <div class="carousel-inner row w-100 mx-auto">
  55.             <div class="carousel-item active col-md-4">
  56.                 <div class="card">
  57.                     <img class="card-img-top" src="img/slide1.png" alt="">
  58.                     <div class="card-body">
  59.                         <h4 class="card-title">Title</h4>
  60.                         <p class="card-text">Text</p>
  61.                     </div>
  62.                 </div>
  63.             </div>
  64.             <div class="carousel-item col-md-4">
  65.                 <div class="card">
  66.                     <img class="card-img-top" src="img/slide2.png" alt="">
  67.                     <div class="card-body">
  68.                         <h4 class="card-title">Title</h4>
  69.                         <p class="card-text">Text</p>
  70.                     </div>
  71.                 </div>
  72.             </div>
  73.             <div class="carousel-item col-md-4">
  74.                 <div class="card">
  75.                     <img class="card-img-top" src="img/slide3.png" alt="">
  76.                     <div class="card-body">
  77.                         <h4 class="card-title">Title</h4>
  78.                         <p class="card-text">Text</p>
  79.                     </div>
  80.                 </div>
  81.             </div>
  82.             <div class="carousel-item col-md-4">
  83.                 <div class="card">
  84.                     <img class="card-img-top" src="img/slide1.png" alt="">
  85.                     <div class="card-body">
  86.                         <h4 class="card-title">Title</h4>
  87.                         <p class="card-text">Text</p>
  88.                     </div>
  89.                 </div>
  90.             </div>
  91.             <div class="carousel-item col-md-4">
  92.                 <div class="card">
  93.                     <img class="card-img-top" src="img/slide3.png" alt="">
  94.                     <div class="card-body">
  95.                         <h4 class="card-title">Title</h4>
  96.                         <p class="card-text">Text</p>
  97.                     </div>
  98.                 </div>
  99.             </div>
  100.             <div class="carousel-item col-md-4">
  101.                 <div class="card">
  102.                     <img class="card-img-top" src="img/slide1.png" alt="">
  103.                     <div class="card-body">
  104.                         <h4 class="card-title">Title</h4>
  105.                         <p class="card-text">Text</p>
  106.                     </div>
  107.                 </div>
  108.             </div>
  109.             <div class="carousel-item col-md-4">
  110.                 <div class="card">
  111.                     <img class="card-img-top" src="img/slide2.png" alt="">
  112.                     <div class="card-body">
  113.                         <h4 class="card-title">Title</h4>
  114.                         <p class="card-text">Text</p>
  115.                     </div>
  116.                 </div>
  117.             </div>
  118.         </div>
  119.         <a class="carousel-control-prev" href="#carouselId" role="button" data-slide="prev">
  120.             <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  121.             <span class="sr-only">Previous</span>
  122.         </a>
  123.         <a class="carousel-control-next" href="#carouselId" role="button" data-slide="next">
  124.             <span class="carousel-control-next-icon" aria-hidden="true"></span>
  125.             <span class="sr-only">Next</span>
  126.         </a>
  127.     </div>
  128.     <!-- End Card Slider -->
  129.     </div>  
  130.     <!-- Optional JavaScript -->
  131.     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  132.     <script src="asset/js/jquery.min.js"></script>
  133.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  134.     <script src="asset/js/bootstrap.min.js" ></script>
  135.   </body>
  136. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!