Image Slider

This article refers to a previous version of the Duda Responsive Website Builder. Click here for help content on the current Duda editor.

Overview

Showcase your pictures in an animated carousel using our Image Slider. You can add or remove pictures and add custom titles and links to any image.

Add Image Slider

  1. From the Manage Pages section of the DudaOne editor, first choose the page you'd like to add the Image Slider to.DudaOne editor
  2. Go to the Add Element section and scroll to the media tab.
  3. Drag the image slider feature into the editing frame.
  4. Once you've placed the element, select images to display.

Set up the Image Slider

1. Press the Add Image button and the Choose & Place Images pop-up will appear.

2. Click to select an image.  You can select multiple images.  Selected images will have a blue border around them.

3. Press Done.

Edit or replace image

By default, the first three images in the slider will be pre-populated with stock images. To edit or replace any image in the slider, click the pencil icon underneath the image thumbnail. 

Click Edit Image to crop or add a filter to the current image. Click Replace Image to select a different image. 

Ohange the Image slider's look using the following display options:

General

The General tab is where you would choose to add, delete or crop images.

To add an image, simply click on square that says "Add images". If you have many images, you may have to scroll down to find this option.

Hovering your mouse over any of the images in this menu will reveal additional options for each image.

In the General tab are the tools you can use to edit more parts of the image slider:

There are two types of layouts for your slider to choose from.

Toggle on/off slide content to show the text. If you don't want the slider content, turning the switch to Off will remove the slide content from the images in your slider. 

Set a color to tone the images of your slider images. This can be enabled or disabled. 

  • Set up the title of the post
  • Add a text caption to images
  • Set up what you want the button to display in your slider.
  • Add a text description to the alt tag in your slider

Set up the slide link for the slider images.

Position the slider content to the left, center or to the right of the images in your slider. 

Set an animation for the slider.

Toggle between slider images for quicker editing.

Delete Deletes the image from the photo slider
Link

You can set up a link for the slider to bring users to when a slider is clicked.

Existing Page: Links the slider to an existing page

Website URL: Links the user to a website URL

Link to a file: Links the user to a file that you uploaded in Images & Content

Email Address: Prompts the user to send an email when clicked

Crop
(Brings you to a new menu)
Crop your image. Note that can re-crop your image as many times as you want and even crop it back to it's original size.

 

Design

Design is where you will find options for styling your photo slider.

Effects

Hide slide content: Hide the slider's text content

Images fill slider: Have the images resize themselves automatically to fill the slider (no white space)

Autoplay: Automatically changes the images without user input

Show navigation arrows: Show the navigational arrows

Animation: Set an animation fo the slider when it first shows up on the page

Color

Note: Background image and color won't show if "fill slider" option is set to on.

Backround: Choose a background image for the slider

Color: Choose a background color for the slider

More

Advanced options for the slider.

Spacing

Margin: Set the margins for the slider

Height: Set the height for the slider. Adjust this option if your slider isn't showing properly on the mobile or desktop view.

CSS Add CSS for all devices or for the desktop and tablet views
HTML Edit the HTML for the site.

Troubleshooting and FAQs

Image won't fit/displayed incorrectly in the mobile view

The reason for this is because the dimensions are largely different - In the desktop view, the slider is rectangular and wide. In the mobile view however, it's square, and so images don't display correctly.

You can fix this either by 1)creating two rows with sliders and using the hide on device feature or 2). editing the height in mobile view to be smaller.

Other ways to fix the slider's image size

1. Fix the height of the slider so that it is smaller. To do this, click the slider >>> edit >>> more >>> change the height accordingly.

2. Change it so that the image doesn't fill the slider (which causes it to enlarge). To fix this, click the slider >>> edit >>> design >>> images fill slider (off)

3. If all the images are different sizes, edit the images so that they all have the same (or similar) ratios. A good "all around" ratio for a slider is around 4:3 pixels, although this can vary widely depending on the look you're trying to achieve.

4. Use the hide on device feature. Create two-three separate sliders, one for each device, then use the "hide on device" feature to show each one separately.

How to change slider speed

It's not currently possible to change slider speed in the editor, however, if you open the HTML, you'll be able to change the speed by adjusting the slider interval property.

How do I show only the slider and not the contents?

Open the slider's settings and then go to design >>> Hide Slide Contents (turn on)

I don't want a button on my slider

If you don't want a button on a slider image, simply open up the slider image, then look for the "button" field and delete the text inside so it becomes blank.

 

×

Priority Phone Support

English phone support is available 18 hours a day,
Monday through Friday, 3am to 9pm (EST).

United States +1 866-776-1550 3am to 9pm (Eastern)
United Kingdom +44 (0)800-011-9071 8am to 2am (London)
France +33 (0)9-75-18-84-74 9am to 3am (Paris)
Israel +972 (0)3-720-8922 10am to 4am (Jerusalem)
Australia +61 (0)2-8880-9166 7pm to 1pm (Sydney)
To schedule a call in French, Portuguese, Hebrew or Russian, please email us at prioritysupport@dudamobile.com
×

Please Log in as a DudaPro

Priority Phone Support is available exclusively to DudaPros. Log in to your DudaPro account now to see our international support numbers.

Log In
Not a DudaPro? Start a free trial now!