Google Sites Help

US ✆ +1 (302) 672 3007

UK ✆ +44 (207) 871 5021

Steegle - Google Sites & G Suite Experts

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

Image Carousel in new Google Sites

  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>

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