Nowadays, the homepage of almost every website is inseparable from the carousel display, such as the product display on the homepage of Taobao Jingdong, the product introduction on the official website of the enterprise, and so on. I believe that every front-end partner has done projects that have carousel needs, and some may make their own wheels, but every time the requirements change, the style will be redesigned, which is very head-scratching. The style library introduced to you today has almost all the carousel styles on the market built-in, and you can achieve gorgeous effects by direct reference.
- Single image
- Multi-graph
- Responsive
- Variable width
- Adaptive height
- Hub mode
- Lazy loading
- Autoplay
- Slider sync
How to Use:
1. Add <div>tags
<div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div>2. Import the slick folder to your project
3. Introduce slick.css files
<link rel="stylesheet" type="text/css" href="slick/slick.css"/><link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>4.Add slick.js files
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script><script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script><script type="text/javascript" src="slick/slick.min.js"></script>5.initialize
$(document).ready(function(){$('.your-class').slick({setting-name: setting-value});});
