How to create an image slider

Follow

In this article we will show you step by step how you can create an image slider that can lead to this as a result:

mceclip0.png

There are different ways of using an image slider in your publication;

  1. Show the different steps of a process
    slider4.gif

  2. Visualize results
    slider3.gif

  3. Show changes in time
    slider2.gif

  4. Ask a question
    slider1.gif


 

STEP 1. Insert a ‘slider rating bar’

mceclip1.png

  • Use the ‘Use Image Slider’ setting to style the slider. Create an image for your handler and slider and upload them with ‘choose file’.
  • Use the ‘Include Current Slider Value’ setting to show the value on top of the handler.

mceclip2.png

More info and all details about the creation of a slider, click here.

 

STEP 2. Convert each value of the slider to an image

mceclip3.png

  • ‘Question label’: select the slider you created in step 1.
  • Select for each value of the slider an image. 
    In this example we have a slider with 100 values. Therefore we created 100 images. All images show ten 'black' icons, each image has a bit more 'red' then the previous image.
    Ex.
    Image 1:   Picture1.png
    Image 2:   Picture2.png
    Image 50:  Picture50.png
    Image 100: Picture100.png

mceclip2.png

 

You can download the PowerPoint of this image slider here.

Have more questions? Submit a request

Comments

Powered by Zendesk