Advertisement
danrim

slick slider

Oct 25th, 2019
408
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.76 KB | None | 0 0
  1. <!-- Use slick slider -->
  2. <!-- google type slick slider cdn
  3.    https://cdnjs.com/libraries/slick-carousel
  4.    copy tag <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"> AND add to head above style.css
  5.    copy tag <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"> ABD place it under the first one slider
  6.    copy slick js script https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js AND place it bellow bootstrap script
  7.  -->
  8.  
  9.   <!-- head -->
  10.   <!-- Required meta tags -->
  11.   <meta charset="utf-8">
  12.   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  13.   <!-- Bootstrap CSS -->
  14.   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
  15.  crossorigin="anonymous">
  16.   <!-- slick slider -->
  17.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
  18.   <!-- slick slider theme -->
  19.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
  20.  
  21.  
  22.  
  23.   <!-- body -->
  24.   <!-- TESTIMONIALS -->
  25.   <section id="testimonials" class="p-4 bg-dark text-white">
  26.     <div class="container">
  27.       <h2 class="text-center">Testimonials</h2>
  28.       <div class="row text-center">
  29.         <div class="col">
  30.           <div class="slider">
  31.             <div>
  32.               <blockquote class="blockquote">
  33.                 <p class="mb-0">
  34.                   Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, fuga eaque.
  35.                 </p>
  36.                 <footer class="blockquote-footer">John Doe From
  37.                   <cite title="Company 1">Company 1</cite>
  38.                 </footer>
  39.               </blockquote>
  40.             </div>
  41.             <div>
  42.               <blockquote class="blockquote">
  43.                 <p class="mb-0">
  44.                   Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, fuga eaque.
  45.                 </p>
  46.                 <footer class="blockquote-footer">Sam Smith From
  47.                   <cite title="Company 2">Company 2</cite>
  48.                 </footer>
  49.               </blockquote>
  50.             </div>
  51.             <div>
  52.               <blockquote class="blockquote">
  53.                 <p class="mb-0">
  54.                   Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, fuga eaque.
  55.                 </p>
  56.                 <footer class="blockquote-footer">Megan Williams From
  57.                   <cite title="Company 3">Company 3</cite>
  58.                 </footer>
  59.               </blockquote>
  60.             </div>
  61.           </div><!-- end of slider -->
  62.         </div><!-- end of col -->
  63.       </div><!-- end of row -->
  64.     </div><!-- end of container -->
  65.   </section>
  66.  
  67. <!-- Bootstrap scripts -->
  68.   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
  69.  crossorigin="anonymous"></script>
  70.   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
  71.  crossorigin="anonymous"></script>
  72.   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
  73.  crossorigin="anonymous"></script>
  74.  
  75.   <!-- slick slider js -->
  76.   <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
  77.   <script>
  78.     // Init slider
  79.     $('.slider').slick({
  80.       infinite: true,
  81.       slideToShow: 1,
  82.       slideToScroll: 1
  83.     });
  84.   </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement