i made a multiple carousel header and everything looks pretty good in my desktop but when the device size changes the images overlap each other and the navbar is not responsive either,enter image description here i have tried everything but i am not able to fix it pls help
my problem:
click here to see my problem
this is the code:
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none; }
.mySlides1 {display: none; }
.mySlides2 {display: none; }
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
position: relative;
margin: auto;
}
/* The dots/bullets/indicators */
.dot2 {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.dot1 {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.btn {
position: absolute;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #c7a343;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.btn:hover {
background-color: black;
color: white;
}
.champu{
position: absolute;
top: 6em;
left: 10em;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
background-color:#9caaa9;
}
.img{
width: 40em;
height: 30em !important;
object-fit: cover !important;
}
</style>
<div class="row">
<div class="col-md-12" style="background-image: url(background-.jpg);">
<div class="col-md-4">
<div class="slideshow-container" style=" padding-left:0 !important; margin: 0 !important; padding: 0 !important;">
<div class="mySlides fade">
<img src="slider-pics/living-room/pic2.png" style="margin-top:9em; height: 30em !important; padding-left:1em !important; width: 37em !important;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Living Room</h3>
<a href="collections-livingroom.html">
<button class="btn" style="top: 85%; left: 50%;">View Collection</button>
</a>
</div>
<div class="mySlides fade">
<img src="slider-pics/living-room/pic1.png" style="margin-top:9em; height: 30em !important; padding-left:1em !important; width: 37em !important;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Living Room</h3>
<a href="collections-livingroom.html">
<button class="btn" style="top: 85%; left: 50%;">View Collection</button>
</a>
</div>
<div class="mySlides fade">
<img src="slider-pics/living-room/pic3.png" style="margin-top:9em; height: 30em !important; padding-left:1em !important; width: 37em !important;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Living Room</h3>
<a href="collections-livingroom.html">
<button class="btn" style="top: 85%; left: 50%;">View Collection</button>
</a>
</div>
<div class="mySlides fade">
<img src="slider-pics/living-room/pic4.png" style="margin-top:9em; height: 30em !important; padding-left:1em !important; width: 37em !important;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Living Room</h3>
<a href="collections-livingroom.html">
<button class="btn" style="top: 85%; left: 50%;">View Collection</button>
</a>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div><!-- col-md-4-->
<div class="col-md-4">
<div class="slideshow-container" style="width: 43em !important; padding-right:4em !important; padding-left:0.2em; margin-left:0 !important;">
<div class="mySlides1 fade">
<img src="slider-pics/bedroom/pic2.jpg" style="margin-top:9em; width: 45em !important; height: 30em !important;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Bedroom</h3>
<button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>
<div class="mySlides1 fade">
<img src="slider-pics/bedroom/pic1.jpg" style="margin-top:9em; width: 45em !important; height: 30em !important;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Bedroom</h3>
<button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>
<div class="mySlides1 fade">
<img src="slider-pics/bedroom/pic3.jpg" style="margin-top:9em; width: 45em !important; height: 30em !important;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Bedroom</h3>
<button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>
<div class="mySlides1 fade">
<img src="slider-pics/bedroom/pic4.jpg" style="margin-top:9em; width: 45em !important; height: 30em !important;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Bedroom</h3>
<button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot1"></span>
<span class="dot1"></span>
<span class="dot1"></span>
<span class="dot1"></span>
</div>
</div><!-- col-md-4-->
<div class="col-md-4">
<div class="slideshow-container" style="padding-right:13em !important; width:50em; padding-left:1em;">
<div class="mySlides2 fade">
<img src="slider-pics/outdoor/pic2.jpg" style="margin-top:9em;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Outdoor</h3>
<button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>
<div class="mySlides2 fade">
<img src="slider-pics/outdoor/pic1.jpg" style="margin-top:9em;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Outdoor</h3>
<button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>
<div class="mySlides2 fade">
<img src="slider-pics/outdoor/pic3.jpg" style="margin-top:9em;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Outdoor</h3>
<button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>
<div class="mySlides2 fade">
<img src="slider-pics/outdoor/pic4.jpg" style="margin-top:9em;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Outdoor</h3>
<button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot2"></span>
<span class="dot2"></span>
<span class="dot2"></span>
<span class="dot2"></span>
</div>
</div><!-- col-md-4-->
</div> <!-- col-md-12-->
</div><!-- row -->
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
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";
setTimeout(showSlides, 3000);
}
var slideIndex1 = 0;
showSlides1();
function showSlides1() {
var i;
var slides = document.getElementsByClassName("mySlides1");
var dots = document.getElementsByClassName("dot1");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex1++;
if (slideIndex1 > slides.length) {slideIndex1 = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex1-1].style.display = "block";
dots[slideIndex1-1].className += " active";
setTimeout(showSlides1, 2000);
}
var slideIndex2 = 0;
showSlides2();
function showSlides2() {
var i;
var slides = document.getElementsByClassName("mySlides2");
var dots = document.getElementsByClassName("dot2");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex2++;
if (slideIndex2 > slides.length) {slideIndex2 = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex2-1].style.display = "block";
dots[slideIndex2-1].className += " active";
setTimeout(showSlides2, 4000);
}
</script>
Use media query in CSS styling so you can design it as per the device size so that your images don't overlap
You can go through this for reference:
https://www.w3schools.com/Css/css3_mediaqueries_ex.asp
Related
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.
In the modal popup I need to hide the left arrow of the first image, while the left arrow is visible for two middle slide. And hide the right arrow of the last image while the left arrow is visible in two middle slide. Basically the first image will have only right arrow, middle two image will have both arrow and the last image will have only left arrow.
Please help. Please use code snippet in full page.
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 = this.alt;
}
.modal {
width: 58%;
height: 100%;
top: 0;
position: fixed;
display: none;
background-color: rgba(22,22,22,0.5);
margin-left: 300px;
max-width: 779px;
min-width: 779px;
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.mySlides {
display: none;
}
.close {
position: relative;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
left: 584px;
top: 90px;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
.cursor {
cursor: pointer;
}
.prev {
cursor: pointer;
position: relative;
top: -149px;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
left: -10%;
}
.next {
cursor: pointer;
position: relative;
top: -149px;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
left: 600px;
}
<body>
<tr>
<div class="row">
<div class="column">
<td>
<p align="center"><img
src="https://source.unsplash.com/collection/190727/1600x900" width="250" height="164"
onclick="openModal();currentSlide(1)" class="hover-shadow cursor" ></p>
</td>
</div>
<div class="column">
<td>
<p align="center"><img
src="https://source.unsplash.com/collection/190727/1600x910" width="250" height="164"
onclick="openModal();currentSlide(2)" class="hover-shadow cursor"></p>
</td>
</div>
<tr>
<div class="column">
<td>
<p align="center"><img src="https://source.unsplash.com/collection/190727/1600x920" width="250" height="164" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</td>
<td>
</div>
<div class="column">
<p align="center"><img src="https://source.unsplash.com/collection/190727/1600x930" width="250" height="164" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</td>
</div>
</tr>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x900" style="width: 98%; position: relative; left: 10px; top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x910" style="width: 98%; position: relative; left: 10px; top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x920" style="width: 98%; position: relative; left: 10px; top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x930" style="width: 98%; position: relative; left: 10px; top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<a class="prev" id="prev1" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
You could just check if your current slide is the first or last. Please look at code snippet bellow:
let arrowPrev = document.querySelector(".prev");
let arrowNext = document.querySelector(".next");
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 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;
}
slideIndex === 1
? (arrowPrev.style.display = "none")
: (arrowPrev.style.display = "block");
slideIndex === slides.length
? (arrowNext.style.display = "none")
: (arrowNext.style.display = "block");
for (let 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 = this.alt;
}
.modal {
width: 58%;
height: 100%;
top: 0;
position: fixed;
display: none;
background-color: rgba(22, 22, 22, 0.5);
margin-left: 300px;
max-width: 779px;
min-width: 779px;
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.mySlides {
display: none;
}
.close {
position: relative;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
left: 584px;
top: 90px;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
.cursor {
cursor: pointer;
}
.prev {
cursor: pointer;
position: relative;
top: -149px;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
left: -10%;
}
.next {
cursor: pointer;
position: relative;
top: -149px;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
left: 600px;
}
<body>
<tr>
<div class="row">
<div class="column">
<td>
<p align="center"><img src="https://source.unsplash.com/collection/190727/1600x900" width="250" height="164"
onclick="openModal();currentSlide(1)" class="hover-shadow cursor"></p>
</td>
</div>
<div class="column">
<td>
<p align="center"><img src="https://source.unsplash.com/collection/190727/1600x910" width="250" height="164"
onclick="openModal();currentSlide(2)" class="hover-shadow cursor"></p>
</td>
</div>
</tr>
<tr>
<div class="column">
<td>
<p align="center"><img src="https://source.unsplash.com/collection/190727/1600x920" width="250" height="164"
onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</td>
<td>
</div>
<div class="column">
<p align="center"><img src="https://source.unsplash.com/collection/190727/1600x930" width="250" height="164"
onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</td>
</div>
</tr>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x900" style="width:
98%;
position: relative;
left: 10px;
top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x910" style="width:
98%;
position: relative;
left: 10px;
top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x920" style="width:
98%;
position: relative;
left: 10px;
top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x930" style="width:
98%;
position: relative;
left: 10px;
top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<a class="prev" id="prev1" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<script src="ind.js"></script>
</body>
First, I'm showing an error that reads:
Uncaught TypeError: Cannot read property 'className' of undefined
Second, as I tap through the slideshow on mobile, I'm getting a weird flash between images. I've tried to understand what the error message means, but I don't understand it. Does this mean I need to get rid of a class somewhere?
What exactly is the className that is not defined?
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}
body {
margin: 0;
box-sizing: border-box;
padding: 60px;
overflow-x: hidden;
-webkit-transform: translateZ(0);
background: white;
}
.title {
line-height: 150%;
font-size: 17px;
font-family: 'helvetica', sans-serif;
font-weight: 700;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 22vw;
display: none;
}
/* Slideshow container */
.slideshow-container {
max-height: calc(100vh - 120px);
height: calc(100vh - 120px);
display: flex;
justify-content: flex-end;
margin: 0px;
line-height: 0%;
}
.slideshow-container img {
object-fit: cover;
}
/* Hide the images by default */
.mySlides {
display: none;
max-height: calc(100vh - 120px);
height: calc(100vh - 120px);
line-height: 0%;
-webkit-backface-visibility: hidden;
}
section img {
width: calc(100vw - 120px);
height: calc(100vh - 120px);
}
.contain img {
object-fit: contain;
object-position: 100% 50%;
line-height: 0%;
}
img {
height: 100%;
max-width: 100%;
}
/* Next & previous buttons */
.prev {
cursor: pointer;
display: none;
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;
}
/* Position the "next button" to the right */
.next {
border-radius: 3px 0 0 3px;
top: 60px;
position: absolute;
width: calc(100vw - 120px);
height: calc(100vh - 120px);
-webkit-backface-visibility: hidden;
}
.next:active {
-webkit-backface-visibility: hidden;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: transparent;
cursor: pointer;
}
/* 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: ;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: transparent;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1s;
animation-name: fade;
animation-duration: 1s;
}
#-webkit-keyframes fade {
0% {opacity: 1}
100% {opacity: 1}
}
#keyframes fade {
0% {opacity: 1}
100% {opacity: 1}
}
#media only screen and (max-width: 720px) {
* {box-sizing: border-box}
body {
padding: 0px;
}
.mySlides {
display: flex;
max-height: calc(100vh - 20px);
height: calc(100vh - 90px);
line-height: 0%;
overflow-x: hidden;
}
section img {
width: calc(100vw - 20px);
height: calc(100vh - 90px);
margin: 10px;
}
.next {
border-radius: 0;
top: 0px;
position: absolute;
width: 100vw;
background: transparent;
height: calc(100vh - 90px);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.next:hover {
background: rgba(0,0,0,0);
}
.next:active {
background: rgba(0,0,0,0);
-webkit-backface-visibility: hidden;
}
.contain img {
object-fit: contain;
background: rgba(0,0,0,0);
}
}
#media only screen and (max-height: 520px) {
body {
}
.slideshow-container {
max-height: calc(100vh - 0px);
height: calc(100vh - 120px);
margin: 0px;
line-height: 0%;
}
.mySlides {
max-height: calc(100vh - 0px);
height: calc(100vh - 0px);
line-height: 0%;
overflow-x: hidden;
}
section img {
width: calc(100vw - 20px);
height: calc(100vh - 20px);
margin: 10px;
}
.next {
border-radius: 0;
top: 0px;
position: absolute;
width: 100vw;
background: rgba(0,0,0,0);
height: calc(100vh - 0px);
}
.next:hover {
background: rgba(0,0,0,0);
}
.next:active {
}
}
<!-- Slideshow container -->
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext"></div>
<section class="contain">
<img src="https://assets.codepen.io/226140/Screen+Shot+2020-08-09+at+2.00.17+AM.png" >
</section>
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<section class="contain">
<img src="https://assets.codepen.io/226140/Screen+Shot+2020-08-09+at+2.09.46+AM.png" >
</section>
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<section class="contain">
<img src="https://assets.codepen.io/226140/Screen+Shot+2020-08-09+at+2.14.05+AM.png" alt>
</section>
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<section class="contain">
<img src="https://assets.codepen.io/226140/Screen+Shot+2020-08-09+at+2.15.57+AM.png">
</section>
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<section class="contain">
<img src="https://assets.codepen.io/226140/Screen+Shot+2020-08-09+at+2.11.45+AM.png" >
</section>
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<section class="contain">
<img src="https://assets.codepen.io/226140/Screen+Shot+2020-08-09+at+2.12.32+AM.png" >
</section>
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<section class="contain">
<img src="https://assets.codepen.io/226140/Screen+Shot+2020-08-09+at+2.14.05+AM.png" >
</section>
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<section class="contain">
<img src="https://assets.codepen.io/226140/Screen+Shot+2020-08-09+at+2.13.40+AM.png" >
</section>
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<section class="contain">
<img src="https://assets.codepen.io/226140/Screen+Shot+2020-08-09+at+2.45.03+AM.png" >
</section>
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<section class="contain">
<img src="https://assets.codepen.io/226140/Screen+Shot+2020-08-09+at+2.12.54+AM.png" >
</section>
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<section class="contain">
<img src="https://assets.codepen.io/226140/Screen+Shot+2020-08-09+at+2.42.28+AM.png" >
</section>
<div class="text"></div>
</div>
<!-- Next and previous buttons -->
<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>
The dots/circles -->
I think the 'classname' you haven't defined is in dots[i].className = dots[i].className.replace("active", "");
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 want to add a slideshow from W3School to my site, the problem is I need more than 1 slideshow and the JavaScript code from W3School works for a single slideshow only.
Searching for an answer here on StackOverflow I've found an user who had the same problem as me and we did the same things as well to try to adapt the script to our needs...without sucess obviously.
A user answered posting an edited script that should works for more than a slideshow and I'm trying to use that script for my slideshows but for some reason it works for only 1 slideshow.
Here is the answer I am referring to: https://stackoverflow.com/a/46727534/9276807
And here are my slideshows:
var slideIndex = new Array(2);
slideIndex[0] = 1;
slideIndex[1] = 1;
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, slideshownumber) {
slideIndex[slideshownumber] = slideIndex[slideshownumber] + n;
showSlides(slideIndex[slideshownumber], slideshownumber);
}
function currentSlide(n, slideshownumber) {
slideIndex[slideshownumber] = n;
showSlides(slideIndex[slideshownumber], slideshownumber);
}
function showSlides(n, slideshownumber) {
var i;
var slideshowname = "slider" + slideshownumber;
var slides = document.getElementsByName(slideshowname);
if (n > slides.length) {
slideIndex[slideshownumber] = 1;
}
if (n < 1) {
slideIndex[slideshownumber] = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex[slideshownumber] - 1].style.display = "block";
}
.tooltip {
position: relative;
display: inline-block;
padding: 0;
margin: 0;
cursor: pointer;
color: #000000;
}
.tooltip:hover .info,
.tooltip:focus .info {
visibility: visible;
opacity: 1;
transform: translate3d(0, 0, 0);
}
.info {
box-sizing: border-box;
position: absolute;
bottom: -980px;
left: 95px;
display: block;
background: #FFFFFF;
border: 1px solid #000000;
width: 500px;
font-size: 25px;
line-height: 24px;
text-align: justify;
cursor: text;
visibility: hidden;
opacity: 0;
transform: translate3d(0, -20px, 0);
transition: all .5s ease-out;
}
.info:before {
position: absolute;
content: '';
width: 100%;
height: 14px;
bottom: -14px;
left: 0;
}
.info:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
transform: rotate(45deg);
bottom: 378px;
right: 494px;
margin-left: -5px;
background: #000000;
}
.slideshow-container {
width: 100%;
height: 300px;
position: relative;
margin: 0;
padding: 0;
}
.mySlides {
display: none;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
.slideshow-container .imgsl {
position: relative;
width: 100%;
height: 300px;
}
.slideshow-container .cptn {
background-color: rgba(242, 242, 242, 0.5);
color: #FFFFFF;
font-size: 25px;
padding: 8px 0 15px 0;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 140px;
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;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(242, 242, 242, 0.3);
}
.text {
display: block;
padding: 14px 17px 35px 17px;
color: #8d7200;
}
.more {
display: inline;
position: relative;
bottom: 20px;
left: 215px;
margin: 0;
padding: 3px 10px;
font-family: 'Times New Roman', sans-serif;
text-decoration: none;
color: green;
font-size: 20px;
font-weight: bold;
border: 2px solid green;
border-radius: 5px;
transition: background-color 0.5s, color 0.5s;
}
.more:hover,
.more:focus {
background-color: green;
color: #FFFFFF;
}
<div onclick="void(0);" class="tooltip">Trasimeno
<div class="info">
<div class="slideshow-container">
<div class="mySlides fade" name="slider0">
<img class="imgsl" src="trasimeno.jpg">
<div class="cptn">Passignano Sul Trasimeno</div>
</div>
<div class="mySlides fade" name="slider0">
<img class="imgsl" src="trasimeno2.jpg">
<div class="cptn">Castello del Leone, Castiglione del Lago</div>
</div>
<div class="mySlides fade" name="slider0">
<img class="imgsl" src="trasimeno3.jpg">
<div class="cptn">Castello Borgia, Passignano sul Trasimeno</div>
</div>
<div class="mySlides fade" name="slider0">
<img class="imgsl" src="trasimeno4.jpg">
<div class="cptn">Castello Borgia, Passignano sul Trasimeno</div>
</div>
<a class="prev" onclick="plusSlides(-1,0)">❮</a>
<a class="next" onclick="plusSlides(1,0)">❯</a>
</div>
<script>
currentSlide(1, 0)
</script>
<div class="text">...</div>
<a class="more" href="#" target="_blank">More</a>
</div>
</div>
, il lago di
<div onclick="void(0);" class="tooltip">Piediluco
<div class="info">
<div class="slideshow-container">
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco2.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco3.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco4.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<a class="prev" onclick="plusSlides2(-1,1)">❮</a>
<a class="next" onclick="plusSlides2(1,1)">❯</a>
</div>
<script>
currentSlide(1, 1)
</script>
<div class="text">...</div>
<a class="more" href="#">More</a>
</div>
</div>
Can someone help me to understand where I'm doing wrong?
Thanks in advance!
You are getting the Error:
"Uncaught ReferenceError: currentSlide is not
So, currentSlide() is trying to invoke before it is defined!
Make sure your JS codes (defining function currentSlide(n, slideshownumber){}... ) are executing first before it is invoked.
Also, Invoke plusSlides() not plusSlides2() for Piediluco slide:
<div onclick="void(0);" class="tooltip">Piediluco
<div class="info">
<div class="slideshow-container">
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco2.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco3.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco4.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<a class="prev" onclick="plusSlides(-1,1)">❮</a>
<a class="next" onclick="plusSlides(1,1)">❯</a>
</div>
<script> currentSlide(1,1)</script>
<div class="text">...</div>
<a class="more" href="#">More</a>
</div>
</div>
also change:
<script> $(document).ready(function(){ currentSlide(1,1) })</script>