How-To: Insert an Image Slider

How-To: Insert an Image Slider
Written by Jonathan Diaz
Updated 3 years ago

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:

      or

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

  4. This will insert an image slider object with 3 placeholder images:
  5. To change the images, select the placeholder object and click on the gear icon at the top:

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


  7. To upload a new image to your image library, click on the upload icon  and upload.  To choose an existing image from your image library, click on the library icon  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:

    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:

  8. Repeat for images in the other slots in the slider.

How To Use More Than 3 Images in a Slider:

  1. 1) Click one of the image/placeholder object:
  2. 2) Click the duplicate icon - this will add another image object on the end of the slider:

How To Remove an Image From the Slider:

  1. 1) Click on the image/placeholder object:

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

Image Slider Object Settings/Options:

  1. Select the image slider object:

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

  • 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.
Did this answer your question?