// Open the Modal
function openModal() {
document.getElementById('myModal').style.display = "block";
}
// Close the Modal
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
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("demo");
var captionText = document.getElementById("caption");
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}
/*Main list*/
#list ul{width:100%; height:100%; border-radius:0px; list-style-type:none; margin:5% 0% 0% 0%; overflow:hidden; padding:0% 0% 4% 0%; background:rgba(240,240,240,1);}
#list li{box-shadow:0px 10px 10px 0px rgba(0,0,0,0.2); transition:0.1s; border-radius:0px 0px 10px 10px; border:2px solid black; color:black; background:rgba(255,255,255,1); width:70%; height:auto; display:block; text-decoration:none; font-weight:bold; font-size:0.9vw; margin:0% 0% 5% 0%; overflow:hidden; word-wrap:break-all; word-break:break-word; padding:0% 0% 0% 0%; float:left; text-align:center; line-height:1.2; }
.row > .column {
Padding:0%; margin:0;
width:30%; height:auto; float:left;
}
.column img{width:95%; height:auto; margin:0% 0% 0% 0%; float:left;}
.row:after {
content: "";
display: table;
clear: both;
}
/* Create four equal columns that floats next to eachother */
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
/* Hide the slides by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-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);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Caption text */
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<div id="list">
<ul>
<li>
<!-- Images used to open the lightbox -->
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">
</div>
Some text
</div>
<!-- The Modal/Lightbox -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
</li>
<li>
<!-- Images used to open the lightbox -->
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/howto/img_snow.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">
</div>
Some text
</div>
<!-- The Modal/Lightbox -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="https://www.w3schools.com/howto/img_snow.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://www.w3schools.com/howto/img_woods_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://www.w3schools.com/howto/img_5terre_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
</li>
</ul>
</div>
I have a ul which contains multiple li and each li has a main image.
Once the user clicks on the image, a lightbox opens for the user.
I've implemented the example found on W3C Schools and it works very well.
Except for one important thing:
When I click on the image on my second li, it shows the content of my first li.
How can I separate the content on a large number of list items without having to change the id/class?
The example you used is made for one slider. When you tried to duplicate, you duplicated the element id "myModal" which you should not do. ID's are meant to be unique.
Likewise, the javascript functions were written to act on one modal with that ID. So one way to fix this is to re-write the functions to pass the modal ID. That way the functions can manipulate the correct slider block. Here is an example:
// Open the Modal
function openModal(id) {
document.getElementById(id).style.display = "block";
}
// Close the Modal
function closeModal(id) {
document.getElementById(id).style.display = "none";
}
var slideIndex = 1;
showSlides('myModal', slideIndex);
showSlides('myModal2', slideIndex);
// Next/previous controls
function plusSlides(id, n) {
showSlides(id, slideIndex += n);
}
// Thumbnail image controls
function currentSlide(id, n) {
showSlides(id, slideIndex = n);
}
function showSlides(id, n) {
var i;
var modalDiv = document.getElementById(id);
var slides = modalDiv.getElementsByClassName("mySlides");
/* var dots = modalDiv.getElementsByClassName("demo"); */
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"; */
}
/*Main list*/
#list ul{width:100%; height:100%; border-radius:0px; list-style-type:none; margin:5% 0% 0% 0%; overflow:hidden; padding:0% 0% 4% 0%; background:rgba(240,240,240,1);}
#list li{box-shadow:0px 10px 10px 0px rgba(0,0,0,0.2); transition:0.1s; border-radius:0px 0px 10px 10px; border:2px solid black; color:black; background:rgba(255,255,255,1); width:70%; height:auto; display:block; text-decoration:none; font-weight:bold; font-size:0.9vw; margin:0% 0% 5% 0%; overflow:hidden; word-wrap:break-all; word-break:break-word; padding:0% 0% 0% 0%; float:left; text-align:center; line-height:1.2; }
.row > .column {
Padding:0%; margin:0;
width:30%; height:auto; float:left;
}
.column img{width:95%; height:auto; margin:0% 0% 0% 0%; float:left;}
.row:after {
content: "";
display: table;
clear: both;
}
/* Create four equal columns that floats next to eachother */
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
/* Hide the slides by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-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);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Caption text */
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<div id="list">
<ul>
<li>
<!-- Images used to open the lightbox -->
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" onclick="openModal('myModal');currentSlide('myModal',1)" class="hover-shadow">
</div>
Some text
</div>
<!-- The Modal/Lightbox -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal('myModal')">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides('myModal',-1)">❮</a>
<a class="next" onclick="plusSlides('myModal',1)">❯</a>
</div>
</div>
</li>
<li>
<!-- Images used to open the lightbox -->
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/howto/img_snow.jpg" onclick="openModal('myModal2');currentSlide('myModal',1)" class="hover-shadow">
</div>
Some text
</div>
<!-- The Modal/Lightbox -->
<div id="myModal2" class="modal">
<span class="close cursor" onclick="closeModal('myModal2')">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="https://www.w3schools.com/howto/img_snow.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://www.w3schools.com/howto/img_woods_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://www.w3schools.com/howto/img_5terre_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides('myModal2',-1)">❮</a>
<a class="next" onclick="plusSlides('myModal2',1)">❯</a>
</div>
</div>
</li>
</ul>
</div>
<script>
</script>
Related
I want to make multiple slider but slider should stop on last slide of first slider.
as well for all slider's last slide.
i'm creating dynamic sections in liquid file but my basic need is something like this. how can i solve that?
My Need: Shopify dynamic section with multiple block. each block contain sliders. how can i start and stop slider for perticular block. if i add section twice. or block twice. all slider work same as below.
`<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-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);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.myModal{
display:none;}
</style>
<body>
<h2 style="text-align:center">Lightbox</h2>
<div>
<button onclick="activeMe();">Here click </button>
<div id="myModal" class="">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
</div>
<div id="left">
<button onclick="activeMe();">Here click </button>
<div id="myModal" class="">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
</div>
</div>
</div>
<script>
function activeMe(){
var element = document.getElementById("myModal");
element.classList.toggle("myModal");
}
function openModal() {
document.getElementByClassName("myModal").style.display = "block";
}
function closeModal() {
document.getElementByClassName("myModal").style.display = "none";
}
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("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = slides.length}
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>
`
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.
I want to create a webpage where i can see my videos and some pictures from something. I get some free examples from w3schools for the gallery page and some video embedding code from somewhere else. These codes are working on their own but i can't figure out where is the problem exactly when i put them together.
In the style tags there is a
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
The problem lies in here i think.
Here is my code
/* video */
$(document).ready(function() {
$('#videos a').each(function() {
var data = $(this).attr('data');
$(this).append('<img src="http://img.youtube.com/vi/'+data+'/maxresdefault.jpg" />');
});
$('#videos a').click(function() {
var data = $(this).attr('data');
$('#loader').append('<iframe src="https://www.youtube.com/embed/'+data+'" frameborder="0" allowfullscreen></iframe>');
$('#overlay').fadeIn(250);
});
$('#close').click(function() {
$('#overlay').fadeOut(250,function() {
$('#loader').html('');
});
});
});
/* VIDEÓ */
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
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("demo");
var captionText = document.getElementById("caption");
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}
#videos a {
display: block;
width: 25%;
margin-bottom: 20px;
box-sizing: border-box;
padding: 0 10px;
float: left;
cursor: pointer;
text-decoration: none;
outline: 0;
}
#videos a:hover {
opacity: 0.7;
}
#videos a img {
width: 100%;
height: auto;
}
#overlay {
background: rgba(0,0,0,0.8);
position:fixed;
top: 0;
right: 0;
left:0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 99999;
display: none;
}
#overlay .modal {
background: #fff;
border-radius: 5px;
width: 90%;
margin: 100px auto;
max-width: 800px;
min-height: 100px;
position: relative;
padding: 30px 20px 15px;
}
#overlay .modal #close {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
#overlay iframe {
width: 100%;
}
/* VIDEÓ VÉGE */
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-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);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,300' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<h1 style="text-align:center">Lightbox</h1>
<div class="row">
<div class="column">
<img src="img_nature.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_snow.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="img_snow_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo cursor" src="img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<br>
<h2 style="text-align:center">Videos</h2>
<div id="videos">
<a data="uT6YOI6JcRs"></a>
<a data="B9FzVhw8_bY"></a>
<a data="d0K436vUM4w"></a>
<a data="PhbWIFDqQfk"></a>
</div>
<div id="overlay">
<div class="modal">
<div id="close">X</div>
<div id="loader"></div>
</div>
</div>
I don't get errors. I wanted to be able to click to the images separated from the videos and vice-versa. If you delete the css from VIDEÓ to VIDEÓ VÉGE You can see that the image gallery is working. And if you delete the css from VIDEÓ VÉGE to the bottom of the style you can see that the video page is working too.
I tried to modify the z-indexes for both of the css codes.
Okay the problem was that i used two of the same .modal in the css. I renamed the video's css modal to modale in both the css and in the html and everything is working. Thank you all!
I've made a slideshow, which works perfectly fine on its own, without the auto play function I've added to it. But as soon as I add the auto play function its loading pictures in below it and changing the look of my page.
The idea is to have five images in a slideshow which will automatically scroll, but if the user wants to select one of the particular images, they can do via the dots on the bottom.
I feel like I'm missing something quiet obvious, anyone got any ideas?
var slideIndex = 1;
showSlides(slideIndex);
window.plusSlides = function(n) {
showSlides(slideIndex += n);
};
window.currentSlide = function(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";
}
$(".slideshow-container > .mySlides:gt(0)").hide();
setInterval(function() {
$('.slideshow-container > .mySlides:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('.slideshow-container');
}, 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: 130em;
position: relative;
margin: auto;
width: 100%;
img {
#include curvededges();
width: 130em;
object-fit: cover;
margin-top: 0.5em;
max-height: 85em;
}
}
/* 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,
.next {
display: none;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
display: none;
}
/* 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;
display: none;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 3em;
width: 3em;
margin: 0 1em;
background-color: transparent;
border: solid $white 2px;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: $white;
}
.dot_box {
position: absolute;
top: 89em;
left: 52em;
text-align: center;
}
/* 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
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 5</div>
<img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=350" />
<div class="text">Providing a safe home for animals since 1988</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 5</div>
<img src="https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" />
<div class="text">Providing a safe home for animals since 1988</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 5</div>
<img src="https://images.unsplash.com/photo-1533738699159-d0c68059bb61?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0bb9888db1d270eab08c77f41120dfca&w=1000&q=80" />
<div class="text">Providing a safe home for animals since 1988</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 5</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Gatto_europeo4.jpg/250px-Gatto_europeo4.jpg" />
<div class="text">Providing a safe home for animals since 1988</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 5</div>
<img src="https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_960_720.jpg" />
<div class="text">Providing a safe home for animals since 1988</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 class="dot_box">
<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>
</div>
try this carousal
owl carousal
downlaod the carousal then add these css files
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
html format
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
add these js files
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
now call the carousal
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
now you are done. follow the documentation for more options
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> -->