Probably one of the most renowned libraries available, Slick provides out of the box slider functionality so you can focus on styling. It’s that popular there’s even a react equivalent.
A popular trend in web design is a filtering UI. Usually there’s a masonry grid of blog posts and at the top there will be filter buttons. Isotope allows you to filter these posts by attaching a click event listener to the button parent element. Then, when the button is pressed and shares the same class with any of the posts, all the posts not matching that class, will fade away. I personally love this library, the built in fade away animation and thorough documentation makes implementing a filtering feature a breeze.
Speaking of masonry, there’s no reason to fear when you see a brick wall styling block in designs anymore, masonry.js has your back. Metafizzy (creator of isotope) offers a very simple way to create that masonry UI. Although a masonry layout is somewhat more achievable in native CSS now with CSS grid, for initial prototyping masonry.js allows you to create this complex layout with just a little configuration. Also, packery.js achieves the same as this library with a few less options and being less in file size. I’ve found packery to be a little less buggy, especially when setting widths of the masonry elements and when resizing the window width.
In need of a light-box? fancybox to the rescue. Again, another very intuitive library to use. Options include: image light-box galleries, pop up models and instant play video light-boxes. It’s my go to light-box library to use when working with jQuery.
My weekly newsletter
Summarizing all my weekly coding content including live code examples, blogs, YouTube tutorials and Instagram carousels.