Lately, I am working on a project that requests the carousel component with vanilla javascript. There is one plugin called “Tiny Slider 2” that does the job.
Tiny Slider 2 plugin inspired by Owl Carousel plugin which is a jQuery plugin I often use.
What do I use the Tiny Slider 2 plugin?
- Responsive options: There are a lot of responsive options you can set such as startIndex, gutter, center, and more.
- Features: There are a lot of features you can use such as loop, rewind, slideby, edge padding, center, lazyload, touch/drag, custom events, and more.
- Markup: You can create the markup using div or ul tag. It is up to you. Plus, you can nest the slider as well.
- Options: For Tiny Slider version 2, there are a lot of options you can choose from.
- Methods: For more customization, the plugin provides the methods you can use especially destroy and rebuild if you want to dynamically create the slider.
- Custom Events: Available events include indexChanged, transitionStart, transitionEnd, newBreakpointStart, newBreakpointEnd, touchStart, touchMove, touchEnd, dragStart, dragMove and dragEnd.
Browser support you can check from this link.
Demo
Here is a demo that you see in action.
Other options
What if the Tiny Slider 2 plugin doesn’t fit my need, you may try the plugins below.
- Glide.js
- Keen Slider
- WebGL Apple Cards (Codepen)
- Drag and scroll carousel slider (Codepen)
- Product Carousel (Codepen)
- Splidejs
- Build your own carousel. Using the plugin is saving the developer’s time. But if none of the available plugins in the market don’t fit the client’s needs, you have to build your own or even buy a plugin.
Wrap up
When you are working on the website, the slider or carousel features are often needed. It is important to pick the optimized plugin for loading speed benefit. Also, the optimized images that are added to the slider or carousel are necessary. Plus, enabling lazyload is something you should consider as well. I hope this post will be useful for you.
