index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>Slick Playground</title>
   5   <meta charset="UTF-8">
   6   <link rel="stylesheet" type="text/css" href="./slick/slick.css">
   7   <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
   8   <style type="text/css">
   9     html, body {
  10       margin: 0;
  11       padding: 0;
  12     }
  13
  14     * {
  15       box-sizing: border-box;
  16     }
  17
  18     .slider {
  19         width: 50%;
  20         margin: 100px auto;
  21     }
  22
  23     .slick-slide {
  24       margin: 0px 20px;
  25     }
  26
  27     .slick-slide img {
  28       width: 100%;
  29     }
  30
  31     .slick-prev:before,
  32     .slick-next:before {
  33         color: black;
  34     }
  35   </style>
  36 </head>
  37 <body>
  38
  39   <section class="regular slider">
  40     <div>
  41       <img src="http://placehold.it/350x300?text=1">
  42     </div>
  43     <div>
  44       <img src="http://placehold.it/350x300?text=2">
  45     </div>
  46     <div>
  47       <img src="http://placehold.it/350x300?text=3">
  48     </div>
  49     <div>
  50       <img src="http://placehold.it/350x300?text=4">
  51     </div>
  52     <div>
  53       <img src="http://placehold.it/350x300?text=5">
  54     </div>
  55     <div>
  56       <img src="http://placehold.it/350x300?text=6">
  57     </div>
  58   </section>
  59
  60   <section class="center slider">
  61     <div>
  62       <img src="http://placehold.it/350x300?text=1">
  63     </div>
  64     <div>
  65       <img src="http://placehold.it/350x300?text=2">
  66     </div>
  67     <div>
  68       <img src="http://placehold.it/350x300?text=3">
  69     </div>
  70     <div>
  71       <img src="http://placehold.it/350x300?text=4">
  72     </div>
  73     <div>
  74       <img src="http://placehold.it/350x300?text=5">
  75     </div>
  76     <div>
  77       <img src="http://placehold.it/350x300?text=6">
  78     </div>
  79     <div>
  80       <img src="http://placehold.it/350x300?text=7">
  81     </div>
  82     <div>
  83       <img src="http://placehold.it/350x300?text=8">
  84     </div>
  85     <div>
  86       <img src="http://placehold.it/350x300?text=9">
  87     </div>
  88   </section>
  89
  90   <section class="variable slider">
  91     <div>
  92       <img src="http://placehold.it/350x300?text=1">
  93     </div>
  94     <div>
  95       <img src="http://placehold.it/200x300?text=2">
  96     </div>
  97     <div>
  98       <img src="http://placehold.it/100x300?text=3">
  99     </div>
 100     <div>
 101       <img src="http://placehold.it/200x300?text=4">
 102     </div>
 103     <div>
 104       <img src="http://placehold.it/350x300?text=5">
 105     </div>
 106     <div>
 107       <img src="http://placehold.it/300x300?text=6">
 108     </div>
 109   </section>
 110
 111   <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
 112   <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
 113   <script type="text/javascript">
 114     $(document).on('ready', function() {
 115       $(".regular").slick({
 116         dots: true,
 117         infinite: true,
 118         slidesToShow: 3,
 119         slidesToScroll: 3
 120       });
 121       $(".center").slick({
 122         dots: true,
 123         infinite: true,
 124         centerMode: true,
 125         slidesToShow: 3,
 126         slidesToScroll: 3
 127       });
 128       $(".variable").slick({
 129         dots: true,
 130         infinite: true,
 131         variableWidth: true
 132       });
 133     });
 134   </script>
 135
 136 </body>
 137 </html>