Build Feature-Rich jQuery Carousels with Slick

Not many carousel libraries can compete with Slick. It’s the most jam-packed jQuery plugin for building dynamic carousels on the web.

It’s completely free and built on top of jQuery. The code is super easy to set up, although it does require a few dependencies. But with so much functionality, it’s worth adding the extra libraries to get this working.

Image Carousels in Web Design — Benefits & Best Practices

Image Carousels in Web Design — Benefits & Best Practices

There’s no shortage of carousel feature slideshows on the web. In fact, this trend has done nothing but…Read more

To install Slick, you can visit the GitHub repo and download a copy. It comes with two CSS files: one for the basic setup and another for the default Slick theme. You can easily combine these files into your primary CSS stylesheet if you want to save space.

Then, you need two jQuery dependencies: the primary jQuery library along with jQuery Migrate. Slick requires a minimum of jQuery 1.7+ which should be no problem for a modern development environment.

From here, you just add the Slick.js file and let it go. Slideshows can be created with very little code and here’s a direct sample from the Slick website:

your content
your content
your content
</div> $(document).ready(function(){ $('.your-class').slick({ setting-name: setting-value }); });

With a simple <div> container, you can add slides dynamically, including images, HTML content, and embedded media like videos. Slick supports it all with a fully responsive design that keeps aspect ratios intact.

Slick comes with dozens of great features, including swipe functionality on mobile and dot navigation. You can also set up autoplay, custom animation, custom callbacks, and so much more.

This library is a complete beast for creating rotating carousels. And, you can do it all with a few simple lines of jQuery which makes this even more incredible.

slick carouselslick carousel

To view all the demos and get started, check out the Slick home page. You can also find all the source code and full documentation for settings/options in the GitHub repo.

Source: http://www.hongkiat.com/blog/slick-jquery-carousels/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s