We Keep Coding

Jquery Slider arrows not appearing

I'm doing a Jquery Slider and I have a problem with my last image.
The arrows are appearing for all the images but not the last one it disappear and I don't understand why, can anybody help me ?
Here's my codepen : https://codepen.io/Softee/pen/WNZpXGa
here's my code :
var slideIndex = 1;
showImage(slideIndex);
function plusIndex(n) {
showImage(slideIndex += n);
}
function currentSlide(n) {
showImage(slideIndex = n);
}
function showImage(n) {
var slide = document.getElementsByClassName("slides");
var dots = document.getElementsByClassName("dots");
if (n > slide.length) {
slideIndex = 1
};
if (n < 1) {
slideIndex = slide.length
};
for (var i = 0; i < slide.length; i++) {
slide[i].style.display = "none";
};
slide[slideIndex - 1].style.display = "block";
for (var i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace("active", "");
};
}
autoSlide();
function autoSlide(){
var i;
var x = document.getElementsByClassName("slides");
for(i=0;i<x.length;i++);
{
x[i].style.display = "none";
}
if(index > x.length){ index = 1}
x[index-1].style.display = "block";
index++;
setTimeout(autoSlide,2000);
}
body {
margin: 0;
font-family: verdana, sans-serif;
}
.slideshow-container {
width: 800px;
position: relative;
margin: auto;
}
.slides {
display: none;
}
.slideshow-container img {
width: 800px;
}
.number {
position: absolute;
padding: 8px 12px;
color: #f2f2f2;
}
.text {
text-align: center;
font-size: 18px;
position: absolute;
width: 100%;
padding: 8px 16px;
bottom: 55px;
color: #f2f2f2;
font-weight: bold;
}
.prev,
.next {
position: absolute;
margin-top: -250px;
color: #f2f2f2;
font-weight: bold;
padding: 10px 10px;
font-size: 18px;
border-radius: 0 3px 3px 0;
cursor: pointer;
}
.next {
border-radius: 3px 0 0 3px;
right: 0;
}
.prev:hover,
.next:hover {
background: rgba(0, 0, 0, 0.8);
}
.dots {
width: 10px;
height: 10px;
display: inline-block;
background: grey;
padding: 5px;
border-radius: 50%;
cursor: pointer;
}
.fade {
animation-name: fade;
animation-duration: 0.5s;
}
#keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
.active,
.dots:hover {
background: #333;
}
<!--Container Slide Show-->
<div class="slideshow-container">
<div class="slides fade">
<div class="number">1 / 4</div>
<div><img src="https://www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V.jpg"></div>
<div class="text">Le Taj Mahal</div>
</div>
<div class="slideshow-container">
<div class="slides">
<div class="number">2 / 4</div>
<div><img src="https://www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V.jpg"></div>
<div class="text">Le Chichen Itza</div>
</div>
<div class="slideshow-container">
<div class="slides">
<div class="number">3 / 4</div>
<div><img src="https://www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V.jpg"></div>
<div class="text">Le Colisée</div>
</div>
<div class="slideshow-container">
<div class="slides">
<div class="number">4 / 4</div>
<div><img src="https://www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V.jpg"></div>
<div class="text">Le Machu Picchu</div>
</div>
<a class="prev" onclick="plusIndex(-1)">&#10094</a>
<a class="next" onclick="plusIndex(+1)">&#10095</a>
</div>
<br/>
<div style="text-align:center">
<span class="dots" onclick="currentSlide(1)"></span>
<span class="dots" onclick="currentSlide(2)"></span>
<span class="dots" onclick="currentSlide(3)"></span>
<span class="dots" onclick="currentSlide(4)"></span>
</div>
....................................

