Steegle.One Intranet for Google Workspace
Get the sample Bootstrap code - see Bootstrap 3 Tutorial
Add the Bootstrap Carousel Plugin code
Edit the code to add your own image URLs in the <img> src attributes and any captions you want to appear
Insert the code on your new Google Site.
If you want to use images in Google Drive make sure that you have made the image available without sign in (set the link sharing option to Public or Anyone with the link).
To get the a useable URL for a Google Drive image you need to get the image's ID and append to this URL:
https://drive.google.com/uc?export=view&id=YourIdHere
Looks great on mobile devices.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-caption {text-shadow:0px 0px 8px rgba(0,0,0,1);color:#fff;}
h3,p{font-weight:900}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://drive.google.com/uc?export=view&id=1OrDxOPH_Rqp1y3Mqznjg-2tcJR0wEgsX" alt="Manufacturer and Control Systems - Website - New Google Sites">
<div class="carousel-caption">
<h3>Manufacturer and Control Systems - Website</h3>
<p>New Google Sites</p>
</div>
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1kMkGSfWjUb5AVdyXxIObK0-j8dpkQEPI" alt="IT Services - Intranet - New Google Sites">
<div class="carousel-caption">
<h3>IT Services - Intranet</h3>
<p>New Google Sites</p>
</div>
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=14XPD7nNYZLHz-UAwxMU7dGbru4kXKdJ8" alt="IT Consultancy - Website - New Google Sites">
<div class="carousel-caption">
<h3>IT Consultancy - Website</h3>
<p>New Google Sites</p>
</div>
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1oaixENInPgtHEpxDpMTfwgfni_YFEbiS" alt="Charity - Intranet - New Google Sites">
<div class="carousel-caption">
<h3>Charity - Intranet</h3>
<p>New Google Sites</p>
</div>
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1kZfudh6B7MpP0iJ3cFgzS8qshniIl1Wt" alt="School/College - Website - New Google Sites">
<div class="carousel-caption">
<h3>School/College - Website</h3>
<p>New Google Sites</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
Join the Sites Update Group on the Google Sites Classic Comparison to get email notifications about New Google Sites updates.
Subscribe to our newsletter for emails about all things Steegle