Develop Reference

my right image changes slides but the left one is stuck on the first slide

I have created two changing image galleries side by side but my right image changes slides but the left one is stuck on the first slide. does anyone know why? I have found the code on W3.CSS but I changed the class "changing-photo-right" and "changing-photo-left" to one of my own class (which can be found in my css stylesheet) and did not link the style sheet of W3.css.
.section2 {
background: #F5DAD3;
display: flex;
height: 750px;
position: relative;
}
.changing-photo-left {
float: left;
margin-left: 125px;
margin-top: -390px;
position: relative;
display: block;
}
.changing-photo-right {
float: right;
margin-right: 125px;
margin-top: -390px;
position: relative;
display: block;
}
.section3 {
height: 440px;
width: 2px;
top: 160px;
left: 50%;
position: absolute;
border: 0px solid black;
background-color: black;
border-radius: 20px;
}
<div class="hmm">
<div class="section2"></div>
<div class="section3" ></div>
<div>
<p class="text-12">The interieur</p>
<p class="text-11">Discover the lovely interieur that was built since 1948.</p>
<a class="button-intro-below-left" href="">Click here for more</a>
<div class="changing-photo-left" style="max-width:500px">
<img class="mySlides" src="009.jpg" style="width:100%">
<img class="mySlides" src="062.jpg" style="width:100%">
<img class="mySlides" src="027.jpg" style="width:100%">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2500); // Change image every 3 seconds
}
</script>
</div>
<div>
<p class="text-13">The exterior</p>
<p class="text-14">Discover the lovely exterior that was built since 1948.</p>
<a class="button-intro-below-right" href="">Click here for more</a>
<div class="changing-photo-right" style="max-width:500px">
<img class="mySlides1" src="009.jpg" style="width:100%">
<img class="mySlides1" src="012.jpg" style="width:100%">
<img class="mySlides1" src="013.jpg" style="width:100%">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides1");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2500); // Change image every 3 seconds
}
</script>
</div>

You're using the same names for the variables and functions in both of the loops. If you change the names of the variables and functions in the second loop, everything should work just fine.
.section2 {
background: #F5DAD3;
display: flex;
height: 750px;
position: relative;
}
.changing-photo-left {
float: left;
margin-left: 125px;
margin-top: -390px;
position: relative;
display: block;
}
.changing-photo-right {
float: right;
margin-right: 125px;
margin-top: -390px;
position: relative;
display: block;
}
.section3 {
height: 440px;
width: 2px;
top: 160px;
left: 50%;
position: absolute;
border: 0px solid black;
background-color: black;
border-radius: 20px;
}
<div class="hmm">
<div class="section2"></div>
<div class="section3" ></div>
<div>
<p class="text-12">The interieur</p>
<p class="text-11">Discover the lovely interieur that was built since 1948.</p>
<a class="button-intro-below-left" href="">Click here for more</a>
<div class="changing-photo-left" style="max-width:500px">
<img class="mySlides" src="https://images.unsplash.com/photo-1672426142068-c2103a852426?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&w=1000&q=80" style="width:100%">
<img class="mySlides" src="https://media.istockphoto.com/id/1409254639/photo/autumn-drive.jpg?b=1&s=170667a&w=0&k=20&c=phQOICvfLifPWESZu3AioY7sKM9s_HQnCozMKF6g120=" style="width:100%">
<img class="mySlides" src="https://media.istockphoto.com/id/1427249962/photo/tropical-leaves-abstract-green-leaf-texture-in-garden-nature-background.jpg?b=1&s=170667a&w=0&k=20&c=40KcV7mbAQWihuO0At8GSOTIKp-TvIoHGIhurHBeUq0=" style="width:100%">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2500); // Change image every 3 seconds
}
</script>
</div>
<div>
<p class="text-13">The exterior</p>
<p class="text-14">Discover the lovely exterior that was built since 1948.</p>
<a class="button-intro-below-right" href="">Click here for more</a>
<div class="changing-photo-right" style="max-width:500px">
<img class="mySlides1" src="https://images.unsplash.com/photo-1672426142068-c2103a852426?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&w=1000&q=80" style="width:100%">
<img class="mySlides1" src="https://media.istockphoto.com/id/1409254639/photo/autumn-drive.jpg?b=1&s=170667a&w=0&k=20&c=phQOICvfLifPWESZu3AioY7sKM9s_HQnCozMKF6g120=" style="width:100%">
<img class="mySlides1" src="https://media.istockphoto.com/id/1427249962/photo/tropical-leaves-abstract-green-leaf-texture-in-garden-nature-background.jpg?b=1&s=170667a&w=0&k=20&c=40KcV7mbAQWihuO0At8GSOTIKp-TvIoHGIhurHBeUq0=" style="width:100%">
</div>
<script>
var myIndex1 = 0;
carousel1();
function carousel1() {
var j;
var y = document.getElementsByClassName("mySlides1");
for (j = 0; j < y.length; j++) {
y[j].style.display = "none";
}
myIndex1++;
if (myIndex1 > y.length) {myIndex1 = 1}
y[myIndex1-1].style.display = "block";
setTimeout(carousel1, 2500); // Change image every 3 seconds
}
</script>
</div>