This issue can be fixed by editing your CSS. So rather than:
.prev, .next {
position: absolute;
top: -250px;
do:
.prev,.next {
position: absolute;
margin-top: -250px;
This prevents the arrows from moving above the .slides divs when you reach the last slide.
For the autoslide functionality, there's no need for all the complicated code. Just trigger a call to the click event on the .next div. Also, use setInterval() and not setTimeout. So replace the entire definition and call to the autoslide() function with the following code:
setInterval(() => {
document.querySelector(".next").click()
}, 2000);
Check out the updated pen on https://codepen.io/cedric-ipkiss/pen/BamzBmz

How to change image when user press keybaord arrow keys using javascript

So I have this gallery. I need to change the image when the user will press the arrow keys after the modal popup. left arrow key to change the image in the left and the right arrow key for right. I'm pretty new to javascript so if you can help me it would be great. Please see the 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");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
.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;
}
.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;
}
<div class="main-container">
<div class="row">
<div class="column">
<p align="center"><img src="https://source.unsplash.com/collection/190727/300x200" width="250" height="164"
onclick="openModal();currentSlide(1)" class="hover-shadow cursor"></p>
</div>
<div class="column">
<p align="center"><img src="https://source.unsplash.com/collection/190727/300x210" width="250" height="164"
onclick="openModal();currentSlide(2)" class="hover-shadow cursor"></p>
</div>
<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/300x200" style="width: 98%;
position: relative;
left: 10px;
top: 109px;">
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/300x210" style="width: 98%;
position: relative;
left: 10px;
top: 109px;">
</div>
<a class="prev" id="prev1" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>

To detect arrow key press you can add keydown eventlistener and check for keycode.
Key code for left arrow key is 37 and for right arrow key is 39.
document.addEventListener('keydown', function(e) {
if (e.keyCode === 37) {
// Left arrow key is pressed
} else if (e.keyCode === 39) {
// Right arrow key is pressed
}
});

Tanvi Naik is right, with his solution you can easily create a working gallery:
document.addEventListener('keydown', function(e) {
if (e.keyCode === 37) {
// Left arrow key is pressed
plusSlides(-1)
} else if (e.keyCode === 39) {
// Right arrow key is pressed
plusSlides(1)
}
});
Full snippet
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");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
/* ADDED THIS: */
document.addEventListener('keydown', function(e) {
if (e.keyCode === 37) {
// Left arrow key is pressed
plusSlides(-1)
} else if (e.keyCode === 39) {
// Right arrow key is pressed
plusSlides(1)
}
});
.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;
}
.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;
}
<div class="main-container">
<div class="row">
<div class="column">
<p align="center"><img src="https://source.unsplash.com/collection/190727/300x200" width="250" height="164" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"></p>
</div>
<div class="column">
<p align="center"><img src="https://source.unsplash.com/collection/190727/300x210" width="250" height="164" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"></p>
</div>
<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/300x200" style="width: 98%;
position: relative;
left: 10px;
top: 109px;">
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/300x210" style="width: 98%;
position: relative;
left: 10px;
top: 109px;">
</div>
<a class="prev" id="prev1" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>

Modal image gallery slider fullscreen

I have a gallery that contains 6-9 images, I'm trying to create something like that =>
W3schools Example
But without writing the code twice as in the example and without the column at the bottom of the gallery (without showing the other images when fullscreen - only the number of the image and the Previous/Next buttons)
The whole point is to create the Modal when the IMG is clicked, and delete it when the Modal is closed (not to toggle between display: none; and display: block;)
Anyone can help please?
Thank you :)!
<div class="category-gallery">
<div id="Gallery1" class="gallery-box">
<div class="gallery-img-container">
<div class="gallery-img-box">
<img src="card-image.png" class="gallery-img">
<span></span>
</div>
</div>
<div class="gallery-img-container">
<div class="gallery-img-box">
<img src="card-image.png" class="gallery-img">
<span></span>
</div>
</div>
<div class="gallery-img-container">
<div class="gallery-img-box">
<img src="card-image.png" class="gallery-img">
<span></span>
</div>
</div>
<div class="gallery-img-container">
<div class="gallery-img-box">
<img src="card-image.png" class="gallery-img">
<span></span>
</div>
</div>
</div>
</div>
.category-gallery {
margin: auto;
display: flex;
flex-wrap: wrap;
}
.gallery-img-container {
position: relative;
float: right;
min-height: 180px;
flex: 0 0 30.333333%;
max-width: 30.333333%;
margin: 30px 1.5% 30px 1.5%;
}
.gallery-img-box {
position: relative;
height: auto;
width: 100%;
height: 250px;
border-radius: 5px;
cursor: pointer;
}
.gallery-img-box span {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
line-height: 0px;
font-size: 20px;
margin: 0 auto;
color: #fff;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: all 0.5s;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
}
.gallery-img-box:hover > span {
opacity: 1;
}
.gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 5px;
}
#media (max-width: 1200px) {
.gallery-img-box {
height: 200px;
}
}
#media (max-width:992px) {
.gallery-img-container {
flex: 0 0 40%;
max-width: 40%;
margin: 30px 5% 50px 5%;
}
}
#media (max-width:768px){
.gallery-img-container {
flex: 0 0 70%;
max-width: 70%;
margin: 30px 15% 30px 15%;
}
}
#media (max-width:576px){
.gallery-img-container {
flex: 0 0 80%;
max-width: 80%;
margin: 30px 10% 30px 10%;
}
}

