Develop Reference

Changing a CSS Class using Javascript If / Then

I am looking for help making an Image Carousel work that only uses HTML, CSS, and Javascript. I was able to get it to function rather well;however, it does not display the 1st image on load.
Script is provided below:
HTML:
<div class="slideshow-container" style="max-width:400px;">
<img class="original-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAPFBMVEX8AgT8AAD9oKD9o6P9qqr9tLT9vr39vLv+3t79mpv9nJz//v7+8/L95uX92dj90dH9ysn9rq79p6f9rKwROItaAAABX0lEQVR4nO3dO1LDUBAFUVm25A8fG3v/e8UBCSRQZP10zg46nqm608vr2/v1dlvX9bg8Hb7c99/M/7f/1f1x+N3H8hfrT8fTtOzGdn4WTiPbzQrrnoUHhW0K+xT2KexT2LeJwsfwhffhC/cK2xT2KexT2KewT2Gfwj6FfQr7FPYp7FPYp7BPYZ/CPoV9myicFbYp7FPYp7BPYZ/CPoV9CvsU9insU9insE9hn8I+hX0K+xT2KexT2KewbxMfQwrjFPYp7FPYp7BPYZ/CPoV9CvsU9insU9insE9hn8I+hX0K+xT2KexT2LeJnZnxt4IUxinsU9insE9hn8I+hX0K+xT2KexT2KewT2Gfwj6FfQr7FPZt4o6/KGxT2KewT2Gfwj6FfQr7FPYp7FPYp7BPYZ/CPoV9CvsU9insU9i3icJVYZvCPoV9CvsU9insU9insG8Thcfd2C7T6TyP7HL9BHu1DksiYTASAAAAAElFTkSuQmCCg" style="width:100%">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAPFBMVEX8AgT8AAD9oKD9o6P9qqr9tLT9vr39vLv+3t79mpv9nJz//v7+8/L95uX92dj90dH9ysn9rq79p6f9rKwROItaAAABX0lEQVR4nO3dO1LDUBAFUVm25A8fG3v/e8UBCSRQZP10zg46nqm608vr2/v1dlvX9bg8Hb7c99/M/7f/1f1x+N3H8hfrT8fTtOzGdn4WTiPbzQrrnoUHhW0K+xT2KexT2LeJwsfwhffhC/cK2xT2KexT2KewT2Gfwj6FfQr7FPYp7FPYp7BPYZ/CPoV9myicFbYp7FPYp7BPYZ/CPoV9CvsU9insU9insE9hn8I+hX0K+xT2KexT2KewbxMfQwrjFPYp7FPYp7BPYZ/CPoV9CvsU9insU9insE9hn8I+hX0K+xT2KexT2LeJnZnxt4IUxinsU9insE9hn8I+hX0K+xT2KexT2KewT2Gfwj6FfQr7FPZt4o6/KGxT2KewT2Gfwj6FfQr7FPYp7FPYp7BPYZ/CPoV9CvsU9insU9i3icJVYZvCPoV9CvsU9insU9insG8Thcfd2C7T6TyP7HL9BHu1DksiYTASAAAAAElFTkSuQmCC" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7vnGsgBgV8QW50dp-wZ4GoCNWu4egKYuxAw&usqp=CAU" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAP1BMVEUEggQAfQCgw6Cqz6oAewCjyKO01bS9273e7d4AeQAAdQCbwJv+//7y9/Ll8eXY6tjR5tHJ4smu0q4AcQDQ4dBHeLN8AAABbElEQVR4nO3dSUoDARRF0UpX6ewS3f9azUAEcWAIhHiq7lnBu/MPf3h6fnl9O522F+PF6svmp+XtNn9aXeM8XmP7y24Y3/f7/frb4r9a3+ZwHMb1MGWL5QwKz5MvXC0ePeKuKvRV6KvQV6GvQl+FvkvhpkJbhb4KfRX6KvRV6KvQV6GvQl+Fvgp9Ffoq9FXoq9BXoW8WhcsKbRX6KvRV6KvQV6GvQl+Fvgp9Ffoq9FXoq9BXoa9CX4W+Cn0V+ir0VeibxcVQhbgKfRX6KvRV6KvQV6GvQl+Fvgp9Ffoq9FXoq9BXoa9CX4W+Cn0V+ir0zeILS4W4Cn0V+ir0Veir0Fehr0Jfhb4KfRX6KvRV6KvQV6GvQl+FvlkUnidfOK4fPeKuKvRV6KvQV6GvQl+Fvgp9Ffoq9FXoq9BXoa9CX4W+Cn0V+ir0Vei7FG4rtFXoq9BXoa9CX4W+Cn0V+uZReFhM2f447I7LKTt+fAID6BDSZpXAFwAAAABJRU5ErkJggg==" style="width:100%">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS40B-kTX7c_MdtnIt_NetW2HFHgPlQP-nGbw&usqp=CAU" style="width:100%">
<div class="text">Caption Four</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
CSS:
.original-image {
z-index: 66 !important;
display: block;
position: absolute;
}
.original-image-gone {
display: none !important;
}
* {box-sizing:border-box}
.slideshow-container {
max-width: 280px;
position: relative;
margin: auto;
width: 100%;
min-height: 274px;
max-height: 274px;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
display: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
display: none;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
display: none;
}
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 16px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
Javascript:
<script>
let slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
document.getElementById('original-image').classList.replace("original-image-gone");
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
let original-image = document.getElementById('original-image');
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
I was hoping the initial slide would load, and so I added a "original image" static image above the slideshow, with the idea of changing its class on click, so it disappears. You can see this with "original-image" and then "original-image-gone"