How can I get my img src to keep changing between 3-4 images when hovered?

I am currently working on a college project for a clothing website, so what I want is that when the user hovers over a product image on the main feed, the product image keeps changing between 3-4 images of that product with a few milliseconds of transition.
this is my HTML code
<div class="imagebox">
<img src="../img/Mom Sarees/5pcs/A93A5321.JPG" alt="Saree no: A93A5321 ">
</div>
this is the CSS
.imagebox{
display: inline-block;}
.imagebox img{
margin-top: 20px;
height: 400px;
margin-right: 10px;}
Is there a way to do that using CSS or JS?

I've implemented an example by JS, I hope this will be helpful.
let intervalId;
let i = 0;
document.querySelectorAll('.product-images').forEach((poroduct) => {
const productImages = poroduct.querySelectorAll('img');
poroduct.addEventListener('mouseenter', function() {
fadeImg(productImages);
intervalId = setInterval(() => fadeImg(productImages), 1500);
});
poroduct.addEventListener('mouseleave', function() {
clearInterval(intervalId);
productImages[i].classList.remove('active');
productImages[0].classList.add('active');
i = 0;
});
});
function fadeImg(productImages) {
productImages[i].classList.remove('active');
i = (i + 1) % 4;
productImages[i].classList.add('active');
}
.container {
display: flex;
}
.imagebox {
position: relative;
flex: 1;
margin: 15px;
}
.imagebox img {
max-height: 200px;
max-width: 100%;
position: absolute;
opacity: 0;
transition: opacity 500ms;
}
.imagebox img.active {
opacity: 1;
}
<div class="container">
<div class="imagebox">
<a href="#" class="product-images">
<img class="active" src="https://fakeimg.pl/350x200/550000/?text=Image1" />
<img src="https://fakeimg.pl/350x200/005500/?text=Image2" />
<img src="https://fakeimg.pl/350x200/000055/?text=Image3" />
<img src="https://fakeimg.pl/350x200/005555/?text=Image4" />
</a>
</div>
<div class="imagebox">
<a href="#" class="product-images">
<img class="active" src="https://fakeimg.pl/350x200/000000/?text=Image1" />
<img src="https://fakeimg.pl/350x200/faaa22/?text=Image2" />
<img src="https://fakeimg.pl/350x200/885500/?text=Image3" />
<img src="https://fakeimg.pl/350x200/f500aa/?text=Image4" />
</a>
</div>
<div class="imagebox">
<a href="#" class="product-images">
<img class="active" src="https://fakeimg.pl/350x200/0000ff/?text=Image1" />
<img src="https://fakeimg.pl/350x200/00ff00/?text=Image2" />
<img src="https://fakeimg.pl/350x200/ff0000/?text=Image3" />
<img src="https://fakeimg.pl/350x200/ffff00/?text=Image4" />
</a>
</div>
</div>

JavaScript click event is not changing the style

