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
- From the Manage Pages section of the DudaOne editor, first choose the page you'd like to add the Image Slider to.DudaOne editor
- Go to the Add Element section and scroll to the media tab.
- Drag the image slider feature into the editing frame.
- 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:
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|
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
(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 is where you will find options for styling your photo slider.
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
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
Advanced options for the slider.
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.