Hi guys today I’m going to write the rest about slick. These are the methors (methods) that help frondend programmers to have more control as well as control how slick works. In the previous post, I wrote about events that happen with slick but have not yet impacted the way slick works, methor will help us with that.
1. slick
Slick initialization method Example:
1 2 3 4 | <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">'.slider'</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> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
We will pass the properties we want to config from the beginning
2. slick
This method cancels slick config. Return items without a slide Example:
1 2 3 4 5 6 7 8 | <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">'.slider'</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> <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">'.js-method'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">on</span> <span class="token punctuation">(</span> <span class="token string">'click'</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">'.slider'</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 string">'unslick'</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> |
Before
After
3. slickNext
The method helps us navigate the next and prev buttons without using the slick default button. For example:
1 2 3 4 5 6 7 8 | <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">'.slider'</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> <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">'.js-method'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">on</span> <span class="token punctuation">(</span> <span class="token string">'click'</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">'.slider'</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 string">'slickNext'</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> |
In addition to next by default button we can also assign the next event to another button. This serves very well for designing slides as you like
4. slickPrev
This method is similar to the slickNext method, for example:
1 2 3 4 5 6 7 8 | <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">'.slider'</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> <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">'.js-method'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">on</span> <span class="token punctuation">(</span> <span class="token string">'click'</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">'.slider'</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 string">'slickPrev'</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> |
5. slickPause, slickPlay
When slick in autoplaySpeed slide state will run continuously if you want to stop this state, we use slickPause method For example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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">'.slider'</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> 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">500</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> <span class="token punctuation">;</span> <span class="token function">$</span> <span class="token punctuation">(</span> <span class="token string">'.js-stop'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">on</span> <span class="token punctuation">(</span> <span class="token string">'click'</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">'.slider'</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 string">'slickPause'</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 function">$</span> <span class="token punctuation">(</span> <span class="token string">'.js-play'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">on</span> <span class="token punctuation">(</span> <span class="token string">'click'</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">'.slider'</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 string">'slickPlay'</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> |
slickPlay will cancel the slickPause command
5. slickGoTo
slickGoTo will show the item location we want to show. For example:
1 2 3 4 5 6 7 8 | <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">'.slider'</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> <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">'.js-method'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">on</span> <span class="token punctuation">(</span> <span class="token string">'click'</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">'.slider'</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 string">'slickGoTo'</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token boolean">true</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> |
6. slickCienSlide
Returns the current slide position Example:
1 2 3 4 5 6 7 8 9 | <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">'.slider'</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> <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">'.js-method'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">on</span> <span class="token punctuation">(</span> <span class="token string">'click'</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 keyword">var</span> currentSlide <span class="token operator">=</span> <span class="token function">$</span> <span class="token punctuation">(</span> <span class="token string">'.slider'</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 string">'slickCurrentSlide'</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">'.result'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">text</span> <span class="token punctuation">(</span> <span class="token string">'Slide hiện tại là :'</span> <span class="token operator">+</span> currentSlide <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> |
7. slickAdd
Add a slide. If we add a location to it, it will add at that position. If no index is provided.
Specifically, the parameters passed as follows:
1 2 | <span class="token function">$</span> <span class="token punctuation">(</span> <span class="token string">'.slider'</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 string">'slickAdd'</span> <span class="token punctuation">,</span> element <span class="token punctuation">,</span> index <span class="token punctuation">,</span> addBefore <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
element : the element to be added.
index : the position of the element to be added.
addBefore : add before or after the selected position.
For example:
1 2 3 4 5 6 7 8 | <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">'.slider'</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> <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">'.js-method'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">on</span> <span class="token punctuation">(</span> <span class="token string">'click'</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">'.slider'</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 string">'slickAdd'</span> <span class="token punctuation">,</span> <span class="token string">'<p>4</p>'</span> <span class="token punctuation">,</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token boolean">true</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> |
8. slickRemove
Delete slides by position, the parameters passed similar to slickAdd
1 2 | <span class="token function">$</span> <span class="token punctuation">(</span> <span class="token string">'.slider'</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 string">'slickRemove'</span> <span class="token punctuation">,</span> index <span class="token punctuation">,</span> removeBefore <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
For example:
1 2 3 4 5 6 7 8 | <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">'.slider'</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> <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">'.js-method'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">on</span> <span class="token punctuation">(</span> <span class="token string">'click'</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">'.slider'</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 string">'slickRemove'</span> <span class="token punctuation">,</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token boolean">true</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> |
9. slickFilter
Filtering the elements in the slide, this method is also quite good. Specific parameters are as follows:
1 2 | <span class="token function">$</span> <span class="token punctuation">(</span> <span class="token string">'.slider'</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 string">'slickFilter'</span> <span class="token punctuation">,</span> filter <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Where filter is a funtion: For example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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">'.slider'</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> <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> <span class="token function">$</span> <span class="token punctuation">(</span> <span class="token string">'.js-filter'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">on</span> <span class="token punctuation">(</span> <span class="token string">'click'</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">'.slider'</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 string">'slickFilter'</span> <span class="token punctuation">,</span> <span class="token string">':even'</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 function">$</span> <span class="token punctuation">(</span> <span class="token string">'.js-unfilter'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">on</span> <span class="token punctuation">(</span> <span class="token string">'click'</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">'.slider'</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 string">'slickUnfilter'</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> |
In this example it will filter for even-position elements. We can add filters by other conditions ( https://stackoverflow.com/questions/47714202/slick-slider-filter-by-class-issue ) like:
1 2 | <span class="token keyword">var</span> filter <span class="token operator">=</span> <span class="token function">$</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">data</span> <span class="token punctuation">(</span> <span class="token string">'attribute'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Well, it is quite a lot and useful then I hope all of my slick articles will help you to control the slide when desige. Good luck