The ZIP contains everything you need:
Download ZIPSee your image slider in a page:
Preview in web pageYou will need to copy and paste the following into the head element your web page:
Insert the following into body of your web page, i.e. in the place where you want the image slider to appear in the page:
Usage
Use the controls in the six panels to configure and then download your image slider.
Slider Settings
Use the Slider Settings panel to set your image slider's overall width, height and border radius. Set the number of slides (2 minimum, 7 maximum) and animation type (either fade or slide). Check autoplay if you would like your slider to automatically cycle. The element id input lets you define the ID of the slider's DIV, which is useful if you want multiple sliders on one page.
Slides
The Slides panel lets you set the image, image position and caption text for each slide. Use the numbered tabs within the panel to switch between different slides. Click on the image select, then either select one of the available preset images or upload your own. Position the image using the x and y inputs or by dragging the positioner. The center button will center the image on the slide.
Caption
Use the controls in the Caption panel to style the slider text and text background. Captions can be positioned at the top or bottom of each slide and can have their text left, center or right aligned. Choose the font family, size and weight/style for the main slide text. The available font weights and styles vary depending on your font family selection. Your changes here will be applied to the captions across all slides.
Prev/Next
The image slider's Prev and Next buttons can be customized using the Prev/Next panel. A user would use these buttons to step forwards or backwards through the set of slides. As with the caption settings you can specify the font family, size and weight/style. You can also customize the text on each button. Uncheck the show checkbox if you do not want the prev/next buttons.
Markers
The Markers panel lets your set the marker style. The markers indicate slide sequence, which slide is active and can be used to change slide. You have a choice of marker text type, including natural numbers, roman numerals, alphabetic and blank. Position them either left, centered or right. Experiment with the border radius and padding settings until you reach your desired shape. Uncheck the show checkbox if you do not want markers to be displayed.
Output
The easiest way to get your customized image slider is to download the ZIP. To see your slider in a simple web page, use the Preview in Web page link.
Using in your website
For the generated image slider to work include all the necessary CSS, JavaScript, HTML markup and images. Look at example.html in your downloaded zip to see a complete example. Make sure all paths to the CSS, JavaScript and images are correct for your website's directory structure.
Further Customization
You can of course customize your image slider further after downloading it. The resulting image slider is composed of standard HTML and CSS. Add more or amend the HTML content of each slide and edit the CSS file to modify the look and feel. Look at Basic jQuery Slider for reference on how to configure the slider's behaviour.
Compatibility
The configurer (this website)
Image Slider Maker is known to work best in Chrome and Firefox.
The resulting image slider
The resulting image slider output should work across all major web browsers. Check github.com/jcobb/basic-jquery-slider for information on its compatibility, changes and issues.
About
ImageSliderMaker.com lets you rapidly create high quality, sleek yet simple image sliders, which you can download and use on your website or blog. The tool makes it easy to add stunning background images, insert caption text and tweak the visual style. When you're happy with your design, download the dynamically generated ZIP (and optionally customize further by adding your own HTML content).
All provided images are public domain - see Image Credits for details.
Share this page