Live Demo
As of March 2019 Google has now officially added image carousel support to the new google sites and you would be able to easily add slideshow to your site via that unless you want something more customizable.
In this tutorial I’ll show you how to add an image slider or carousel in new Google Sites. I am a freelancer and most of my clients asked me to add one to their site. I thought there would be many others who want the same but don’t know how to add it so Let’s get started.
Slick Carousel
There are many great image sliders or carousels out there but I’ll be using slick carousel. I love it and used it for almost all of my clients. And we’ll be using the links from a CDN as google sites does not let us upload scripts or code files to their server.
Add slick.css to your <head> tag
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.min.css"/>
Adding the HTML part
Just add the html right after <body> tag and keep in mind you gotta include images that are online on another server like imgbb. Google sites let you upload images but you won’t be able to use it even if you fetch the url as they somehow keep changing their urls every 2 or 3 day and thus your slider won’t show the images until you update it again.
<div class="gsSlider">
<div><img src="https://i.ibb.co/0nJkths/slider6.jpg" /></div>
<div><img src="https://i.ibb.co/r44fMpf/slider5.jpg" /></div>
<div><img src="https://i.ibb.co/RTHpRVY/slider4.jpg" /></div>
</div>
Add slick.js and jquery support below the closing body tag </body> in the exact order.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
Initialize your slider by pasting the code right after the above code
<script type="text/javascript">
$(document).ready(function(){
$('.gsSlider').slick({
dots: true
});
});
</script>
Final Code
If done right your final HTML file should look like this except the css part, which is good for you and will make your slider look good because without this css code your carousel will have problems. Just add it as I have added it in the following code.
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Slider</title> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.min.css"/> <style type="text/css"> .gsSlider { max-width: 1200px; margin: 0 auto; } .slick-next { right: 25px; } .slick-prev { left: 25px; z-index: 9; } .slick-dots { bottom: 25px; z-index: 9; } .slick-dots li button:before { color: #fff; font-size: 14px; opacity: 1; } .slick-dots li.slick-active button:before { color: #92AD27; } .slick-dotted, .slick-slider { margin-bottom: 0 !important; } </style> </head> <body> <div class="gsSlider"> <div><img src="https://i.ibb.co/0nJkths/slider6.jpg" /></div> <div><img src="https://i.ibb.co/r44fMpf/slider5.jpg" /></div> <div><img src="https://i.ibb.co/RTHpRVY/slider4.jpg" /></div> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.gsSlider').slick({ dots: true }); }); </script> </body> </html>
Adding the final code to New Google Sites via Embed
When you are inside Google sites and are able to edit it you should see the embed on the right hand side or click on the insert tab and you’ll see it there. Refer to the screenshot below if you have problems finding it.
Leave a Reply