So You Want a Slider on Your Website?

So You Want a Slider on Your Website?

Are you interested in creating a great looking carousel or slider for your website? One that looks good on all screens, shows different images of various sizes, that users will click on?

Sliders and carousels are effectively the same thing. The navigation seems to separate when each term is used. Many use the terms interchangeably. We will help you discern when to use a slider and offer a resource for alternatives.  We provide an example of creating a slider with our favorite software, and share information we discovered that may be hard to find elsewhere.  When your slider is published, we want it to look great and be well-used.

We begin by reflecting. Why we are using a slider in the first place?  Is the slider the best way to communicate our content?

Discern When to Use a Slider

The growing trend is not to use carousels on home pages. Research shows that users don’t click beyond the first slide. With the increase of mobile-first designed sites, we see more endless scrolling used to display content. Sliders can be conversion killers if you are not careful to discern when and when not to use one.

We notice sliders on e-commerce sites to show dynamic content, such as what’s trending in purchases or selections customized for you.  We see them in galleries.  A gallery is a collection of sliders to display collections, typically in a list or grid. If there is a better way to communicate the content, it might be wise to do so. Here are 5 Alternatives to Using a Carousel on Your Website Home Page.

However, there are times when a slider will work just fine. Amazon discerns when to use a slider and when a slider is just a distraction.  If you must show numerous photos or features all at once on your home page, consider a grid of smaller photos or feature boxes.  Users are skilled at using good navigation and will explore for additional items.

blog-slider-amazon-example

Create a Great Slider

There are many good universal sliders available. We selected the Revolution Slider because it works great for various applications, comes as a WordPress Plugin and a JQuery Plugin for our sites that are not WordPress based, and their support is timely and effective.

Some of our settings are different than other documentation in certain places because we incorporate best practices  in our example.  Another resource for settings is  Revolution Slider WordPress Plugin Review & How To Guide .  We encourage you to supercede their settings with ours in the places discussed below.  

Are you ready to create a slider?  Here are the steps:

  1. Decide your grid size. The grid is the container that all your images must fit inside of. For this example, we use the large size. This means that no image should not be more than 940px wide or 770px tall. However, on our site we are using 3 sliders (large  – 940 x 770 px, medium – 780 x 500 px, and small – 510 x 310 px), because we have chosen a responsive slider and they respond nicely and look good on screens of all sizes.
  2. Some sites will be programmed or setup to resize images automatically to eliminate the need to create sliders with different grid sizes. If you have a unique design, a custom built slider might be the right for you.
  3. If needed, prepare your images to fit within the grid. We offer this blog post to help with that:  How to Prepare Slider Images . We also retain the original or a large size of each image we may want to use it in the future. With the new displays coming out on the market, we may want them someday.
  4. We are ready to create the slider.  The settings below were used in the example at the end of this article.  There is a large bottom margin on the position settings because we use thumbnails for navigation and want them below the slider. The last illustration shows how to turn auto play off. Switching content while a user is looking at it is distracting.

    Main-Slider-Settings

    position-settings-revolution-slider

    Stop-Autoplay

  5. Now we will setup the navigation. We use labels more often after reading  “Why Users Arent Clicking On Your Home Page Carousel” .  Also, this button generator helped us create labels for our example: http://dabuttonfactory.com/ .   We put the labels in the media library so they are ready to add to the each individual slide in the next step.  Here are our navigation settings:

    Navigation Settings

  6. After the general slider settings are finished, we create each slide for the slider.    This is pretty straight forward, however we did discover that the thumbnail images will not show on the individual slide settings page  until the slide is saved, and the page refreshed.

The example below illustrates 3 different sized images along with the settings we used on each slide. Our white background color can be setup to be a different color or an image.

Our goals are to help you discern when to use a slider and to create a beautiful one when you really want a slider. Please leave us a comment and follow on Twitter. Thank you!

Comments are closed.