diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 137 |
1 files changed, 137 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..c8fab56 --- /dev/null +++ b/index.html | |||
| @@ -0,0 +1,137 @@ | |||
| 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> \ No newline at end of file | ||