How-To: Insert an Image Slider


You can now use an image slider object in your Funnel Buildr pages!

- Images used in your image slider are loaded from your Funnel Buildr image library.  You can upload new images to the library or use ones already there.  You can't use images from your Shopify product page for a product associated to the page (unless you upload them to your Image Library first)

Images in the slider are for display only - currently no actions happen for clicks, mouseovers, etc, on images in the slider.

BEFORE YOU BEGIN!  Use images of the size you're wishing to display in your slider.  In a future release we will have the ability for the slider to auto-size your images based on slider dimensions.

NOTE: The image slider script is *not* active in the editor - you need to preview your page to see the slider (and test it).

Here's how to use the new Image Slider object:

1) Create/Edit a page where you would like to place the Image Slider
2) Add an object by clicking the + symbol on your page (or within an object) where you would like to insert the slider:

Image Placeholder

or

Image Placeholder
3) From the object drawer on the right, click on Media and then Image Slider:

Image Placeholder

4) This will insert an image slider object with 3 placeholder images:

Image Placeholder

5) To change the images, select the placeholder object and click on the gear icon at the top:

Image Placeholder
6) This will open the image selector (just like you would use when inserting any other image):

Image Placeholder

7) To upload a new image to your image library, click on the upload icon (Image Placeholder) and upload.  To choose an existing image from your image library, click on the library icon (Image Placeholder) and select the image you would like to use in that location.

Here, I've uploaded a red t-shirt image in the first location:

Image Placeholder

NOTE: Yes, in the editor your images will look larger than they will display in preview - this is due to the slider script not being active in the editor.  When previewing the example slider above, this is what it would look like in the browser - reference the note at the top of this page regarding image sizing:

Image Placeholder
8) Repeat for images in the other slots in the slider.

How To Use More Than 3 Images in a Slider:


1) Click one of the image/placeholder object:



2) Click the duplicate icon (Image Placeholder) - this will add another image object on the end of the slider:

Image Placeholder

How To Remove an Image From the Slider:


1) Click on the image/placeholder object:



2) Click the delete icon (Image Placeholder) - this will remove that image object from the slider.

Image Slider Object Settings/Options:


1) Select the image slider object:

Image Placeholder

2) Click on the gear icon to bring up the object settings:

Image Placeholder

Items - the number of images to be displayed in the slider on the page

Orientation - Horizontal/Vertical alignment of the slider on the page

Dots - Display dots under the slider to show number of slides and the position in the slider

Speed - How fast the slider scrolls images left/right when clicking the arrows (must be a multiple of 100)

Infinite - will loop the slider back around when reaching the start/end.  Set to No if you wish the slider to stop once reaching either end.

Slides to Scroll - the number of slides to scroll left/right when an arrow is clicked.