1. Fit: width / height / stretch
2. Align: top / middle / bottom or left / center / right
3. Upload: use to upload your images
4. Image select: select one image
5. Slide link: no link / link / link - new tab

When you choose fit to width, the slide image scales to match the width of the slider. You could instead fit an image to the height of your slider or stretch it to fit in both dimensions.

Use the upload button to upload an image from your computer. You can either select an image from your local file system or drag and drop an image onto the upload button. The progress bar indicates the progress of an upload and will momentarily turn green upon completion. Uploaded images will appear in the image selection panel.

When you select an image in the image selector it is set as the image of the active slide.

1. Enable flipswitch: off / on
2. Display effect: fade in / slide in / pop in
3. Delay: delay in milliseconds of caption becoming visible
4. Caption text: text or HTML content of caption
5. Font select toggle: show / hide
6. Corner roundness: square / rounded / round
7. Border thickness: no border / thin / thick
8. Horizontal position: percent from left edge
9. Vertical position: percent from top edge
10. Color: white text on black or black text on white
11. Opacity: 40% / 70% / 100%
12. Caption link: no link / link / link - new tab

Toggle the flipswitch to enable or disable a caption. Enabled captions will appear at the set delay time (in milliseconds) after the transition to a slide has completed. You can choose the display effect.

Edit your caption text or HTML in the text area. There is no limit of length, but be aware captions may appear differently across different user platforms if responsive checked. If entering HTML, take care that it is valid to avoid unexpected behavior. Line breaks are respected - they are converted to <br> elements.

You can style and set the position of each caption. Choose between square or rounded corners, borderless or bordered, color and transparency. Position a caption using the two horizontal and vertical position controls.

You can set a caption to be a hyperlink, which will either open in the current tab or in a new tab. If you have selected link, use the text box below to enter a URL, path or hash tag.

Use the font button to show or hide the font size and family selection panel.

1. Font size: tiny / small / medium / large / huge / massive
2. Font family: select one

To set the font family, scroll through the font selection list and select an item. Sans-serif fonts are listed first, followed by serif, display, handwriting and finally, monospace.

1. Responsive (on/off): check for slider to fit container's width
2. Width (pixels): the width value used if responsive is unchecked
3. Height type: pixel value or percentage of width
4. Height (px or %): height value control for setting pixel height or aspect ratio
5. Corner roundness: square / rounded / super round

Responsive means the slider will fill its container's width. If there is no container, such as a parent div element, then the slider will be full page width. If you adjust the width value control the responsive checkbox will become unchecked and the provided value will be used.

Use the px / % buttons to choose your height units, either pixels (px) or percentage (%) of width. When px is selected the height value control sets the height to a fixed number of pixels. When % is selected the height value control sets the height as a percentage of width. The latter is dynamic, so if responsive is checked the height will automatically adjust it self to maintain the same aspect ratio. Be sure that the images you use are suitable for your width and height settings. If responsive, assert that your images are tall or wide enough to fill the slider across various screen sizes.

1. Transition type: instant / slide / zoom
2. Autoplay: manual (off) / once / once and rewind / loop
3. Speed: slow / medium / fast
4. Image effect: no effect / zoom-pan / zoom-rotate

When set to instant a slide transition is immediate, without animation taking place. If set to slide, during a transition the current and new slides move together horizontally until the new one is fully in view. In fade mode the current slide fades out during which the new one fades in to replace it. Zoom is similar to fade, except the current slide is up scaled during its fade out resulting in a zooming effect.

With autoplay turned on (not set to manual), transitions between slides will happen automatically. If set to once the slides will be displayed in sequence until the last slide, which will remain in place. Once and rewind is similar except after all slides have been sequentially displayed, a transition will take place back to the start. In loop mode transitions will continue indefinitely.

Auto play will stop if a user manually changes the slide, either by swiping, using the forward/back buttons or radio buttons.

The speed setting determines the interval between transitions and can be set to slow, medium or fast, where slow has an interval of 10 seconds, medium 7 seconds and fast 4 seconds.

The image effect is different to the transition type: it is applied to the image between transitions. If set to zoom-pan the image is subtly zoomed and panned. Zoom-rotate is similar, except the image gradually rotates instead of panning.

1. Enable: off / on
2. Visibility: invisible / auto hide / visible
3. Icon type: chevron / triangle / arrow
4. Size: small / medium / large
5. Shape: no outline / square / circular / semi-circular / full height
6. Color: white on black / black on white / white / black

The forward / back buttons can be enabled or disabled. When enabled they can be set as visible, where they will always remain visible, set to auto hide when the buttons will only become visible when the user's mouse pointer hovers over the slider, or invisible, meaning the buttons will not be visible, but will still respond to clicks.

Select the icon, which will be applied to both buttons, the size, shape and color combination.

1. Enable: off / on
2. Type: buttons / image thumbnails
3. Shape: square / rounded square / circular
4. Align: left / center / right
5. Color: white / black / white border / black border

The radio buttons can be enabled in addition to the forward / back buttons or instead of. The indicate the current slide with respect to the sequence of all slides. A user can use the radio buttons to navigate between slides.

When set as thumbnails, the slide images are shown in place of the radio buttons.

Align them left, centered or right and set their color, optionally with a border.

1. Download button: this opens the download options panel
2. Download options panel: allows you to select your download options
3. Email zip to me: check if you would like to receive the zip file in your inbox

You can download your slider at any time. Use the Download Zip button, which will open the download options panel. In the options panel, check the Email the Zip to me checkbox and enter your email address if you would like your slider code and images sent to you. In all cases, use the Download Now button to start the download (or/and to receive the email).

It is advised to keep this page open in your browser while you download and test. Then if you need to make changes, you can do so without starting over.

1. Test page button: opens test page options panel
2. Page layout: column width / full page width
3. Page background color: white background / black background
4. Show me button: this opens your slider in a test page

At any time you can use the Show in a page feature to see how your design will appear in a simple web page. After pressing the button, choose the page layout type and background color. If your slider is responsive full width may be a better option.

1. HTML for head: code to be inserted in head element
2. HTML for body: code to be inserted in body element
3. CSS: code to go in <style> tags or in separate .css file

As an alternative to downloading the zip file, you can copy and paste the HTML markup from these textareas straight into your own web page source.

The code in outputted here is updated whenever you make a change to any settings. For example, if you add a slide and additional list element will be appended to the body HTML, or if you change the button color the CSS will be modified to reflect the change.

You can use the Select all buttons to select the entire text content on of the textareas.