If I understand you right, you looking to change this to be about this one:
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 0;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.querySelectorAll('.column img');
var captionText = document.getElementsByClassName("numbertext")[0];
var modalImg = document.querySelector('.modal-content img');
n %= slides.length;
modalImg.src = slides[n].src;
captionText.innerHTML = n + 1 + ' / ' + slides.length;
}
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;
}
.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);
}
<h2 style="text-align:center">Lightbox</h2>
<div class="row">
<div class="column">
<img src="https://picsum.photos/id/1000/300/200" style="width:100%" onclick="openModal();currentSlide(0)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://picsum.photos/id/1001/300/200" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://picsum.photos/id/1002/300/200" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://picsum.photos/id/1003/300/200" style="width:100%" onclick="openModal();currentSlide(3)" 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="" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
--- VERSION 2 ---
According to the requirements in the comments below, here is an updated example, where the modal built dynamically:
var modal = initModal();
function initModal() {
return render({
tag: 'div',
id: 'myModal',
className: 'modal',
children: [
{
tag: 'span',
className: 'close cursor',
onclick: closeModal,
innerHTML: '×'
},
{
tag: 'div',
className: 'modal-content',
children: [
{
tag: 'div',
className: 'mySlides',
children: [
{
tag: 'div',
className: 'numbertext'
},
{
tag: 'img',
style: 'width: 100%'
}
]
},
{
tag: 'a',
className: 'prev',
onclick: function(){plusSlides(-1)},
innerHTML: '&#10094'
},
{
tag: 'a',
className: 'next',
onclick: function(){plusSlides(1)},
innerHTML: '&#10095'
}
]
}
]
});
}
function render(obj) {
var el = document.createElement(obj.tag);
if(obj.children){
for(var i=0;i<obj.children.length;i++) {
el.appendChild(render(obj.children[i]));
}
}
delete el.tag;
delete el.children;
for(var key in obj){
el[key] = obj[key];
}
return el;
}
function openModal() {
document.body.appendChild(modal);
}
function closeModal() {
modal.remove();
}
var slideIndex = 0;
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.querySelectorAll('.column img');
var captionText = modal.querySelector(".numbertext");
var modalImg = modal.querySelector('img');
n %= slides.length;
modalImg.src = slides[n].src;
captionText.innerHTML = n + 1 + ' / ' + slides.length;
}
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 {
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;
}
.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);
}
<h2 style="text-align:center">Lightbox</h2>
<div class="row">
<div class="column">
<img src="https://picsum.photos/id/1000/300/200" style="width:100%" onclick="openModal();currentSlide(0)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://picsum.photos/id/1001/300/200" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://picsum.photos/id/1002/300/200" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://picsum.photos/id/1003/300/200" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
</div>
--- VERSION 3 ---
To give an example for the new requirement down the comments, here is an example for two image categories, used one modal:
var modal = initModal();
function initModal() {
return render({
tag: 'div',
id: 'myModal',
className: 'modal',
children: [
{
tag: 'span',
className: 'close cursor',
onclick: closeModal,
innerHTML: '×'
},
{
tag: 'div',
className: 'modal-content',
children: [
{
tag: 'div',
className: 'mySlides',
children: [
{
tag: 'div',
className: 'numbertext'
},
{
tag: 'img',
style: 'width: 100%'
}
]
},
{
tag: 'a',
className: 'prev',
onclick: function(){plusSlides(-1)},
innerHTML: '&#10094'
},
{
tag: 'a',
className: 'next',
onclick: function(){plusSlides(1)},
innerHTML: '&#10095'
}
]
}
]
});
}
function render(obj) {
var el = document.createElement(obj.tag);
if(obj.children){
for(var i=0;i<obj.children.length;i++) {
el.appendChild(render(obj.children[i]));
}
}
delete el.tag;
delete el.children;
for(var key in obj){
el[key] = obj[key];
}
return el;
}
function openModal() {
document.body.appendChild(modal);
}
function closeModal() {
modal.remove();
}
var slideIndex = 0;
var category = 'cat-1';
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n, cat) {
category = cat;
openModal();
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.querySelectorAll('#'+category+' img');
var captionText = modal.querySelector(".numbertext");
var modalImg = modal.querySelector('img');
n %= slides.length;
modalImg.src = slides[n].src;
captionText.innerHTML = n + 1 + ' / ' + slides.length;
}
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 {
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;
}
.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);
}
<h2 style="text-align:center">Lightbox</h2>
<div class="row" id="cat-1">
<div class="column">
<img src="https://picsum.photos/id/1000/300/200" style="width:100%" onclick="currentSlide(0, 'cat-1')" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://picsum.photos/id/1001/300/200" style="width:100%" onclick="currentSlide(1, 'cat-1')" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://picsum.photos/id/1002/300/200" style="width:100%" onclick="currentSlide(2, 'cat-1')" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://picsum.photos/id/1003/300/200" style="width:100%" onclick="currentSlide(3, 'cat-1')" class="hover-shadow cursor">
</div>
</div>
<div class="row" id="cat-2">
<div class="column">
<img src="https://picsum.photos/id/1004/300/200" style="width:100%" onclick="currentSlide(0, 'cat-2')" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://picsum.photos/id/1005/300/200" style="width:100%" onclick="currentSlide(1, 'cat-2')" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://picsum.photos/id/1006/300/200" style="width:100%" onclick="currentSlide(2, 'cat-2')" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://picsum.photos/id/1/300/200" style="width:100%" onclick="currentSlide(3, 'cat-2')" class="hover-shadow cursor">
</div>
</div>

