next post
Full disclosure, not all of the sliders on this list are built with or require jQuery, but it seems to be a universal search term, so we wanted it in the title.
When web design started to take off in the early 2010’s, including a slider in your web design was the dopest thing you could do when it came to building a website.
No matter what kind of website it was – or what kind of irrelevant bullshit was housed within the slider – if you were building a website, you were putting a slider somewhere in that son of a bitch.
But then the SEO-craze began.
All of the search engine optimizers started claiming it was bad for SEO because it slowed down your pages or search engines couldn’t read the text displayed on the slider.
While they can slow down your website if they are not developed properly, most of those statements turned out the be complete nonsense.
Back then, pretty much every slider looked the same. They were full-width carousels with the same bullshit animations you see on a powerpoint.
Even with the seemingly infinite amount of WordPress slider plugins available, they still all looked nearly identical.
Ok, so I can’t recall a time anyone who developed a badass jQuery slider was referred to as a legend, but you get the point.
Our list of jquery sliders is compiled of many different sources. While most WordPress slider plugins are complete shit, there are a few that may be worth your time exploring if you don’t have the ability to develop one yourself.
This list is not just for slider plugins or dedicated scripts, but also tutorials and Codepen pens.
Here is how our list is broken down:
Codrops is a fantastic site for development tutorials and resources. Once or twice a month, they release a new tutorial for different unique web elements that you can preview and download free of charge. Recently, they released an animated fragment slider that features some really cool slide transitions and animations.
Built using the new and exiting anime.js, jQuery, HTML, and CSS.
This one is definitely one of my favorite. Created by the talented team at Green Chameleon, this slider uses the 3D javascript library three.js. Additionally, it also uses some GSAP and then HTML and CSS. To get the most out of this one, you will need to choose your background images wisely. Having images that are relatively similar in shape is the best way to get the most out of this slider.
Crafted by Szenia Zadvornykh on Codepen, this slider is probably the least practical one of the bunch. When the slides transition, a gnarly animation takes place that resembles that butthole Thanos killing everybody. On 99.9% of websites on the line today, an animation like this would be overkill, but nonetheless, it is a badass tutorial and an awesome display of web development.
This slider also uses three.js along with GASP and a few other scripts.
Another sexy slider developed by Codrops, here we have a slider utilizing SVG animations to create awesome frame/borders during the while transitioning from one slide to another. Using anime.js, some additional JS, HTML and CSS, this is a great full-width slider tutorial for web designers looking for a great hero slider. This animated slider also uses a cool script called imagesLoaded to detect when an image an image has been loaded; a great tool for sliders.
This jQuery slider features some awesome UI animations for both carousels and page transitions. Developed by Mario Maselli, this slider tutorial mixes a unique combination of jQuery, GSAP, and clip-path in CSS to transition a background image beneath a colored layer (which also transtions to new colors with each slide).
Sometimes the simplest is the best. If you are looking for an extremely simple and lightweight slider script to develop – without having to start from scratch – this free download might be for you. Available at jqueryscript.net, this jQuery slider is super lightweight but is still touch-enabled, and has both bullet points and arrows for transitioning bewtween slides.
Built by digistate, this jquery slider was created on the swiper.js framework. This Codepen tutorial is one of the best lightweight thumber sliders I have come across, and it is extremely unique in the sense that it uses a vertical thumbnail layout with horizontal slide transitions.
Flickity was first released in 2015, but over the past year or so, it has risen to be one of the most lightweight and dependable jQuery slider libraries there is. With fantastic documentation and an active support community, Flickity is usually our go-to javascript library for web development projects needed in a slider or carousel.
Flickity Carousels are built touch-enabled and have an endless amount of documentation available (along with Codepen tutorials).
The Owl Carousel library is another slider/carousel script that many web developers rely upon for their day-to-day developing. Owl Carousel comes touch and drag ready, it works on all modern browsers, it is built responsive, and there is a seemingly unlimited amount of resources and tutorials available for it as well.
Ok, so GSAP isn’t necessarily a script or plugin specifically for sliders, but nowadays, all of the best sliders and carousels are built using GSAP. GSAP is developed and maintained by GreenSock, and it is arguably the best javascript library out there. GSAP’s TweenMax plugin is of the best ways to build a modern slider with sexy transitions for images and text. Unlike most of the other libraries on this list, GSAP is not free, but it is definitely worth the price.
Like GSAP, Swiper does not require jQuery, so adding it to this list may seem a little counterintuitive, but it is our list so we’ll do whatever the fuck we want. Swiper is famous for its mobile-friendly build and its adaptiveness to touch. On Swiper’s website, there is some fantastic documentation and a lot of free demos. Swiper is also free and developed and maintained by iDagerous.us. Swiper is 100% free to use!
If you are still learning development – and you use WordPress as your content management system – you may be looking for a reliable slider plugin for your build.
We’ve all been there, and there is no shame in buying a premium slider to make your life easier. As your knowledge in web development expands, it is always best practice to develop your own sliders to avoid slow load-times caused by slider plugins and the millions of files they add to your site. If you are developing your own WordPress theme or just an HTML site, there are also plenty of paid jQuery sliders out there as well.
With that said, we have compiled a short list of the best premium and WordPress slider plugins:
I don’t fucking know. We just gave you a bunch of options. If you don’t know by now, you’re probably shit out of luck.
If you need help deciding, have any questions, or have a slider or tutorial you think should be added to the list, contact us and we’ll get back to you as soon as we can.
Check out some of our other free code snippets and web development articles for more cool shit.
Be a lot cooler if ya did
We send nothing but the good shit. Once a week. That’s it.
Stay up-to-date with all of the design and creative news, resources, and inspiration by signing up for the CreativesFeed newsletter!