I'm making a toggle sidebar where onClick of button showmenu funtion is not working. I'm trying to change the style of the sidenav from display:none to display:block but when I click the button nothing happens. I've tried with an alert and that works but not with the style.
Please help me find out where is the problem?
function showmenu() {
var sidenav = document.getElementById("sidenav");
var overdiv = document.getElementById("overlay");
if (sidenav.style.display == "none") {
overdiv.style.display = "block";
sidenav.style.display = "block";
} else if(sidenav.style.display =="block"){
sidenav.style.display = "none";
overdiv.style.display = "none";
}
}
.sidenav {
width: 70%;
height: 85%;
top: 8%;
background-color:#ffffff;
left:0;
display: none;
border: 3px solid #77777766;
overflow-x: hidden;
transition: 0.5s;
position: fixed;
z-index: 5;
}
.overlay{
position: absolute;
margin-top: 13%;
display: none;
margin-bottom: 13%;
width: 100%;
height: 100%;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
<header>
<button id="menu-div" onclick="showmenu()">Click</button>
<nav class="sidenav" id="sidenav">
<a class="item" onclick="noDisponible()"><label class="menu-txt">Debate</label><img class="icon" src="images/iconos/megafono.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Mensajes</label> <img class="icon" src="images/iconos/veterinario.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Control de Salud</label> <img class="icon" src="images/iconos/corazon.png" /></a>
<a class="item" href='mapa.html' >Mapas</label> <img class="icon" src="images/iconos/mapas.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Servicios</label> <img class="icon" src="images/iconos/doctor (1).png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Configuración</label> <img class="icon" src="images/iconos/rueda-dentada.png" /></a>
<a class="item" id="logout" onclick="logout();"><label class="menu-txt">Cerrar Sesión</label> <img class="icon" src="images/iconos/exit.png" /></a>
</nav>
</header>
<div id="overlay" class="overlay" onclick="overlay()"></div>
<div id="content">
</div>

Your function working. Only change this line. Add style on nav tag style="display: none" and set default display: none or block.
<button id="menu-div" onclick="showmenu()">click here</button>
<nav class="sidenav" style="display: none" id="sidenav">

You need to remove the display:none from the CSS classes.
But really, you're taking the wrong approach here. Your CSS and JavaScript should be separated from your HTML.
See the comments inline below:
// Don't use inline HTML event atributes, like onclick.
// Do all your event/JavaScript work separately in JavaScript
// Get all the DOM references you'll use just once,
// not every time your functions run
var btnMenu = document.getElementById("menu-div");
var sideNav = document.getElementById("sidenav");
var overDiv = document.getElementById("overlay");
btnMenu.addEventListener("click", showMenu);
overDiv.addEventListener("click", overlay);
// Set up event handling on the sideNav and let all
// the events triggered from within it bubble up to it
sideNav.addEventListener("click", noDisponible);
function showMenu() {
// Just toggle the usage of the pre-made hidden class
sideNav.classList.toggle("hidden");
overDiv.classList.toggle("hidden");
console.log("function showMenu called");
}
function noDisponible(event){
// Make sure it was the right type of sideNave item
if(event.target.classList.contains("noDisponible")){
// Do work here
console.log("function noDisponible called");
} else if(event.target.classList.contains("logout")){
// Do logout here
logout();
}
}
function overlay(event){
// Do work here
console.log("function overlay called");
}
function logout(event){
console.log("function logout called");
}
.hidden { display:none; }
.sidenav {
width: 70%;
height: 85%;
top: 8%;
background-color:#ffffff;
left:0;
border: 3px solid #77777766;
overflow-x: hidden;
transition: 0.5s;
position: fixed;
z-index: 5;
}
.overlay{
position: absolute;
margin-top: 13%;
margin-bottom: 13%;
width: 100%;
height: 100%;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
<header>
<button type="button" id="menu-div"></button>
<nav class="sidenav hidden" id="sidenav">
<a class="item noDisponible">
<label class="menu-txt">Debate</label>
<img class="icon" src="images/iconos/megafono.png">
</a>
<a class="item noDisponible">
<label class="menu-txt">Mensajes</label>
<img class="icon" src="images/iconos/veterinario.png">
</a>
<a class="item noDisponible">
<label class="menu-txt">Control de Salud</label>
<img class="icon" src="images/iconos/corazon.png">
</a>
<a class="item noDisponible" href='mapa.html'>
<label class="menu-txt">Mapas</label> <!--You were missing the opening label tag here -->
<img class="icon" src="images/iconos/mapas.png">
</a>
<a class="item noDisponible">
<label class="menu-txt">Servicios</label>
<img class="icon" src="images/iconos/doctor (1).png">
</a>
<a class="item noDisponible">
<label class="menu-txt">Configuración</label>
<img class="icon" src="images/iconos/rueda-dentada.png">
</a>
<a class="item logout" id="logout">
<label class="menu-txt">Cerrar Sesión</label>
<img class="icon" src="images/iconos/exit.png">
</a>
</nav>
</header>
<div id="overlay" class="overlay hidden">OVERLAY HERE</div>
<div id="content"></div>

Set the style of sidenav programatically outside of the function:
let sidenav = document.getElementById("sidenav");
sidenav.style.display = "none";
function showmenu() {
let overdiv = document.getElementById("overlay");
if (sidenav.style.display == "none") {
overdiv.style.display = "block";
sidenav.style.display = "block";
} else if (sidenav.style.display == "block") {
sidenav.style.display = "none";
overdiv.style.display = "none";
}
}
.sidenav {
width: 70%;
height: 85%;
top: 8%;
background-color: #ffffff;
left: 0;
border: 3px solid #77777766;
overflow-x: hidden;
transition: 0.5s;
position: fixed;
z-index: 5;
}
.overlay {
position: absolute;
margin-top: 13%;
display: none;
margin-bottom: 13%;
width: 100%;
height: 100%;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
cursor: pointer;
}
<header>
<button id="menu-div" onclick="showmenu()">Click</button>
<nav class="sidenav" id="sidenav">
<a class="item" onclick="noDisponible()">
<label class="menu-txt">Debate</label>
<img class="icon" src="images/iconos/megafono.png" /></a>
<a class="item" onclick="noDisponible()">
<label class="menu-txt">Mensajes</label>
<img class="icon" src="images/iconos/veterinario.png" />
</a>
<a class="item" onclick="noDisponible()">
<label class="menu-txt">Control de Salud</label>
<img class="icon" src="images/iconos/corazon.png" />
</a>
<a class="item" href='mapa.html'>
<label class="menu-txt">Mapas</label>
<img class="icon" src="images/iconos/mapas.png" />
</a>
<a class="item" onclick="noDisponible()">
<label class="menu-txt">Servicios</label>
<img class="icon" src="images/iconos/doctor (1).png" />
</a>
<a class="item" onclick="noDisponible()">
<label class="menu-txt">Configuración</label>
<img class="icon" src="images/iconos/rueda-dentada.png" />
</a>
<a class="item" id="logout" onclick="logout();">
<label class="menu-txt">Cerrar Sesión</label>
<img class="icon" src="images/iconos/exit.png" />
</a>
</nav>
</header>
<div id="overlay" class="overlay" onclick="overlay()">Overlay</div>
<div id="content">Content</div>

You need to use window.getComputedStyle to get the css properties instead of element.style.
Element.style only gives the inline styles provided but window.getComputedStyle will give you the final styles provided to the element. element.style will give you the inline styles only and that's why to make it work, you need to add inline style display: none as suggested by #BCM.
You can read more here
function showmenu() {
var sidenav = document.getElementById("sidenav");
var overdiv = document.getElementById("overlay");
if (window.getComputedStyle(sidenav).display == "none") {
overdiv.style.display = "block";
sidenav.style.display = "block";
} else if(window.getComputedStyle(sidenav).display =="block"){
sidenav.style.display = "none";
overdiv.style.display = "none";
}
}
.sidenav {
width: 70%;
height: 85%;
top: 8%;
background-color:#ffffff;
left:0;
display: none;
border: 3px solid #77777766;
overflow-x: hidden;
transition: 0.5s;
position: fixed;
z-index: 5;
}
.overlay{
position: absolute;
margin-top: 13%;
display: none;
margin-bottom: 13%;
width: 100%;
height: 100%;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
<header>
<button id="menu-div" onclick="showmenu()">Click</button>
<nav class="sidenav" id="sidenav">
<a class="item" onclick="noDisponible()"><label class="menu-txt">Debate</label><img class="icon" src="images/iconos/megafono.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Mensajes</label> <img class="icon" src="images/iconos/veterinario.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Control de Salud</label> <img class="icon" src="images/iconos/corazon.png" /></a>
<a class="item" href='mapa.html' >Mapas</label> <img class="icon" src="images/iconos/mapas.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Servicios</label> <img class="icon" src="images/iconos/doctor (1).png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Configuración</label> <img class="icon" src="images/iconos/rueda-dentada.png" /></a>
<a class="item" id="logout" onclick="logout();"><label class="menu-txt">Cerrar Sesión</label> <img class="icon" src="images/iconos/exit.png" /></a>
</nav>
</header>
<div id="overlay" class="overlay" onclick="overlay()"></div>
<div id="content">
</div>
Also, for writing this type of code, you should be following #Scott Marcus's approach. It is much better and cleaner.

Problems with my slide gallery

I have a few problems with the sliding gallery I added:
the buttons stuck below the gallery instead of its sides. (I tried to give them 'display: inline-block' (?)).
I want to divide the #gallrey div into 2. Which contain the #slideGallery & #galleryDescription. The div #galleryDescription contains <p> that is stuck at the bottom instead of top or center.
This is the format I want #gallery to have:
[button left][#slideGallery DIV][button right][#galleryDescription DIV]
Hope you understand me. :)
Here is my code:
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
.mySlides {
height: 300px;
width: 300px;
}
#gallery {
width: 620px;
border: 1px solid black;
margin: 0 auto;
}
#gallerySlide {
display: inline-block;
width: 49%;
top: 0;
left: 0;
}
#galleryDescription {
display: inline-block;
width: 49%;
top: 0;
right: 0;
}
#glryDesc {
/* (glryDesc = gallery description) */
padding-left: 5px;
width: 90%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="gallery">
<div id="gallerySlide">
<img class="mySlides" src="images/slide1.png" />
<img class="mySlides" src="images/slide2.png" />
<img class="mySlides" src="images/slide3.jpg" />
<img class="mySlides" src="images/slide4.jpg" />
<button class="btn" onclick="plusDivs(-1)">❮</button>
<button class="btn" onclick="plusDivs(1)">❯</button>
</div>
<div id="galleryDescription">
<p id="glryDesc">This is gonna be the description of the slide gallery. The gallery is very nice. Also the description !</p>
</div>
</div>

