Introduce
Slick is a very popular javascript library used to create carousel effectively and easily.
It supports quite enough features for carousel as follows:
- Fully responsive. Scales with containers.
- Separate settings for each breakpoint
- Swipe enabled / disabled
- Desktop mouse dragging
- Infinite looping.
- Support arrow key navigation
- Add, delete, filter slides
- Autoplay, dots, arrows, callbacks, etc …
Setting
- Add
slick.css
into<head>
If you download this library, you need to copy this slick.css file and import it into your project.
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> link</span> <span class="token attr-name">rel</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> stylesheet <span class="token punctuation">"</span></span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> text/css <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> slick/slick.css <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> |
or use CDN:
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> link</span> <span class="token attr-name">rel</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> stylesheet <span class="token punctuation">"</span></span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> text/css <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> //cdn.jsdelivr.net/npm/ <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> /slick/slick.css <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> |
- Add
slick.js
before the closing <body> tag after jQuery. jQuery is required.
1 2 3 4 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> text/javascript <span class="token punctuation">"</span></span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> //code.jquery.com/jquery-1.11.0.min.js <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> text/javascript <span class="token punctuation">"</span></span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> //code.jquery.com/jquery-migrate-1.2.1.min.js <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> text/javascript <span class="token punctuation">"</span></span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> slick/slick.min.js <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> |
or use CDN:
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> text/javascript <span class="token punctuation">"</span></span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> //cdn.jsdelivr.net/npm/ <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> /slick/slick.min.js <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> |
- Package Managers
Bower
bower install --save slick-carousel
NPM
npm install slick-carousel
Now that you have finished, you can start using this library.
Using
- Set up HTML:
1 2 3 4 5 6 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> your-class <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> your content <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> your content <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> your content <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
- Initialize carousel slider:
1 2 3 4 5 6 | <span class="token function">$</span> <span class="token punctuation">(</span> document <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">ready</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">$</span> <span class="token punctuation">(</span> <span class="token string">'.your-class'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">slick</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token comment">// các settings ...</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
You can also use Data Attribute Settings as follows:
1 2 3 4 5 6 7 8 9 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">data-slick</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> { <span class="token punctuation">"</span> slidesToShow <span class="token punctuation">"</span> : 4, <span class="token punctuation">"</span> slidesToScroll <span class="token punctuation">"</span> : 4} <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h3</span> <span class="token punctuation">></span></span> 1 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h3</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h3</span> <span class="token punctuation">></span></span> 2 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h3</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h3</span> <span class="token punctuation">></span></span> 3 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h3</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h3</span> <span class="token punctuation">></span></span> 4 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h3</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h3</span> <span class="token punctuation">></span></span> 5 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h3</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h3</span> <span class="token punctuation">></span></span> 6 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h3</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
Refresh browser, you will get carousel with default settings.
Some settings
Above is its default setting. There are many settings you can use depending on your actual requirements.
- Default:
1 2 | <span class="token function">$</span> <span class="token punctuation">(</span> <span class="token string">'.single-item'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">slick</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
- Multiple sliders:
1 2 3 4 5 6 | <span class="token function">$</span> <span class="token punctuation">(</span> <span class="token string">'.multiple-items'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">slick</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> infinite <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> slidesToShow <span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">,</span> slidesToScroll <span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
- Lazy Loading:
1 2 3 4 | ... <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> img</span> <span class="token attr-name">data-lazy</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> img/lazyfonz1.png <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> ... |
1 2 3 4 5 6 7 | <span class="token function">$</span> <span class="token punctuation">(</span> <span class="token string">'.lazy'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">slick</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> lazyLoad <span class="token punctuation">:</span> <span class="token string">'ondemand'</span> <span class="token punctuation">,</span> slidesToShow <span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">,</span> slidesToScroll <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
- autoplay:
1 2 3 4 5 6 7 | <span class="token function">$</span> <span class="token punctuation">(</span> <span class="token string">'.autoplay'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">slick</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> slidesToShow <span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">,</span> slidesToScroll <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> autoplay <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> autoplaySpeed <span class="token punctuation">:</span> <span class="token number">2000</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
- Fade:
1 2 3 4 5 6 7 8 | <span class="token function">$</span> <span class="token punctuation">(</span> <span class="token string">'.fade'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">slick</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> dots <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> infinite <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> speed <span class="token punctuation">:</span> <span class="token number">500</span> <span class="token punctuation">,</span> fade <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> cssEase <span class="token punctuation">:</span> <span class="token string">'linear'</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
- Center Mode:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <span class="token function">$</span> <span class="token punctuation">(</span> <span class="token string">'.center'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">slick</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> centerMode <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> centerPadding <span class="token punctuation">:</span> <span class="token string">'60px'</span> <span class="token punctuation">,</span> slidesToShow <span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">,</span> responsive <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> breakpoint <span class="token punctuation">:</span> <span class="token number">768</span> <span class="token punctuation">,</span> settings <span class="token punctuation">:</span> <span class="token punctuation">{</span> arrows <span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">,</span> centerMode <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> centerPadding <span class="token punctuation">:</span> <span class="token string">'40px'</span> <span class="token punctuation">,</span> slidesToShow <span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> breakpoint <span class="token punctuation">:</span> <span class="token number">480</span> <span class="token punctuation">,</span> settings <span class="token punctuation">:</span> <span class="token punctuation">{</span> arrows <span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">,</span> centerMode <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> centerPadding <span class="token punctuation">:</span> <span class="token string">'40px'</span> <span class="token punctuation">,</span> slidesToShow <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Here are some commonly used basic settings, there are many more settings you can find in its document.