The way to add a class with JavaScript is just:
document.getElementById("Demo").classList.add("Demo-Class");
The way to remove a class with JavaScript is:
document.getElementById("Demo").classList.remove("Demo-Class");
You could use those like this:
let demo = document.getElementById("demo");
function demoFunction() {
if (demo.classList.contains("Blue-Background")) {
demo.classList.remove("Blue-Background");
demo.classList.add("Pink-Background");
}
else {
demo.classList.remove("Pink-Background");
demo.classList.add("Blue-Background");
}
}
.Blue-Background {
background-color: blue;
color: pink;
}
.Pink-Background {
background-color: pink;
color: blue;
}
<!DOCTYPE html>
<html>
<body>
<p id="demo" class="Blue-Background">Hello!</p>
<button onclick="demoFunction()">Change Paragraph.</button>
</body>
</html>
I'm not sure if this helps but it might.

Function does not run without element[index -1]

First of all, I'm sorry for the inappropriate title.
So I have a code here for a slider, It's copied from w3schools.com and I understand most of the code beside the last line of code from the showSlides function.
slides[slideIndex-1].style.display='block';
Why if I replace slideIndex-1 with 0 or 1 the function does not work anymore.
I have no idea about the use of that, but if it isn't there, the function does not work. (I know the slideIndex is the index of my image).
Why instead of that code I can't use slides[0].style.display='block';
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
So here is the link from the source https://www.w3schools.com/howto/howto_js_slideshow.asp

Changing SlideShow Indicator Into Other Shape