How to add arrows to slideshow?

Hi I need to add two arrows to my slideshow to let users move forward and backward through the elements. Fiddle: https://jsfiddle.net/piopio1/bs8ph705/#
<div>
<a href="url" target="_blank" class="white-title link">
<div class="mySlides slide-a" style="background-color:#5b1985; height: 200px; margin: auto; padding: 50px; text-align: center!important;">
<h1 class="white-title a" style="text-align: center">slide text!</h1>
</div></a>
<a href="url" target="_blank" class="white-title link">
<div class="mySlides slide-d" style="background-color:#199ED9; height: 200px; margin: auto; padding: 50px; text-align: center!important;">
<h1 class="white-title a">slide text!</h1>
</div></a>
</div>
Here's the script, I'm only a beginner with js so any help is greatly appreciated!
<script>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 6000);
}
</script>

You can try something like this https://jsfiddle.net/fbLshu72/3/
<div class="container">
<
>
<a href="https://stackoverflow.com/questions/61526539/how-to-add-arrows-to-slideshow" target="_blank" class="white-title link">
<div class="mySlides slide-auvik" style="background-color:#5b1985; height: 200px; margin: auto; padding: 50px; text-align: center!important;">
<h1 class="white-title auvik" style="text-align: center">slide!</h1>
</div>
</a>
<a href="https://stackoverflow.com/questions/61526539/how-to-add-arrows-to-slideshow" target="_blank" class="white-title link">
<div class="mySlides slide-datto" style="background-color:#199ED9; height: 200px; margin: auto; padding: 50px; text-align: center!important;">
<h1 class="white-title auvik">slide!</h1>
</div>
</a>
</div>
Css:
.container{
position: relative
}
.white-title {
margin-top: 30px;
margin-bottom: 30px;
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
font-family: Lato, sans-serif;
color: #fff;
font-size: 40px;
font-weight: 300;
text-align: center;
}
.white-title.fact {
margin-bottom: 50px;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
font-family: Raleway, sans-serif;
color: #fff;
font-size: 80px;
font-weight: 100;
}
.white-title.auvik {
font-style: italic;
font-weight: 900;
}
.white-title.link {
color: #ffffff;
font-style: italic;
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
}
.white-title.link:hover {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
}
.mySlides {
display: none;
padding: 100px;
text-align: center;
height: 250px;
}
.slide-datto,
.slide-datto-hover:hover {
color: #fff !important;
background-color: #199ED9 !important
}
.slide-auvik,
.slide-auvik-hover:hover {
color: #fff !important;
background-color: #5b1985 !important
}
.arrow{
display: block;
position: absolute;
z-index: 2;
text-decoration: none;
top: calc(100%/2);
font-size: 30px;
color: black;
}
.arrow.left{
}
.arrow.right{
right: 0;
}
JS:
var slideIndex = 0;
carousel();
function carousel(inc = 1) {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex += inc;
if (slideIndex > x.length) {
slideIndex = 1
}
x[slideIndex - 1].style.display = "block";
}

