AI Website Builder
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.
Explore the Pixel blog
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.'
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.
watch this video
'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!'
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!
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.
Thursday 26th November 2019
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.
ACN 603 213 010 20
Little Gore St