Manual HTML Slideshow With Hyperlinks Includes Next And Back Button

UPDATED: JULY 19, 2016 – ARTICLE: MANUAL HTML SLIDESHOW WITH HYPERLINKS INCLUDES NEXT AND BACK BUTTON

Category: Web Design & Development

Manual HTML slideshow with next and back button can easily be used to sell products on your website. The manual HTML slideshow images are hyperlinked. Copy one code replace with your hyperlinks, photos or images and its done. Visitors can click the next or back button and the displayed image will slide across the screen and be replaced with the next image. Try it below.

How to use the manual HTML slideshow. The manual HTML slideshow demo below has pictures of cameras to buy.

Visitors can use the back or next button to view the image when they want more info they click on it and a new page will open with more info on the camera.

Manual Slideshow Demo Below

Below is the demo. Use the next and back button to move images left or right.

Click on any image and a new page will open with more details.

Fully adjustable you could even change the image size and the spacing between the next and back buttons.

About The Manual HTML Slideshow With Next And Back Button Code

The manual HTML slide code is very easy to use when you create your own site using HTML or WordPress. Copy the below slideshow code and paste it into your site, update your site and it will be working with our stuff on. It will be the same as the demo above. All you do is follow the below tutorials on how to place your stuff on.

Copy the below HTML slideshow code

<style type="text/css"> 
#myreel{ /*CSS for border around images*/
border:  solid  1px  #ABADB3;
background:  #FCFDFF;    
-moz-border-radius:  3px;    
-khtml-border-radius:  3px;     
-webkit-border-radius:  3px;
padding:  0px;   
}
.paginate{ /*CSS for text back and next*/
width: 600px;
margin-top:0px;
font:bold 14px Arial;
color:#000000;
text-align:center;
}
</style> 

<script type="text/javascript" src="http://www.linkbuildingservices4sites.com/resources/reels.js"></script> 
<script type="text/javascript" src="http://www.linkbuildingservices4sites.com/resources/reelslideshow.js"></script>

<script type="text/javascript">  
var firstreel=new reelslideshow({
  wrapperid: "myreel", //ID of blank DIV on page to house Slideshow  
 dimensions: [600, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
      imagearray:  [     
      ["http://www.2createawebsites.com/resources/image-01.jpg", "http://www.amazon.co.uk/dp/B003B20SUG?_encoding=UTF8&tag=hotocrawe03-21&linkCode=as3&camp=2506&creative=9274", "_new"],    
      ["http://www.2createawebsites.com/resources/image-02.jpg", "http://www.amazon.co.uk/gp/product/B004I1KP7U/ref=as_li_tf_tl?ie=UTF8&tag=hotocrawe03-21&link_code=as3&camp=2506&creative=9298&creativeASIN=B004I1KP7U", "_new"], 
      ["http://www.2createawebsites.com/resources/image-03.jpg", "http://www.amazon.co.uk/dp/B004I1KP9S?_encoding=UTF8&tag=hotocrawe03-21&linkCode=as3&camp=2506&creative=9274", "_new"],
      ["http://www.2createawebsites.com/resources/image-04.jpg", "http://www.amazon.co.uk/dp/B004I1KONA?_encoding=UTF8&tag=hotocrawe03-21&linkCode=as3&camp=2506&creative=9274", "_new"]// no trailing comma after very last image element!   
      ],  
       displaymode: {type:'manual', 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><div id="myreel"></div>
<div class="paginate">
‹‹ <a href="javascript:firstreel.navigate('back')" style="margin-right:240px; color:#000000;"> back</a> 
<a href="javascript:firstreel.navigate('forth')" style=" margin-left:240px; color:#000000;"> next</a>  ››
</div> 

How to edit the manual HTML slideshow code

If you want to try build your own website then you should read these articles:

How To Create A Website With WordPress

Make Your Own Website With BoldGrid

Tags: manual HTML slideshow code, manual HTML slideshow, slideshow
ARTICLE: MANUAL HTML SLIDESHOW WITH HYPERLINKS INCLUDES NEXT AND BACK BUTTON FIRST PUBLISHED: DECEMBER 08, 2013