MADE IN AUSTRALIA

Contact

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.

FAQs

How to take your Slideshow up a notch, or 6....

WEB DESIGN

Published: 

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

SHARE

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

watch this video

Create a smooth visual effect for your slideshow when it moves from one slide to the next by choosing a Transition Type. For a Full Width or Fixed Width slideshow, you can select from two popular and distinct types, Slide or Fade Transition Type. As their names suggest, a Slide Transition Type slides the individual slides from left to right smoothly whereas Fade Transition fades one slide into other. Try to choose a transition that best captures the vibe of your website.

'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!

The 'Powerful, features simply done.' section on our new home page is actually a slideshow that looks like something else altogether. We did this by turning off all the arrows and used it as an interactive section. To do this yourself, you could use elements 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.

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.

Like what you see? Share the story

AUTHOR

Published: 

Thursday 26th November 2019

Lead Engineer @ Pixel Together

Avinash Barik

ENTERPRISE SOLUTIONS

Intelligent digital solutions for your organisation

PRICING PLANS

Flexible pricing plans that scale with your business

Social

Contact

Company

FAQs

Product

MADE IN AUSTRALIA

Create your way - design and build custom websites without the need for code or restrictive templates. Get full creative control and confidence with securely hosted and auto SEO optimised sites, made by you.

Copyright © 

Pixel Together

2014-2019


ACN 603 213 010 20 


Little Gore St

Fitzroy VIC 3065