How to make an interactive slider

In RapidUI, you can create your own slider - which can help users view slides in a simple and intriguing display.

!RapidTip There is no need to upload several photos to the same spot (one on top of the other). It will only slow down the upload process and will upload unnecessary photos. Simply use one image, and after turning it into a slider in RapidUI, add the other images to the slider. (If you haven't already, check out our guidelines on how to prepare your PSD or Sketch file for RapidUI).

The first step in creating a slider is creating the slider's elements - arrows, bullets, or both.

1. Go to the ‘Interactions’ panel and open ‘Slider Elements’
2. Create your slider elements - bullets/arrows (detailed below)
3. Select ALL of the objects you have created (there should be at least one slider object - arrows/bullets, and an image/div that should slide) and click ‘Slider’
4. Go to the ‘Options’ panel to set your slider options

Here are the slider components:

1. Creating Slider Elements ( bullets/arrows)

Interactive Arrows:

If you want to use arrows to trigger slides, the first step in creating a slider is using the ‘Arrows’ tool which allows you to quickly turn your arrows into functioning slider triggers. 

In order to activate your arrows, follow these steps:

1. Select the object you wish to turn into an arrow (two arrows required)
2. Open the ‘Slider Elements ‘section (can be found in ‘Interactions’)
3. Click ‘Arrow’

Interactive Bullets:

Slider bullets are objects that enable sliding and are the representation of the number of slides in your slider. The ‘Bullets’ tool tries to identify a unique bullet from all of the selected objects, in order to create a MARKED bullet. Therefore it requires all bullets to look exactly the same - except for one, which will be styled differently in order to be picked by the ‘Bullets’ tool as the ACTIVE bullet. 

There are 4 different ways to identify bullets when using the ‘Bullets’ tool:

• 1 image of all of the bullets - in this case, the image will be split to separate images (requires transparent background)
• A container that contains all bullet images
• Selecting div objects - each one will be a bullet
• A container that contains all bullet div's - each one will be a bullet

In order to activate your bullets:

1. Go to the Slider objects section (can be found in ‘Interactions’)
2. Select the objects you wish to turn into bullets
3. Click ‘Bullets’

!RapidTip There is no need to upload several photos to the same spot (one on top of the other - usually for sliders, galleries, etc). This will only slow down the uploading process and will upload unnecessary photos. Simply use one image, and after turning it into a slider in RapidUI, add the other images.

2. Creating your interactive slider

1. Once you're done creating your slider elements (arrows and/or bullets), select ALL of the objects you wish to turn into a slider (there should be at least one slider object - arrow/bullets, and an image/div)
2. Head to the ‘Slider Elements’ section (can be found in the ‘Interactions’ panel)
3. Click ‘Slider’ 

Editing your slider:

Once your slider is all set up, you can change the different slider images (or different objects within the slide) or add new ones using the ‘Slider Options’ panel. To replace an image just click ‘Edit’ and replace it with any image. To add a new slide, just click ‘Add new slide’.

And that's it! Your slider should be up and ready to go.