50 ways to slide your images

I recently had to create a slideshow for a special project. What's so special about that you say. Indeed, everywhere you look you see slideshows. If there's one thing that's common to 99% of all websites today it's a slideshow. Almost boring. That is until you actually decide to implement one. There must be 50 ways to slide your images - and I don't mean the transition effects. There's a page with extensive documentation just for that (see References in the sidebar). Picking and choosing the right module and library is almost a burden.

There are various scenarios where you would want to display a slideshow. The most common is the home page. I've used the venerable Views Slideshow module (2007) in the past for this purpose. It's simple enough to implement and is available for D7, D8 as well as Backdrop.

Slider and it's carousel

In my use case, an existing corporate website which I did not build and didn't know very well, the slideshow was for a project page - like a one-page website within the website - which was to house photos, videos and texts related to a single promotional event. My first thought was to repurpose available modules and libraries if I could.

The wireframes showed a slider with an image carousel underneath in place of the usual circles - nice! Because the setup needed to work for both images and videos, I decided to create a prototype to test things out.

Views Slideshow was installed and used for the home page banner, so I started experimenting with that but wasn't totally satisfied with my options. Same with Galleria (2008), couldn't get it to work with YouTube videos.

In another recent Bootstrap based project I had searched for (search never ends does it?), found and chosen Flex Slider because I needed to create a series of horizontal book carousels for a Swiss Publishing house. Adopting the FlexSlider 2 library for that project allowed me to save a lot of time because I got most of what I needed out-of-the-box, including beautiful responsive carousels.

Book carousel

But for my corporate client, I needed to combine slider and carousel. So I headed out on the Web and searched for best practices and then screencasts that would help me fast track my prototype.

Bingo! I found an amazing screencast series by Drupal Legoland that showed exactly how to create both the slider and carousel with the Flex Slider module.

The trick is that you actually build 2 slideshows, one slider and one carousel, and make them work together. The end result is beautiful and works like a charm. I can't say enough about the screencast series itself - it's a great example of how screencasts should be done - and to top it off, it's free! Kudos to the author!

So, if there are 50 ways to slide your images, I now feel like there's only one way to learn how to do it. First, check out the end result (in the Photos tab) and then be sure to watch Drupal Legoland screencast series on YouTube.

Cheers!
`~..~`

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Refresh Type the characters you see in this picture. Type the characters you see in the picture; if you can't read them, submit the form and a new image will be generated. Not case sensitive.  Switch to audio verification.