For what it is worth, the code you have does not work properly when more than two slides are added.
To fix it, you need to add the code to reverse the direction properly. I forked the previous solution, and solved that by using the javascript call
instead of
for the left indicator.
I also added logic to check if the direction is reverse and the current slide is Slide 1 (requiring the slide index to reflect the last slide).
if (slideIndex > x.length) {
slideIndex = 1
} else if (inc == -1 && slideIndex < 1) {
slideIndex = x.length;
}
In regards to your original question (how to add the arrows and where to put the code for the arrows):
As shown in the CSS of the previous answer, the position "absolute" as well as the calculator of top: calc(100%2) allows you to determine where the vertical half way point is for the carousel.
Right 0 (with .arrow.right) makes the right arrow stay at the right side of the carousel (0 meaning far right). Z-index indicates that it should be above the carousel (second layer).
.arrow{
display: block;
position: absolute;
z-index: 2;
text-decoration: none;
top: calc(100%/2);
font-size: 30px;
color: black;
}
.arrow.right{
right: 0;
}
var slideIndex = 0;
carousel(1);
function carousel(inc = 1) {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex += inc;
if (slideIndex > x.length) {
slideIndex = 1
} else if (inc == -1 && slideIndex < 1) {
slideIndex = x.length;
}
x[slideIndex - 1].style.display = "block";
}
.container{
position: relative
}
.white-title {
margin-top: 30px;
margin-bottom: 30px;
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
font-family: Lato, sans-serif;
color: #fff;
font-size: 40px;
font-weight: 300;
text-align: center;
}
.white-title.fact {
margin-bottom: 50px;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
font-family: Raleway, sans-serif;
color: #fff;
font-size: 80px;
font-weight: 100;
}
.white-title.auvik {
font-style: italic;
font-weight: 900;
}
.white-title.link {
color: #ffffff;
font-style: italic;
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
}
.white-title.link:hover {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
}
.mySlides {
display: none;
padding: 100px;
text-align: center;
height: 250px;
}
.slide-datto,
.slide-datto-hover:hover {
color: #fff !important;
background-color: blue !important
}
.slide-auvik,
.slide-auvik-hover:hover {
color: #fff !important;
background-color: yellow !important
}
.arrow{
display: block;
position: absolute;
z-index: 2;
text-decoration: none;
top: calc(100%/2);
font-size: 30px;
color: black;
}
.arrow.left{
}
.arrow.right{
right: 0;
}
<div class="container">
<a href="https://stackoverflow.com/questions/61526539/how-to-add-arrows-to-slideshow" target="_blank" class="white-title link">
<div class="mySlides slide-auvik" style="background-color:yellow; height: 200px; margin: auto; padding: 50px; text-align: center!important;">
<h1 class="white-title auvik" style="text-align: center">slide!</h1>
</div>
</a>
<a href="https://stackoverflow.com/questions/61526539/how-to-add-arrows-to-slideshow" target="_blank" class="white-title link">
<div class="mySlides slide-datto" style="background-color:blue; height: 200px; margin: auto; padding: 50px; text-align: center!important;">
<h1 class="white-title auvik">slide!</h1>
</div>
</a>
<a href="https://stackoverflow.com/questions/61526539/how-to-add-arrows-to-slideshow" target="_blank" class="white-title link">
<div class="mySlides slide-third" style="background-color:green; height: 200px; margin: auto; padding: 50px; text-align: center!important;">
<h1 class="white-title auvik">slide!</h1>
</div>
</a>
</div>

