Is it possible to insert image slider in google sites, that too full length ? yes, it is possible , as you all know Google Sites is a Very easy Web page creation tool offered by Google, which is absolutely free of cost, the main aim of Google sites is for anyone to be able to create simple web sites to support their needs, but it does not provide all the functionality of the premium websites that are very costly, so you have to make some adjustments here and there, to make your google site look like a perfect normal website.
One of the drawbacks of google site is it does not provide full length image slider, you can insert the image slider but not full length , here will see by very easy technique,you can insert image slider in google sites without any google gadgets to cover full length of any page of google site
No Time to Read? Watch Video
Steps to insert image slider in Google Sites :
1 – Open the google sites
2 – Click on the settings button and select Edit Site Layout option and select the width so that the image can fit properly to the screen
3 – Then go to insert tab and select HTML Box and copy the following codes,
<!DOCTYPE html>
<html>
<head>
<style>
#slideshow, #initial {
position: relative;
width: 1000px;
height: 400px;
margin:auto;
}
#slideshow > img {
position: absolute;
margin:auto;
}
#nav {
background-color:#white;
font-size:100%;
width:900px;
padding:2px;
margin-left: auto ;
margin-right: auto ;
}
</style>
</head>
<body>
<center>
<div id=”initial”> <img src=”https://sites.google.com/site/sam22323232322/200.png“>
</div>
<div id=”slideshow” style=”display:none”>
<img src=”https://sites.google.com/site/sam22323232322/200.png“>
<img src=”https://sites.google.com/site/sam22323232322/201.jpg“>
<img src=”https://sites.google.com/site/sam22323232322/202.jpg“>
<!– <div>Pretty cool eh? This slide is proof the content can be anything. </div> –>
</div>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”> </script>
<script>
//http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/
$(“#slideshow > img:gt(0)”).hide();
setInterval(function() {
$(‘#slideshow > img:first’)
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo(‘#slideshow’);
}, 3000);
$(‘#initial’).hide();
$(‘#slideshow’).show();
</script>
</body>
</html>
4.Then edit the image source path(link in blue color) to your required image path.
5.Full length image slider has been inserted successfully in google sites.
I hope this material is useful, Think big, Be Kind and Try Xtra, keep all your dreams alive !!!