How to Add Slideshow in Weebly Site?

Weebly offers a slideshow element for free as well as Pro users to add and customize photo slides to their site. Free users can add slideshow only in the content area whereas Pro users can add slideshow in the Content area, Footer and Header (header slideshow only on non-responsive themes). In this article we discuss how to add slideshow in Weebly with slideshow element along with editing options using Weebly’s imageperfect editor.

Weebly Slideshow Element

Slideshow is a Weebly element used to add slideshow on a page and grouped under “Basic” category in site editor. It allows to add six different styles of slideshow with additional customizing options.

Slideshow Style Selection

After dragging and dropping the slideshow element into your site’s content area, you will be prompted to choose the style for your slideshow. Below are the available styles for your slideshow:

1. Simple slideshow
2. Thumbnails on bottom
3. Numbers on bottom
4. Thumbnails on top
5. Thumbnails on right
6. Double thumbnails

You can see sample preview of each style and select the appropriate one which suits your requirement. You can change the style or modify the navigational options using advanced menu any point of time later.

Select the style and click on the continue button to add photos to your slideshow.

Managing Slideshow Slides

You can upload images from your computer or drag and drop images to the editor. Each image will be treated as one slide in the slideshow. Unlike “Image” element “Slideshow” element offers only one option to upload images from your computer. Click here to learn all image uploading options for image element.

After the images are uploaded successfully you can add caption, link the images to any webpage and also delete it from the slideshow as shown in the below picture.

Customize and Edit Slideshow

Click on the slideshow to see the options for customizing and editing. You can add or edit photos by using “Add / Edit Photos” button and select the transition style from the drop-down menu. Customize the navigation, speed, spacing and caption by choosing appropriate option.

Advanced option link shows you the options to control the display of the slideshow.

In summary the slideshow as a whole can be customized more with the following options:

• Transition style – Available options are Fade, Slide, Mosaic, Slice and Fold
• Navigation style – Available options are Thumbnails, Double thumbnails, Numbers and None
• Navigation location – Top, bottom, left or right
• Speed – 3 to 9 seconds per slide
• Top and bottom margin spacing
• Location of the caption text – bottom or top
• Enable or disable autoplay
• Enable or disable slideshow controls on the published site
• Beginning or Random starting position
• 4:3 is the default aspect ration which can be changed to 3:2 or 16:9

Pro users previously can edit their header slideshow using Weebly’s Imageperfect editor. It gives the same options like a normal slideshow element for setting a transition style, navigation style and slide delay. Currently Weebly removed the header slideshow option for pro users on responsive themes, but the option is still available with the old non-responsive themes.

Adjusting the Size of Slideshow Element

By default the slideshow element occupies full width of the page and there is no option to adjust the width and height of the slides. Drag and drop a “Spacer” element beside the slideshow element to adjust the slideshow element’s position on a page. The slideshow will get automatically adjusted as per the width and height of the column between spacer elements.

The other issue with slideshow element is the height which leads to lot of white space above and below the image. Use the below code under “Pages > Advanced Settings > Header Code” section to adjust the height of the slideshow to suit your image size. Change the height in the below code with your own image’s height.

<style type="text/css">
.wslide-content {
 height: 300px !important;
}
</style>