When I go to the second photo and I want to click on the back key, I have to click twice. If I change the value of n and make it 0. The next function breaks down and this is the problem. help me to fix ty for help me ..............................................................................................
// alert('');
let topImg = document.querySelector('.top-img img')
let downImgs = document.querySelectorAll('.imgs-down img')
let ArrayIMg = ["img/3-kid.jpeg","img/men-1.jpg","img/woamn-1.jpeg" ,"img/woman-2.jpg"]
let n = 1;
// let b = 1
downImgs.forEach(img=>{
img.addEventListener('click' , ()=>{
topImg.src = img.src
});
});
function nxt(){
topImg.setAttribute('src' , ArrayIMg[n])
n++
if(n>=ArrayIMg.length){n=0}
}
function prv(){
if(--n<0){
n = ArrayIMg.length -1
}
topImg.setAttribute('src' , ArrayIMg[n])
// console.log(n)
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
img{
width: 150px;
height: 150px;
}
.parent-all{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.top-img img{
width: 100%;
height:450px;
object-fit: cover;
}
.top-img{
position: relative;
}
.next,
.prv{
color:white;
cursor:pointer;
top:35%;
font-size: 30px;
padding:5px;
margin:5px;
background: black;
position: absolute;
z-index: 99;
}
.next{
right:0;
}
.prv{
left:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exam slider with if </title>
<link rel="stylesheet" href="exam.css">
</head>
<body>
<section class="parent-all">
<figure class="top-img">
<img src="img/3-kid.jpeg" alt="">
</figure>
<figure class="imgs-down">
<img src="img/3-kid.jpeg" alt="">
<img src="img/men-1.jpg" alt="">
<img src="img/woamn-1.jpeg" alt="">
<img src="img/woman-2.jpg" alt="">
</figure>
<span class="next" onclick="nxt()">❯</span>
<span class="prv" onclick="prv()">❮</span>
</section>
<script src="exam.js"></script>
</body>
</html>
Sorry to say, but you have overdone the javascript part for no reason.
Start from n=0, and stick to the basics.
let n = 0;
function nxt(){
n = n+1 === ArrayIMg.length ? 0 : n+1;
topImg.setAttribute('src' , ArrayIMg[n]);
}
function prv(){
n = n === 0 ? ArrayIMg.length-1 : n - 1;
topImg.setAttribute('src' , ArrayIMg[n])
}
demo: https://jsfiddle.net/mey3puzL/
Related
This question already has answers here:
Script Tag - async & defer
(12 answers)
Closed 8 days ago.
I am creating a full-stack application and for my hero page, I am working on adding a carousel that rotates images in the background.
So far I have created the HTML, CSS, and JavaScript files.
When the page loads, it rotates but then the carousel stops working and just stays on the first line.
I am not too sure if there is an error in my code but I would appreciate it if someone helped me out.
var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
function changeSlide() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].style.opacity = 1;
}
setInterval(changeSlide, 3000);
*{
margin: 0%;
padding: 0%;
}
/*------------------------------Hero Page---------------------------------*/
.carousel {
width: 100%;
height: 700px;
position: relative;
overflow: hidden;
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide:first-child {
opacity: 1;
}
.slide-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
}
.slide-1 {
background-image: url(Images/derek-baumgartner-A7sfB4yKS7s-unsplash.jpg);
}
.slide-2 {
background-image: url(Images/andrew-bain-jO_Q3EY_T0E-unsplash.jpg);
}
.slide-3 {
background-image: url(Images/aaron-dowd-N7PDwky8doM-unsplash.jpg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="practice.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="practice.css">
<title>Welcome to Washington State - Home Page</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<!------------Hero Page-------------->
<header>
<div class="carousel">
<div class="slide slide-1">
<div class="slide-content">Slide 1</div>
</div>
<div class="slide slide-2">
<div class="slide-content">Slide 2</div>
</div>
<div class="slide slide-3">
<div class="slide-content">Slide 3</div>
</div>
</div>
</header>
</body>
The problem is that you are loading your script before the page has been created and the script is running as soon as it is loaded.
You can add defer to the script, like so:
<script src="practice.js" defer></script>
Or you can move the script to the end of the HTML.
Script Tag - async & defer would be a good source of information to read for this problem.
To make it easier to see your problem, I removed your images and simply set a background-color, height, and width in the CSS to see the slides and I reduced the delay in setInterval to 1500.
var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
function changeSlide() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].style.opacity = 1;
}
setInterval(changeSlide, 1500);
* {
margin: 0%;
padding: 0%;
}
/*------------------------------Hero Page---------------------------------*/
.carousel {
width: 100%;
height: 700px;
position: relative;
overflow: hidden;
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide:first-child {
opacity: 1;
}
.slide-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
}
.slide-1 {
background-color: red;
height: 150px;
width: 200px;
}
.slide-2 {
background-color: green;
height: 150px;
width: 200px;
}
.slide-3 {
background-color: blue;
height: 150px;
width: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="practice.js" defer></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="practice.css">
<title>Welcome to Washington State - Home Page</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<!------------Hero Page-------------->
<header>
<div class="carousel">
<div class="slide slide-1">
<div class="slide-content">Slide 1</div>
</div>
<div class="slide slide-2">
<div class="slide-content">Slide 2</div>
</div>
<div class="slide slide-3">
<div class="slide-content">Slide 3</div>
</div>
</div>
</header>
</body>
I am trying change the left value for my img-list when clicking on the pointer I have made. After changing the left value, I can switch to another img.
I have state the absolute position for my img-list. And, when I click on the pointer, the left value has changed, the image has indeed changed to another image, but only for a sec. After a sec, it just changed back to the original image, and when I alert to see the current value of img_list.style.left, it is showing the correct value. But the left value still remains the same 0 value. I am not sure what's wrong in here, can someone give me some hints plz.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../reset.css">
<style>
.wrapper{
width: 370px;
height: 350px;
background-color: #bfa;
margin: 50px auto;
padding:10px 0;
overflow: hidden;
position: relative;
}
.img-list{
position: absolute;
left: 0;
}
.img-list li{
float:left;
margin:0 10px;
}
img{
width:350px;
height: 350px;
}
.pointer{
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.pointer a{
float: left;
width: 15px;
height: 15px;
background-color: red;
opacity: 0.5;
}
.pointer a:hover{
background-color: grey;
}
.pointer a:not(:first-child){
margin-left: 10px;
}
</style>
<script type="text/javascript">
window.onload = function () {
var img_list = document.getElementById("imglist");
var img = img_list.getElementsByTagName("img");
img_list.style.width = 370 * img.length + "px";
console.log(img_list.style.width);
var pointer = document.getElementsByClassName("pointer")[0];
var allA = pointer.getElementsByTagName("a");
for (var i = 0; i < allA.length; i++) {
allA[i].index = i;
allA[i].onclick = function () {
var value = this.index * (-370) + "px";
img_list.style.left = value;
alert(img_list.style.left);
};
}
}
</script>
</head>
<body>
<div class="wrapper">
<ul class="img-list" id = "imglist">
<li><img src="./pics/01/d56283cb25574af8.jpg!cc_320x320.webp" alt=""></li>
<li><img src="./pics/03/eb1b74d5j00rmlivy000jc000go00b4c.jpeg" alt=""></li>
<li><img src="./pics/01/fef85dc4d0992e62.jpg!cc_320x320.webp" alt=""></li>
<li><img src="./pics/01/3bc798a7387a216d.jpg!cc_320x320.webp" alt=""></li>
</ul>
<div class="pointer">
</div>
</div>
</body>
</html>
it seems that the a elements with empty href attribute refreshes the page each time it is clicked, just remove them:
<div class="pointer">
<a></a>
<a></a>
<a></a>
<a></a>
</div>
I'm trying to make a simple gallery with a modal viewer. Almost there but 2 simple problems confuse my little brain and can't figure them out.
problem 1- why does it work for the first image only?
problem 2- how to un append the image from the viewer so it will show again where it was? I know it will work if I create the image as a new item and then append it, but I can't figure this out.
let img = document.querySelector("img");
let viewer = document.getElementById("viewer");
img.addEventListener("click" , viewImg);
function viewImg() {
if (viewer.style.visibility = "hidden") {
viewer.appendChild(img);
img.style.width = "60%";
viewer.style.visibility = "visible";
}
}
function closeViewer() {
if (viewer.style.visibility = "visible") {
viewer.style.visibility = "hidden";
viewer.removeChild(img);
}
}
.container {
line-height: 0;
column-count: 3;
column-gap: 0;
column-fill: balance;
}
.container img {
width: 100%;
}
.container img:hover {
scale: 1.1;
transition: 0.5s;
left: 120%;
cursor: pointer;
}
.viewer {
visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: rgb(255, 0, 0, 0.5);
/* transition: 1s; */
}
.closeViewer {
color: #000;
background: rgb(255, 255, 255, 0.5);
position: absolute;
top: 100px;
right: 100px;
font-family: Arial, Helvetica, sans-serif;
font-size: 3rem;
padding: 0 10px;
cursor: pointer;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>simple gallery</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container" id="container">
<!-- onclick="viewImg()" -->
<img class="img"src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg">
<img class="img"src="https://images.freeimages.com/images/large-previews/9e6/abstract-polygonal-low-poly-photos-texture-3-636190.jpg">
<img class="img"src="https://images.freeimages.com/images/large-previews/aa8/evening-01-1055813.jpg">
<img class="img"src="https://live.staticflickr.com/3437/3403778548_15f48ab99e_b.jpg">
<img class="img"src="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_960_720.jpg">
<img class="img"src="https://cdn.pixabay.com/photo/2018/08/01/19/35/wolf-3577956_960_720.jpg">
<img class="img"src="https://live.staticflickr.com/3437/3403778548_15f48ab99e_b.jpg">
<img class="img"src="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_960_720.jpg">
<img class="img"src="https://cdn.pixabay.com/photo/2018/08/01/19/35/wolf-3577956_960_720.jpg">
<img class="img"src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg">
<img class="img"src="https://images.freeimages.com/images/large-previews/9e6/abstract-polygonal-low-poly-photos-texture-3-636190.jpg">
<img class="img"src="https://images.freeimages.com/images/large-previews/aa8/evening-01-1055813.jpg">
</div>
<div class="viewer" id="viewer">
<button class="closeViewer" id="closeViewer" onclick="closeViewer()">X</button>
</div>
<script src="./test.js"></script>
</body>
</html>
The reason why only the first <img> worked and none of the other ones did is because .querySelector() selects the first <img class='img'> it finds and then stops. Then when the modal is closed the appended image is permanently removed from the whole page so nothing works after that.
You need to bind the event handler to an parent tag of all of those <img> and then single out the <img> you clicked by using e.target. In the example <dialog> element is used instead of a plain <div>.
Details are commented in example
// Reference <dialog>, <figure>, <section>, and <button>
const viewer = document.querySelector(".viewer");
const frame = document.querySelector('.frame');
const gallery = document.querySelector('.gallery');
const close = document.querySelector('.close');
// Bind the click event to the parent tag of all of the <img>
gallery.addEventListener("click", viewImg);
// Bind the click event to the <button>
close.onclick = closeViewer;
// Event handler passes Event Object by default
function viewImg(e) {
// Reference the tag user clicked
const clk = e.target;
/*
If the user clicked an <img class='img'>...
...open <dialog>...
...make a clone of the clicked <img>
...then add the clone to <figure>
*/
if (clk.matches('.img')) {
viewer.showModal();
let copy = clk.cloneNode(true);
frame.append(copy);
}
}
// Close <dialog> and remove the clone from <figure>
function closeViewer(e) {
viewer.close();
frame.replaceChildren();
}
.gallery {
line-height: 0;
column-count: 3;
column-gap: 0;
column-fill: balance;
}
img {
width: 100%;
cursor: pointer;
}
.viewer {
position: relative;
width: 75%;
overflow: hidden;
}
.close {
color: #000;
background: rgb(255, 255, 255, 0.5);
position: absolute;
top: 4px;
right: 4px;
font-size: 3rem;
padding: 0 10px;
cursor: pointer;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>simple gallery</title>
</head>
<body>
<section class="gallery">
<img class="img" src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg">
<img class="img" src="https://images.freeimages.com/images/large-previews/9e6/abstract-polygonal-low-poly-photos-texture-3-636190.jpg">
<img class="img" src="https://images.freeimages.com/images/large-previews/aa8/evening-01-1055813.jpg">
<img class="img" src="https://live.staticflickr.com/3437/3403778548_15f48ab99e_b.jpg">
<img class="img" src="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_960_720.jpg">
<img class="img" src="https://cdn.pixabay.com/photo/2018/08/01/19/35/wolf-3577956_960_720.jpg">
<img class="img" src="https://live.staticflickr.com/3437/3403778548_15f48ab99e_b.jpg">
<img class="img" src="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_960_720.jpg">
<img class="img" src="https://cdn.pixabay.com/photo/2018/08/01/19/35/wolf-3577956_960_720.jpg">
<img class="img" src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg">
<img class="img" src="https://images.freeimages.com/images/large-previews/9e6/abstract-polygonal-low-poly-photos-texture-3-636190.jpg">
<img class="img" src="https://images.freeimages.com/images/large-previews/aa8/evening-01-1055813.jpg">
</section>
<dialog class="viewer">
<button class="close">X</button>
<figure class='frame'></figure>
</dialog>
</body>
</html>
I am trying to make a simple slide show by changing the pics in a DOM element.
Here is the HTML and the JavaScript..
The pics do NOT show up
What am I missing ?
here is the HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slide Show</title>
<link rel="stylesheet" href="css/form.css">
</head>
<body>
<img id="pictures" style = "width:50%">
<div>
<button type="button" id="reverse">Reverse</button>
<button type="button" id="forward">Forward</button>
</div>
<script src="js/slideshow.js"></script>
</body>
</html>
Here is the JavaScript Part
function slideshow(){
'use strict';
let i = 0;
// array to hold the pictures
let pics = [];
pics [0] = cave.jpg;
pics [1] = creek.jpg;
pics [2] = entrance.jpg;
pics [3] = tree.jpg;
// making the pictures the dom element
document.getElementById('pictures').value = pics[i];
// make the buttons rotate through the pics
document.getElementById('forward').onclick = i++;
document.getElementById('reverse').onclick = i--;
}
window.onload = init;
Any pointers would be most appriciated.
Few things are missing in your solution, so feel free to run and inspect the code below. Also, put images in HTML at the beginning. JS code running is making sure they are changing the order. Only the middle one is passing through the window (#pictures-container) - this code works only for the odd number of images.
Here's the code that will work:
HTML (index.html)
<html>
<head>
<meta charset="utf-8">
<title>Slide Show</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="pictures-container">
<div id="pictures">
<img class="picture" alt="pic 1" data-id="1">
<img class="picture" alt="pic 2" data-id="2">
<img class="picture" alt="pic 3" data-id="3">
</div>
</div>
<div id="slideshow-actions">
<button type="button" id="reverse">Reverse</button>
<button type="button" id="forward">Forward</button>
</div>
<script src="js/slideshow.js"></script>
</body>
</html>
CSS (css/style.css)
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px;
}
#pictures-container {
width: 110px;
height: 90px;
border: 1px solid red;
border-radius: 15px;
position: relative;
overflow: hidden;
}
#pictures {
display: flex;
gap: 5px;
z-index: -1;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.picture {
width: 100px;
height: 80px;
display: block;
padding: 5px;
background-color: #dedede;
}
.picture[data-id="1"] {
background-color: yellow;
}
.picture[data-id="2"] {
background-color: magenta;
}
#slideshow-actions {
margin-top: 15px;
}
JS (js/script.js)
function registerEvents() {
let btnReverse = document.getElementById('reverse');
let btnForward = document.getElementById('forward');
btnReverse.onclick = () => {
let pictures = document.querySelectorAll('.picture');
let firstPic = pictures[0];
let parent = firstPic.parentElement;
parent.removeChild(firstPic);
parent.append(firstPic);
}
btnForward.onclick = () => {
let pictures = document.querySelectorAll('.picture');
let lastPic = pictures[pictures.length - 1];
let parent = lastPic.parentElement;
parent.removeChild(lastPic);
parent.prepend(lastPic);
}
}
registerEvents();
I'm trying to add an iframe on a webpage that will open in a fancy box when an image is clicked. It was working on another test page but when I tried to combine it with another page I couldn't get it to work.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Test</title>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script> !window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');</script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#various3").fancybox({
'width' : '95%',
'height' : '95%',
'autoScale' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe'
});
});
</script>
<style>
.ImageMain {display:none}
.demo {cursor:pointer}
</style>
</head>
<body>
<div id="content">
<div id=MainPicture class="w3-content">
<table class="center">
<a id="various3" class="fancybox.iframe" href="https://placeholder.com/Interactive-Thing">
<img class="ImageMain" alt="" src="https://placeholder.com/thing.jpg"
</table>
</div>
</div>
<style media="screen" type="text/css">
.w3-content {
border-style: dotted;
width: 90%;
max-width: 900px;
height: 50.625vw;
max-height: 506.25px;
display: flex;
flex-direction: column;
justify-content: center;
margin: auto;}
.ImageMain {
max-width: inherit;
height: auto;
margin: auto;}
</style>
<div class="w3-row-padding w3-section">
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="https://placeholder.com/thing.jpg"
style="Max-width:75px" onclick="currentDiv(1)">
</div>
</div>
<style media="screen" type="text/css">
.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{
float: ;width:100%}
.w3-row-padding.w3-section {
margin: auto;
display: flex;
justify-content: center}
.w3-col.s4{
width: 30%;
max-width: 300px;
height: 27vw;
max-height: 81px;
display: flex;
flex-direction: column;
justify-content: center;
border-style: dotted;}
.demo.w3-opacity.w3-hover-opacity-off {
max-width: inherit;
height: auto;
margin: auto;}
::-webkit-input-placeholder{color:inherit;opacity:0.54}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not allowed;opacity:0.3}
.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
.w3-badge,.w3-tag{
background-color:#000;
color:#fff;
display:inline-block;
padding-left:8px;
padding-right:8px;
text-align:center}
.w3-badge{border-radius:50%}
.w3-ul{list-style-type:none;padding:0;margin:0}
.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}
.w3-ul li:last-child{border-bottom:none}
.w3-tooltip,.w3-display-container{position:relative}
.w3-tooltip .w3-text{display:none}
.w3-tooltip:hover .w3-text{display:inline-block}
.w3-ripple:active{opacity:0.5}
.w3-ripple{transition:opacity 0s}
.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
.w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
.w3-animate-fading{animation:fading 10s infinite}
#keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.w3-animate-opacity{animation:opac 0.8s}
#keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-top{position:relative;animation:animatetop 0.4s}
#keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-left{position:relative;animation:animateleft 0.4s}
#keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.4s}
#keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}
#keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {animation:animatezoom 0.6s}
#keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-input{transition:width 0.4s ease-in-out}
.w3-animate-input:focus{width:100%!important}
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}
.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
.w3-opacity-max{opacity:0.25}
.w3-opacity-min{opacity:0.75}
.w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)}
.w3-greyscale,.w3-grayscale{filter:grayscale(75%)}
.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)}
</style>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);}
function currentDiv(n) {
showDivs(slideIndex = n);}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("ImageMain");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";}
for (i = 0; i < dots.length; i++) {dots[i].className = dots[i].className.replace(" w3-opacity-off", "");}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-opacity-off";}
</script>
</body>
</html>
I'm fairly new to coding in general so forgive me if I have made some noob error, also since I don't even really know the basics of coding an in depth explanation would be greatly appreciated