Create effective carousel with Slick

Tram Ho

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.

or use CDN:

  • Add slick.js before the closing <body> tag after jQuery. jQuery is required.

or use CDN:

  • 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:

  • Initialize carousel slider:

You can also use Data Attribute Settings as follows:

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:

  • Multiple sliders:

  • Lazy Loading:

  • autoplay:

  • Fade:

  • Center Mode:

Here are some commonly used basic settings, there are many more settings you can find in its document.

https://github.com/kenwheeler/slick/

https://kenwheeler.github.io/slick/

Share the news now

Source : Viblo