Member-only story
How To Build a Carousel With Automatic and Manual Controls
Give your photos and website some life
I was working on my personal portfolio and I wanted to make a slideshow for the photography page. My first inclination was to use a library, such as Bootstrap Carousel. While I love Semantic, I could not find a slideshow component/library. And while I would recommend Bootstrap, I decided to go with a simpler, home-grown slideshow. I wasn’t totally sure how I wanted it to look or function, but I did know that I wanted two things:
- Automatic run time (Change pictures every couple seconds automatically)
- Manual controls (So the user can go back/forward if they choose)
I had made my own slideshows before, but I had never made my own that works both automatically and has options to work manually. The issue I’ve had in the past is that, while you can set the slides to change at an interval on its own (automatic), whenever I introduced a manual operation (such as Next/Previous selection), the interval is maintained and doesn’t re-adjust to the manual operation.
This means if the automatic interval is set to four seconds — In new media, the recommended optimal time for pictures to change in a slideshow is, at minimum, three to four seconds — and the user decides to click Next after three seconds, the picture will change, but then one second later the picture changes again (automatically).
This isn’t conducive to the user experience. If they went back to a picture or wanted to see the next picture more than the current one, it’s safe to say they wanted to do so for more than a second. It makes sense to reset the interval, so they can see the next/previous picture for the same amount of time as the other pictures. I have actually run into this issue using libraries, and these libraries are often a bit harder to overwrite easily (lest you start throwing !importants everywhere).
Creating the Slideshow
So here is the slideshow I made that incorporates both automatic and manual functionality.
