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