1. Slide 1 - Flower
  2. Slide 2 - Another flower
  3. Slide 3 - Field and blue sky
   
?
Image Fit
Image Align
 Upload
?

Dimensions   ?

Height Type
Corners

Transitions   ?

Transition Type
Auto Play
Play Speed
Image Effect

Back / Fwd Buttons   ?

Visibility
Icon
Size
Shape
Color

Radio Buttons   ?

Type
Shape
Align
Color

Image Slider Maker Free Generator Tool

Generate your jQuery CSS3 content slider

To get started, use the controls above to adjust your design, upload your own images and use the Download Zip button to get the generated code. Please consult the documentation below if you need guidance.

Use this button to download your slider code — everything you need is contained in the zip file.

?

Zip file contents

Markup preview

?

Here's the generated HTML and CSS:

Getting Started

Control panels consisting of buttons 1 2 3 4 5 6 7 8
  1. Slide controls: change, add, remove slides
  2. Slide image and caption tabs
  3. Slide image or caption controls
  4. Dimensions: adjust width, height and roundness
  5. Transitions: choose and configure animated transitions
  6. Back / forward buttons: navigation buttons style / behavior
  7. Radio buttons: look / behavior radio buttons
  8. Reset button: reset all setting to defaults

The design controls are organized across 5 panel segments. Any changes made via these controls will be reflected in the live preview above, in the source code output and will be used to construct the zip file, which you can download at any time.

If you experiment with the controls, their effect should be evident in most cases. Please refer the more detailed documentation below where it is not obvious, and please get in contact if you have any difficulties or a question.

Slides

Slide change, remove and add controls along with image and caption tabs 1 2 3
  1. Slide number: changes the slide and corresponding settings
  2. Slide Remove/add: decrease or increase number of slides
  3. Image & caption tabs: change between slide image and caption settings

Use the slide number buttons to select the slide you wish to edit.

The slide add button allows you to incrementally increase the number of slides to a maximum of 10. Use the slide remove button to incrementally decrease the number of slides.

Use the image / caption tabs to switch between the image, caption 1, caption 2 and caption 3 settings for the active slide. For example, to adjust the image settings for a slide, first select the slide using the slide number buttons, then select the image tab. Likewise, to edit a caption, after selecting a slide, select one of the caption tabs. By default, for each slide, caption 1 is enabled, but captions 2 and 3 disabled.

Slide Images

Slide image controls showing alignment, background image and hyperlink setting controls 1 2 3 4 5
  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.

Captions

These settings correspond to the active caption tab (and the active slide).

Caption controls showing settings for display effect, delay, caption text, font, positioning, styling and hyperlink 1 2 3 4 5 6 7 8 9 10 11 12
Caption font controls with settings for size and font family via a select list 1 2
  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.

Setting your slider's ID

The slider's top level DIV element is uniquely identified by its id attribute. Each of the selectors in the generated CSS is prefixed by this ID.

If you would like multiple sliders on one page, then you must set the ID of each slider you create to a unique value. If you require only one slider on your page, then you do not need to set the ID and can safely leave it as its default value.

Dimensions

Dimensions controls showing settings for responsiveness, width, height and corner roundness 1 2 3 4 5
  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.

Transitions

Transitions controls showing settings for transition type, autoplay mode, autoplay speed and image effect 1 2 3 4
  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.

Forward / Back Buttons

Forward and back button controls showing settings for visibility, icon type, size, shape and color 1 2 3 4 5 6
  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.

Radio Buttons

Radio button controls showing settings for type, shape, alignment and color 1 2 3 4 5
  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.

Download

Download button 1
Download options panel 2 3
  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.

Test Page

Show my slider in a page button 1
Show my slider in a page options panel 2 3 4
  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.

Generated HTML and CSS Output

Code output panel showing 3 textareas populated with HTML and CSS code 1 2 3
  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.