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

HTML Slideshow

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.

Works in WordPress.
‹‹ back next ››

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
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



Please Share





Create An Online Shop

Build your own website and sell stuff. Add as many products as you want and it won't cost you any extra.

Get super fast hosting
Free domain registration
Outstanding reliability
Free shopping basket
Easy to use site builder

Try creating your website free for 30 days. No credit card required, click the below link.


Build and host your own website on super fast reliable hosting.

Free domain included or add a domain you own - Install WordPress in a few clicks - Great support team.

Get a Website that Works. It's quick and easy. No experience necessary.

Sign up today and get 20 percent off your hosting.