Google Sites Help
Steegle

Bootstrap Carousel Demo - New Google Sites

Example of using the Bootstrap framework carousel in Embed Code feature of new Google Sites

Example

Share via Twitter
Share via Google+
Share via LinkedIn
Share via Facebook

Basic Guide

  1. Get the sample Bootstrap code - see Bootstrap 3 Tutorial
  2. Add the Bootstrap Carousel Plugin code
  3. Edit the code to add your own image URLs in the <img> src attributes and any captions you want to appear
  4. 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>

Keep up-to-date

Join the New Google Sites Update Group to get email notifications .

Newsletter

Subscribe to our newsletter for emails about all things Steegle