HTML/CSS/JavaScript: Can't click slideshow indicator button

I'm new to webpage design and am trying to add indicator dots on my slideshow, so when clicking on them, i can go to the next image.
see this image
image2
I initially followed the instructions on the W3School page: https://www.w3schools.com/howto/howto_js_slideshow.asp
which put the indicator dots under the tag and below the slideshow banner. However, I want to put the dots ON the slideshow banner so I changed the tag to , but then the JavaScript stopped working.
In short, what I'm looking for is like the "another example" slideshow banner on this page: https://www.w3schools.com/w3css/w3css_slideshow.asp
sadly, the code used on that page was incomplete and i can't directly copy and paste it onto my website.
Please help to see what's wrong with my code OR to save your time, simply let me know how to achieve the feature mentioned in the above paragraph. Thank you so much.
<html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides">
<img class="img" src="https://res.cloudinary.com/mkconsulting/image/upload/v1545204835/sunset1.jpg" style="width:100%">
<div id="overlay"></div>
<div class="text">abcde</div>
<div class="indicator">
<button class="dot" onclick="currentSlide(1)"></button>
<button class="dot" onclick="currentSlide(2)"></button> </div>
</div>
<div class="mySlides">
<img class="img" src="https://res.cloudinary.com/mkconsulting/image/upload/v1545204834/sunset2.jpg" style="width:100%">
<div id="overlay"></div>
<div class="text text1">abcde</div>
<div class="indicator">
<button class="dot" onclick="currentSlide(1)"></button>
<button class="dot1" onclick="currentSlide()"></button> </div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</html>
<style>
.slideshow-container {
max-width: 100%;
position: relative;
padding-top:30px;
margin: auto;
height:auto;
}
.img{
height:350px;
}
.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;
z-index: 2;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.text {
color: #f2f2f2;
font-size: 20px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
top:45%;
font-family:'cwTeXYen';
z-index: 2;
}
.text1 {
color: #f2f2f2;
font-size: 40px;
top:35%;
}
.text2 {
font-family:'Noto Sans TC';
color: black;
font-weight:300;
}
.indicator {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
top:85%;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: transparent;
border-radius: 50%;
transition: background-color 0.6s ease;
border: 1px solid #ffffff;
}
.active, .dot:hover {
background-color: #ffffff;
}
.dot1{
height: 15px;
width: 15px;
background color:white;
border-radius: 50%;
border: 1px solid #ffffff;
margin-left: 2px;
}
#overlay {
position: absolute;
height:50%;
top: 30%;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 1;
}
</style>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>

how about this:
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {
display: none
}
.w3-left, .w3-right, .w3-badge {
cursor: pointer
}
.w3-badge {
height: 13px;
width: 13px;
padding: 0
}
.w3-display-container {
position: relative;
}
.myCaptions {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0.5rem 2rem;
background-color: rgba(255, 255, 255, 0.5);
}
</style>
<body>
<div class="w3-content w3-display-container" style="max-width:800px; text-align: center">
<p class="myCaptions" style="display: none;">Mountains</p>
<p class="myCaptions" style="display: none;">Nature Wide</p>
<p class="myCaptions" style="display: none;">Snow Wide</p>
<img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains_wide.jpg" style="width:100%" alt="image1">
<img class="mySlides" src="https://www.w3schools.com/w3css/img_nature_wide.jpg" style="width:100%" alt="image2">
<img class="mySlides" src="https://www.w3schools.com/w3css/img_snow_wide.jpg" style="width:100%" alt="image3">
<div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
<div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
</div>
</div>
<script>
let slideIndex = 1
showDivs(slideIndex)
function plusDivs (n) {
showDivs(slideIndex += n)
}
function currentDiv (n) {
showDivs(slideIndex = n)
}
function showDivs (n) {
let i
const x = document.getElementsByClassName('mySlides')
const 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-white', '')
}
x[slideIndex - 1].style.display = 'block'
dots[slideIndex - 1].className += ' w3-white'
// adjust captions
const captions = document.getElementsByClassName('myCaptions')
for (i = 0; i < captions.length; i++) {
captions[i].style.display = 'none'
}
captions[slideIndex-1].style.display = 'block'
}
</script>
</body>
</html>