1. Pure CSS Slideshow
Did you know that you can build a CSS-only slideshow?
The demo below shows how to achieve it by taking advantage of the CSS checkbox hack technique. It’s fully functional and supports arrow navigation, dot navigation, thumbnail navigation, and keyboard navigation.
Depending on the cursor position, the next or previous arrow displays. Upon clicking on it, the next or previous slide comes into view.
This carousel supports a few customization options for the autoplay mode.
4. Responsive Slider With Owl.js
Going a bit further, it also shows how to animate the text elements of each active slide sequentially by using a few of the carousel events.
As a bonus, it also covers how to adapt the dots position based on the height of the contents of the active slide.
This library isn’t maintained anymore, so use it with caution.
5. Responsive Image Gallery With slick.js
On the desktop mode, on the left side, there are the thumbnail images, while on the right side is the featured/active slide. On the mobile mode, the thumbnail images appear below the featured one.
To create this effect, we’re setting two independent carousels and synchronizing them, thanks to slick’s synchronization feature.
6. Responsive Slider With Swiper.js
7. Responsive Bootstrap Lightbox Gallery
You might be familiar with Bootstrap, the most popular front-end development framework. In this exercise, we extend its functionality by building a lightbox gallery.
In factual act, we aren’t building anything new. We’re just customizing and combining existing Bootstrap components.
8. Responsive UIkit Lightbox Gallery
UIkit is another modular front-end framework, and we’ve published various tutorials lately about its features! In this tutorial, we extend its lightbox component by adding dot navigation.
9. Draggable Image Gallery and a Custom Lightbox With GSAP
CodeCanyon and Envato Elements WordPress Carousels
Things don’t stop here! If you need a carousel for your WordPress site, CodeCanyon and Envato Elements provide hundreds of them to choose from.
21 Best WordPress Slider & Carousel Plugins of 2022
Whether you want to show off customer testimonials, your latest blog posts, your best images, or other media on your website, there is a WordPress slider plugin or WordPress carousel slider plugin out there that’s right for you.
21 Best WordPress Gallery Plugins for 2022
In this post, we review the best premium WordPress gallery plugins available on CodeCanyon, as well as listing five of the best free plugins. The list is broken down by gallery type: there are plugins for video and multimedia, images, and WordPress grids.
Hopefully, this list has given you enough inspiration to build your own carousels. Enjoy the demos, read the associated tutorials, and last but not least, be sure to follow Envato Tuts+ on CodePen for more creative pens!