Overview
The Image Slider displays images in an animated slider. You can add or remove pictures, as well as add custom titles and links to any image.
Please note that the images in image sliders do not auto-sync when the desktop site changes.
Add Image Slider
- From the pages section of the DudaMobile editor, first choose the page you'd like to add the Image Slider to.
- Go to the Content section and select the design tab.
- Drag the image slider feature into the editing frame.
- Once you've placed the feature, you'll need to designate a set of images to display.
Setup
The Image slider feature can draw images from a number of sources, as indicated by the tabs when you select the add image button in the image editing pane.
- From Site: The images on this tab have been automatically copied from your desktop site.
- Facebook: The images on this tab have been automatically copied from your facebook page.
- Gallery: These images are generic images we've collected for anyone to use.
- Uploaded: These images have been uploaded by you; you can upload additional images by pressing the Upload button. We support PNG, JPG, and GIF filenames.
- By URL: You can link directly to any image on the internet by using this feature. Simply right-click an image and select copy image URL in your browser. Some images may be copyrighted or have copy protection, and so will not display or will display differently here.
Image Guidelines
We recommend an image width of 400, to accommodate for larger screens. For best results, use images of the same height in the image slider.
Options
Each Image Slider element has the following display options:
|
General |
Add new images, delete images, crop images, add links to images, or add text bars to images by hovering over each individual image and pressing the appropriate button. |
|
Design |
Effects: Toggle whether the images fill the slider, autoplay, or display navigation arrows. Color: Set the image slider's background color and image. |
|
Text Bar |
Color: Set the text bar's background color, text color, and image. Text Style: Change the text style of your selected tab. |
|
More |
Spacing: Set the height and margin of the element. CSS: Change the element's CSS. HTML: Change the element's HTML. |
More help on fitting images in the slider
It's important to optimize images for being viewed through a slider. You can fix this by either changing the image dimensions or by editing the slider to fit the images.
Possible solutions to fitting images into the slider;
- Fix the height of the slider so that it is smaller. To do this, click the slider >>> edit >>> more >>> change the height accordingly
- 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). See slider options
- A good image ratio for a slider is around 4:3. While it isn't necessary to have this image ratio, you should at least have all the images in a slider with equal or similar ratios to each other, otherwise, it may be difficult to fit your images into the slider.