Is this what you wanted?
You had way too many widths that were contradicting with each other. I had to compromise a little on the different sizes. Try adjusting them yourself.
left, top and right are properties do not work on elements that do not have a specific position set (relative, absolute or fixed). Default position is static.
I used flex containers and justify-content, align-items to align the items accordingly. Read up on them.
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
.mySlides {
height: 280px;
width: 280px;
display: none;
}
#gallery{
display: flex;
justify-content: center;
align-items: center;
width: 660px;
border: 1px solid black;
margin:0 auto;
}
#gallerySlide {
display: flex;
width: 49%;
}
#glryDesc { /* (glryDesc = gallery description) */
padding-left: 5px;
}
<div id="gallery">
<div id="gallerySlide">
<button class="btn" onclick="plusDivs(-1)">❮</button>
<img class="mySlides" src="images/slide1.png" />
<img class="mySlides" src="images/slide2.png" />
<img class="mySlides" src="images/slide3.jpg" />
<img class="mySlides" src="images/slide4.jpg" />
<button class="btn" onclick="plusDivs(1)">❯</button>
</div>
<div id="galleryDescription">
<p id="glryDesc">This is gonna be the description of the slide gallery. The gallery is very nice. Also the description !</p>
</div>
</div>

First element of a slideshow doesn't show, and also the buttons doesn't work