Sorry to change the question midway but there is also something more that I would like to ask.
I'm currently using a default shape of slideshow indicator which is a dot/bullet shaped indicator.
Questions :
Is there anyway to change it into other shape like rectangular shape ?
Because of time constraint I don't have much time to make a slideshow from scratch so I just grab this code mostly from W3School sites and used it as it is.
Here's a part of the HTML code :
<div class="slideshow-container">
<h1 class="page_title">IR</h1>
<div class="mySlides fade">
<img src="/ir/images/slider_img02.jpg" alt="A" style="width:100%">
<div class="text">A</div>
</div>
<div class="mySlides fade">
<img src="/ir/images/slider_img01.jpg" alt="A" style="width:100%">
<div class="text">A</div>
</div>
<div class="mySlides fade">
<img src="/ir/images/slider_img03.jpg" alt="IRA" style="width:100%">
<div class="text">IRA</div>
</div>
<div class="mySlides fade">
<img src="/ir/images/slider_img04.jpg" alt="A" style="width:100%">
<div class="text">A</div>
</div>
<div class="mySlides fade">
<img src="/ir/images/slider_img05.jpg" alt="A" style="width:100%">
<div class="text">A</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
Here's the javascript
<script>
var slideIndex = 1;
var timer = null;
showSlides(slideIndex);
function plusSlides(n) {
clearTimeout(timer);
showSlides(slideIndex += n);
}
function currentSlide(n) {
clearTimeout(timer);
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n==undefined){n = ++slideIndex}
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
timer = setTimeout(showSlides, 4000);
}
</script>
And the CSS :
* {box-sizing: border-box}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: black;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* Caption text */
.text {
background-color: #424242;
color: #ffffff;
opacity: 0.8;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 0px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .1}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .1}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}

You can do it if you change a bit in your CSS. Try this code.
.dot {
cursor: pointer;
height: 10px;
width: 30px;
margin: 0 2px;
background-color: #bbb;
display: inline-block;
transition: background-color 0.6s ease;
}
This is to remove underline in arrow while hover,
.prev:hover,
.next:hover {
text-decoration: none;
}

