MADE IN AUSTRALIA

Pixel Together are constantly looking to grow and evolve. If you have any feedback or suggestions of ways we can improve our service, please let us know.

FOLLOW US

Slideshows, also called carousels are such an essential tool in your web design toolkit. They've been used across the web for a long time now and there's an excellent reason they're still a design staple; they work as a brilliant way to focus your customer on your best content.

From your customer's perspective, they get it instantly. There's no clicking through menus, there's no scrolling through extra-long pages... everything is right there at a glance, usually at the top of the page attracting the best real estate. Slideshows and carousels are a fabulous way to get a lot of content in a small space, looking sharp.

Here we've put together some suggestions for how you can finesse your design and make sure those details are adding up for a really useful and seamless user interaction for your customer.

'everything is right there at a glance, usually at the top of the page attracting the best real estate.' 

AUTHOR

Avinash Barik

Lead Engineer @ Pixel Together

Tuesday 26th November 2019

1. Infinite Loop

Fixed Width and Full Width slideshows are the most used slideshows out there. And they work because instantly we as the customer know what to do  - we click through the slides if we want to explore the content.

However, sometimes you might want to get creative and have your content scrolling through an infinity loop for a sense of movement, animation or continuty.

See how galliano-doig.com used this tool. Note; they've used two slideshows here, the top one with flowers and buttons is an infinity loop and the bottom is a classic Fixed Width Slideshow.

To create this effect yourself; select the Infinite Loop option when selecting a slideshow, set a Scroll Frequency and that's it. You now have a cool, infinitely scrolling slideshow.

2. Transition Between Slides

'Like transitions, think about your arrows in terms of what suits your overall look, don't go quirky if you're trying to be super professional or slick!'

3. Customize Slideshow Arrows

Your arrows are going to signal orientation to your customer. They also signal that what your looking at, is a slideshow (if the slideshow is not automated). So create a unique look by fully customizing the Style, Color and Opacity of the Slideshow Arrows. Choose from 15 unique arrow styles, ranging from professional to quirky, to paint some character and add to your overall design. You can also choose not to have the arrows at all. Customize the Arrow Color and Opacity to match the arrows to your website’s look and feel. Like transitions, think about your arrows in terms of what suits your overall look, don't go quirky if you're trying to be super professional or slick!

4. Time Between slides and Transition Speed

You can adjust the time that each slide remains on the screen, before a transition happens, by adjusting the Time Between Slides option. A higher Time Between Slides means that a slide will remain on the screen for a longer period. Customize a transition further by adjusting the Transition Speed option, which simply means the time it takes for the actual transition (slide/fade) to happen. Lower value means a faster transition effect whereas higher value means the transition effect happens slowly.

'...use things like words, buttons or even images (instead of arrows) to jump to the next slide you want and voila, you have a whole new interactive piece of content.'

5. Creating an interactive piece, using Slideshow.. that's not a Slideshow!

6. Summary

Have a look at this YouTube tutorial to get a quick sense of how to build a Slideshow using Pixel Together. Remember, you've got the freedom here to tweak all the elements to your heart's content so get creative and make something that truly fits the brand and vibe of your website.

AUTHOR

Published: 

Thursday 26th November 2019

Lead Engineer @ Pixel Together

Avinash Barik