US ✆ +1 (302) 672 3007
UK ✆ +44 (207) 871 5021
Bootstrap Carousel Demo - new Google Sites
Example of using the Bootstrap framework carousel in Embed Code feature of new Google Sites
Example
Image Carousel in new Google Sites
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.
Note
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.
Code for example carousel above
<!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>
Our Support Service
If you need help with your classic Google Site or new Google Sites we can provide support on getting your problem solved, make creative responsive designs for your site or give advice on the best way to get the most from Google Sites.
Keep up-to-date
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