Please use this code
var slideIndex = 1;
var timer = null;
showSlides(slideIndex);
function plusSlides(n) {
clearTimeout(timer);
showSlides(slideIndex += n);
}
function currentSlide(n) {
clearTimeout(timer);
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n==undefined){n = ++slideIndex}
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
timer = setTimeout(showSlides, 4000);
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: black;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* Caption text */
.text {
background-color: #424242;
color: #ffffff;
opacity: 0.8;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 0px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .1}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .1}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
.dot {
cursor: pointer;
height: 30px;
width: 30px;
margin: 0 2px;
border-radius:0px;
background-color: #bbb;
display: inline-block;
transition: background-color 0.6s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow-container">
<h1 class="page_title">IR</h1>
<div class="mySlides fade">
<img src="/ir/images/slider_img02.jpg" alt="A" style="width:100%">
<div class="text">A</div>
</div>
<div class="mySlides fade">
<img src="/ir/images/slider_img01.jpg" alt="A" style="width:100%">
<div class="text">A</div>
</div>
<div class="mySlides fade">
<img src="/ir/images/slider_img03.jpg" alt="IRA" style="width:100%">
<div class="text">IRA</div>
</div>
<div class="mySlides fade">
<img src="/ir/images/slider_img04.jpg" alt="A" style="width:100%">
<div class="text">A</div>
</div>
<div class="mySlides fade">
<img src="/ir/images/slider_img05.jpg" alt="A" style="width:100%">
<div class="text">A</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>

Google Script HTML/CSS/JS code not running

I have a bootstrapped carousel that is working within my local machine but doesn't work when I tried to implement within Google Scripts environment.
I've followed the instructions from this website, but doesn't seem to work at all: https://developers.google.com/apps-script/guides/html/best-practices. In fact, when I follow these guidelines, it only shows 3 dots (part of my HTML) and nothing else. When I take out the code suggested by this guide, it shows my HTML but can't integrate with CSS or JS code.
Here is my code:
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1}
if (n < 1) {
slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
// clearInterval( timer );
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
// Sets transition every 3 seconds
timer = setInterval( function(){
plusSlides(1); }, 3000 );
* {
box-sizing: border-box}
body {
font-family: Verdana, sans-serif; margin:0}
.mySlides {
display: none}
img {
vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.carousel-caption {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
border: none;
background-color: rgb(0,0,0,.6);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
/* Transition right to left */
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="slideshow-container">
<div class="mySlides">
<div class="numbertext">1 / 5</div>
<img src="https://static.pexels.com/photos/236047/pexels-photo-236047.jpeg" style="width:100%">
<div class="carousel-caption">
<h3>Caption 1</h3>
<p>Caption 1 text</p>
</div>
</div>
<div class="mySlides">
<div class="numbertext">2 / 5</div>
<img src="https://www.nature.org/cs/groups/webcontent/#web/documents/media/2016-photocontest-yosemite-w-1.jpg" style="width:100%">
<div class="carousel-caption">
<h3>Caption 2</h3>
<p>Caption 2 text</p>
</div>
</div>
<div class="mySlides">
<div class="numbertext">3 / 5</div>
<img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" style="width:100%">
<div class="carousel-caption">
<h3>Caption 2</h3>
<p>Caption 2 text</p>
</div>
</div>
<!-- ADD ADDITIONAL IMAGES IN THE [ADD IMG ...] PART -->
<!-- <div class="mySlides fade">
<div class="numbertext">4 / 5</div>
<img src="[ADD IMG ...]" style="width:100%">
<div class="text">This is for a Caption text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 5</div>
<img src="[ADD IMG] ..." style="width:100%">
<div class="text">This is for a Caption text</div>
</div> -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<!-- <span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span> -->
</div>
</body>
<script type="text/javascript" src="interactions.js"> </script>
<script src="js/jquery-1.7.1.min.js"></script>
<!-- <script src="js/bootstrap.js"></script> -->
This is my code.gs:
function doGet() {
return HtmlService.createTemplateFromFile('Index')
.evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
Thanks!

Your code fails, becouse you don't have jQuery. Add it to your project. Order is important!
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/yourscript.js"></script>

jQuery should be loaded before calling $. Also the code misses calling some owlCarousel important files.
I took borrowed the missing files from http://owlcarousel2.github.io/OwlCarousel2/ and commented out the following lines
$('.slideshow-container').owlCarousel({
rtl: true
});
The above makes the code to apparently work fine on Stack Snippet.
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
// clearInterval( timer );
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
// Sets transition every 3 seconds
timer = setInterval(function() {
plusSlides(1);
}, 3000);
/*
$('.slideshow-container').owlCarousel({
rtl: true
});
*/
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.carousel-caption {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
border: none;
background-color: rgb(0, 0, 0, .6);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
/* Transition right to left */
<!-- Owl Stylesheets -->
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<!-- JavaScript files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<body>
<div class="slideshow-container">
<div class="mySlides">
<div class="numbertext">1 / 5</div>
<img src="https://static.pexels.com/photos/236047/pexels-photo-236047.jpeg" style="width:100%">
<div class="carousel-caption">
<h3>Caption 1</h3>
<p>Caption 1 text</p>
</div>
</div>
<div class="mySlides">
<div class="numbertext">2 / 5</div>
<img src="https://www.nature.org/cs/groups/webcontent/#web/documents/media/2016-photocontest-yosemite-w-1.jpg" style="width:100%">
<div class="carousel-caption">
<h3>Caption 2</h3>
<p>Caption 2 text</p>
</div>
</div>
<div class="mySlides">
<div class="numbertext">3 / 5</div>
<img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" style="width:100%">
<div class="carousel-caption">
<h3>Caption 2</h3>
<p>Caption 2 text</p>
</div>
</div>
<!-- ADD ADDITIONAL IMAGES IN THE [ADD IMG ...] PART -->
<!-- <div class="mySlides fade">
<div class="numbertext">4 / 5</div>
<img src="[ADD IMG ...]" style="width:100%">
<div class="text">This is for a Caption text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 5</div>
<img src="[ADD IMG] ..." style="width:100%">
<div class="text">This is for a Caption text</div>
</div> -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<!-- <span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span> -->
</div>
</body>
<!-- <script src="js/bootstrap.js"></script> -->

JavasScript code not working

I am about to do an image slider and the javascript is not working in the code.
I embedded it in an external javascript file and also the internal file that is working with but it's not working.
<!DOCTYPE html>
<html>
<style>
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through
*/
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="resources/img_03.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="resources/img_01.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="resources/img_02.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</section>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
</body>
</html>
I don't know how to make the javascript have an effect on the image slider.

It's working fine.
Add the script before body closing tag()

what is the type you have save the file. Save it as js file