So I'm trying to create multiple slideshows on the same page and I managed to obtain this code by now:
HTML
<div class="portfolio-slideshow">
<a class="prev" onclick="slide(0,-1)">❮</a>
<div class="slide"> <img src="img/dailyui/008.png" class="slideimg_0" id="0"> </div>
<div class="slide"> <img src="img/dailyui/007.jpg" class="slideimg_0" id="1"> </div>
<div class="slide"> <img src="img/dailyui/006.jpg" class="slideimg_0" id="2"> </div>
<div class="slide"> <img src="img/dailyui/003.jpg" class="slideimg_0" id="3"> </div>
<a class="next" onclick="slide(0,1)">❯</a>
</div>
<div class="portfolio-slideshow">
<a class="prev" onclick="slide(1,-1)">❮</a>
<div class="slide"> <img src="img/dailyui/008.png" class="slideimg_1" id="0"> </div>
<div class="slide"> <img src="img/dailyui/007.jpg" class="slideimg_1" id="1"> </div>
<div class="slide"> <img src="img/dailyui/006.jpg" class="slideimg_1" id="2"> </div>
<div class="slide"> <img src="img/dailyui/003.jpg" class="slideimg_1" id="3"> </div>
<a class="next" onclick="slide(1,1)">❯</a>
</div>
Also my body:
<body onLoad="showSlides()">
SCSS
.portfolio-slideshow{
width: 30%;
display: flex;
justify-content: space-between;
align-items: center;
}
.slide{
display: none;
padding:0 35px;
img{
max-height:40vh;
max-width:100%;
border-radius:5px;
-webkit-filter: drop-shadow(5px 5px 5px #000);
filter: drop-shadow(0px 2px 5px #222);
cursor: zoom-in;
display: none;
}
}
.prev,.next{
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.2s ease;
opacity: 0.25;
&:hover{ opacity: 1; }
}
Javascript
var slideIndex = [0,0]
function showSlides(){
var aux = slideIndex.length;
var i;
for(i=0; i<aux; i++){
slide(i,0);
}
}
function slide(n,m){
var i;
var aux = document.getElementsByClassName("slideimg_" + n);
var aux2 = aux.length - 1;
slideIndex[n] += m;
if (slideIndex[n] < 0) slideIndex = aux2;
else if (slideIndex[n] > aux2) slideIndex = 0;
for(i=0; i<aux.length; i++){ aux[i].style.display = "none"; }
aux[slideIndex[n]].style.display = "block";
}
Another thing to mentions is that when I click next/previous buttons I get this:
Uncaught TypeError: Cannot read property 'style' of undefined
at slide (websitejs2.js:17)
at HTMLAnchorElement.onclick (index2.html:87)
So, can any of you please help me getting things done?

Go through comments in code. add Comment if some doubt
var slideIndex = [0, 0]
function showSlides() {
var aux = slideIndex.length;
var i;
for (i = 0; i < aux; i++) {
slide(i, 0);
}
}
function slide(n, m) {
var i;
var aux = document.getElementsByClassName("slideimg_" + n);
var aux2 = aux.length - 1;
/*added logic */
if (slideIndex[n] == 3 && m == 1) {
slideIndex[n] = -1
}
if (slideIndex[n] == 0 && m == -1) {
slideIndex[n] = 4
}
/*added logic end*/
slideIndex[n] += m;
if (slideIndex[n] < 0) slideIndex = aux2;
else if (slideIndex[n] > aux2) slideIndex = 0;
for (i = 0; i < aux.length; i++) {
aux[i].style.display = "none";
}
aux[slideIndex[n]].style.display = "block";
}
.portfolio-slideshow {
width: 30%;
display: flex;
justify-content: space-between;
align-items: center;
}
.slide {
display: block;
/*changed to block*/
padding: 0 35px;
img {
max-height: 40vh;
max-width: 100%;
border-radius: 5px;
-webkit-filter: drop-shadow(5px 5px 5px #000);
filter: drop-shadow(0px 2px 5px #222);
cursor: zoom-in;
display: none;
}
}
.prev,
.next {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: black;
/*changed to black*/
font-weight: bold;
font-size: 18px;
transition: 0.2s ease;
opacity: 1;
/*changed to 1*/
&:hover {
opacity: 1;
}
}
/*added*/
img {
height: 100px;
width: 100px;
display: none;
}
<body onLoad="showSlides()">
<div class="portfolio-slideshow">
<a class="prev" onclick="slide(0,-1)">❮</a>
<div class="slide"> <img src="https://static.pexels.com/photos/158507/marigold-calendula-orange-blossom-158507.jpeg" class="slideimg_0" id="0"> </div>
<div class="slide"> <img src="https://static.pexels.com/photos/59836/snowflake-flower-blossom-bloom-59836.jpeg" class="slideimg_0" id="1"> </div>
<div class="slide"> <img src="https://static.pexels.com/photos/93013/pexels-photo-93013.jpeg" class="slideimg_0" id="2"> </div>
<div class="slide"> <img src="https://static.pexels.com/photos/101538/dandelion-seeds-nature-spring-101538.jpeg" class="slideimg_0" id="3"> </div>
<a class="next" onclick="slide(0,1)">❯</a>
</div>
<div class="portfolio-slideshow">
<a class="prev" onclick="slide(1,-1)">❮</a>
<div class="slide"> <img src="https://static.pexels.com/photos/158507/marigold-calendula-orange-blossom-158507.jpeg" class="slideimg_1" id="0"> </div>
<div class="slide"> <img src="https://static.pexels.com/photos/59836/snowflake-flower-blossom-bloom-59836.jpeg" class="slideimg_1" id="1"> </div>
<div class="slide"> <img src="https://static.pexels.com/photos/93013/pexels-photo-93013.jpeg" class="slideimg_1" id="2"> </div>
<div class="slide"> <img src="https://static.pexels.com/photos/101538/dandelion-seeds-nature-spring-101538.jpeg" class="slideimg_1" id="3"> </div>
<a class="next" onclick="slide(1,1)">❯</a>
</div>
</body>