How To Create A Slideshow In HTML – Free Image Slideshow HTML Code

create-a-slideshowCreate a slideshow. Want to know how to create a image slideshow in HTML? Its not difficult using our image slideshow HTML code. This is one of the best ways to display a lot of images in one place on your site. You don’t need a slideshow creator or download free slideshow software, all you need to do is copy our image slideshow code edit it with your stuff and paste it on your site. If you are looking to create a slideshow that has a fast loading script then this is the one to use.

Image slide show demo below notice how images fade in then fade out.

Whats Next

Scroll down the page and copy the slideshow java-script code if you want to create a slideshow on your website. Next paste the slideshow java-script code onto your site and update or publish your site.

The slide show will now be working on your site, but it will have our images on which you will need to remove and replace with your images.

To add your images to the slide show go back to the image slide show code on you site

Look for this code

["http://www.linkbuildingservices4sites.com/resources/create-a-slideshow-1.jpg"],
["http://www.linkbuildingservices4sites.com/resources/create-a-slideshow-2.jpg"],
["http://www.linkbuildingservices4sites.com/resources/create-a-slideshow-3.jpg"],
["http://www.linkbuildingservices4sites.com/resources/create-a-slideshow-4.jpg"],
["http://www.linkbuildingservices4sites.com/resources/create-a-slideshow-5.jpg"]

These are the 5 image links that are hosted from us on a spare domain. Remove our image links and replace with images that are hosted on your domain. Upload your images to your website and place the full image link in the HTML code when you create a slideshow. Remember to compress images for faster loading.

To change the image size on the free slideshow javascript code look for the below code and where the 750 (width) and 500 (height) is change it to the size of your images.

dimensions: [750, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image

Once all done publish your site and your new image slideshow will be working. If you have used our free slideshow software make a comment below and let us know.

Use Our Free Slideshow Software To Create a Slideshow On Your Site

HTML Image Slideshow Code

<script type="text/javascript" src="http://www.linkbuildingservices4sites.com/resources/slide-show.js"></script>   

<div id="imageslideshow1"></div> 

<script type="text/javascript">  
var mygallery=new fadeSlideShow({   
 wrapperid: "imageslideshow1", //ID of blank DIV on page to house Slideshow   
 dimensions: [750, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image (www.2createawebsites.com)
   imagearray:  [     
   ["http://www.linkbuildingservices4sites.com/resources/create-a-slideshow-1.jpg"],    
   ["http://www.linkbuildingservices4sites.com/resources/create-a-slideshow-2.jpg"], 
   ["http://www.linkbuildingservices4sites.com/resources/create-a-slideshow-3.jpg"],
   ["http://www.linkbuildingservices4sites.com/resources/create-a-slideshow-4.jpg"],
   ["http://www.linkbuildingservices4sites.com/resources/create-a-slideshow-5.jpg"]
   ],
  displaymode: {type:'auto', pause:1000, cycles:0, wraparound:false},   
  persist: false, //remember last viewed slide and recall within same session?   
  fadeduration: 2000, //transition duration (milliseconds)  
  descreveal: "ondemand",
  togglerid: ""
  })
 </script>  

You may also like this.

Create Your Own Free HTML Slideshow
Fade In Fade Out Slideshow With Hyperlink
Manual Image Slideshow With Next And Back Button

Please join us

social buttons image for visitors click and share facebook twitter linkedin Google + delicious youtube rss

Please Share





Get the best web hosting deal on the web save $30.00 and get a free domain name, we use the same hosting company. This fantastic deal is for our visitors only click below.

Create Your Own Website
 

6 thoughts on “How To Create A Slideshow In HTML – Free Image Slideshow HTML Code

  1. Can anybody help? I have used this lovely slideshow on three sites but the last one is not behaving as expected. http://www.rectorycottagewales.co.uk/
    On this site the slide show goes through five pictures but before it returns to the first on there is a blank pause. I have tried repeating the first slide at the end of the cycle but I still get the blank space. I should be grateful for solutions.

Leave a Reply