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>

Clicking on Slideshow works, but the auto run still runs

Essentially, my website's next arrow for the slideshow is working, but when you click on it, the image moves on and the timer still continues instead of stopping. If you keep clicking the next button, it skips the second image and then after stopping, it continues on very quickly in switching images. It is a peculiar bug and here it is in action: https://codepen.io/kush2610/pen/bGNYBPe
HTML CODE
<section class="pictures">
<h2 >Product Portfolio</h2 >
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3900&q=80" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1485550409059-9afb054cada4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2598&q=80" style="width:100%">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div 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>
</section>
Sorry if this sounds really strange what I am describing but it is such a strange bug I honestly do not know what else to say.

Don't use the same name for both showSlides functions. Overloading functions is not an option in JavaScript.
/* The SlideShow */
var slideIndex = 0;
// 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";
}
function showNextSlide() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showNextSlide, 7000); // Change image every 7 seconds
}
showNextSlide();
.pictures {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.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;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.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: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
<!--Slideshow of the area
================================================== -->
<section class="pictures">
<h2>Product Portfolio</h2>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3900&q=80" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1485550409059-9afb054cada4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2598&q=80" style="width:100%">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div 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>
</section>

It looks like your showSlides() function is setting a timeout which advances the slides. When you click your next button, another function is called, plusSlides(), which in turn calls showSlides() again. Thus, starting another timeout. The more you click the next button, the more timeouts you'll have running, and the more frequently you'll see your slides advance.
I don't have time to write the code right now, but I'd suggest killing any existing timeouts when you click the next button so you only have one running at a time.

previous button is not working in my slideshow code

I am creating slideshow code by mixing two codes of w3school example, all other things like next button are working fine. Only previous button (for loading previous image) is not working. I am debugging the JavaScript but not able to find or rectify the bug.
SlideShow ScreenShot
/slideshow.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="slideshow_style.css">
</head>
<body>
<!-- Slideshow container -->
<div class="slideshow-container" onmouseover="stop_timeout()" onmouseout="start_timeout()">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="img_lights_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="img_snow_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Four</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(0)"></span>
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script src="slideshow_script.js"></script>
</body>
</html>
/slideshow_script.js
var slideIndex = 0;
showSlides(slideIndex);
function plusSlides(n) {
clearTimeout(myTime);
if(n===1){showSlides(slideIndex += (n-1));}
if(n===-1){showSlides(slideIndex += n);}
clearTimeout(myTime);
}
function currentSlide(n) {
clearTimeout(myTime);
showSlides(slideIndex = n);
}
function showSlides(num) {
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}
if (num > slides.length) {slideIndex = 0}
if (num < 1) {slideIndex = slides.length - 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";
myTime = setTimeout(showSlides, 3000); // Change image every 3 seconds
}
function start_timeout() {
myTime = setTimeout(showSlides, 3000); // Change image every 3 seconds
}
function stop_timeout() {
clearTimeout(myTime);
}
/slideshow_style.css
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.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;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.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: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
I know this is stupid question, but i am stuck. Please help me out, how can i make this code working. Please point out the bug. Thanks in advance.

Try replacing the line
if(n===-1){showSlides(slideIndex += n);}
with
if(n===-1){showSlides(slideIndex += (n-1));}
Also, just before the two lines
if (num > slides.length) {slideIndex = 0}
if (num < 1) {slideIndex = slides.length - 1}
add the following line:
if (slideIndex < 1) {slideIndex = slides.length; }
Also delete or comment out the two lines beginning if (num ...).
To be honest, there are aspects of your code that are confusing and are not helping you. It seems to me as if you haven't fully understood the code you have written and have just put things in because they seem to make it work.
Once you've got your code working, there's plenty of scope for writing it better. Take a look at https://codereview.stackexchange.com/.

Adding more than one javascript image slider on same page

I want more than one image slider on same page with same class name using JavaScript. I have done for one image slider.
The issues are when I'm using more than one image slider it is not working properly.I tried with childNodes also it doesn't work. How can I solve this problem?
And I'm trying to make sliding animation also(left and right) for that image slider.
If you need some more explanation, let me know.
I have given the code below;
HTML
<div class="container slider">
<div class="slides">
<img src="images-/b3.jpg">
</div>
<div class="slides">
<img src="images-/b2.jpg">
</div>
<div class="slides">
<img src="images-/b1.jpg">
</div>
<a class="prev" onclick="controlSlide(-1)">❮</a>
<a class="next" onclick="controlSlide(1)">❯</a>
</div>
<div class="container slider">
<div class="slides">
<img src="images-/b3.jpg">
</div>
<div class="slides">
<img src="images-/b2.jpg">
</div>
<div class="slides">
<img src="images-/b1.jpg">
</div>
<a class="prev" onclick="controlSlide(-1)">❮</a>
<a class="next" onclick="controlSlide(1)">❯</a>
</div>
CSS
.slides{
position: relative;
display:none;
}
img{
width: 100%;
vertical-align:middle;
}
.container
{
max-width: 100%;
position: relative;
margin: auto;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
color: black;
font-size: 20px;
}
.prev{
left: 2%;
}
.next{
right: 2%;
}
.prev:hover, .next:hover {
background-color: #f1f1f1;
text-decoration: none;
color: black;
}
JAVASCRIPT
var slides = document.getElementsByClassName("slides");
var position=[1,-1];
var slideIndex=0;
showSlides();
function showSlides() {
controlSlide(position[0]);
setTimeout(showSlides,3000);
}
function controlSlide(position) {
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex +=position;
if (slideIndex>slides.length) {
slideIndex = 1;
}
else if(slideIndex<=0){
slideIndex=slides.length;
}
slides[slideIndex-1].style.display= "block";
}

The problem is that you select all the slides at once, with document.getElementsByClassName("slides").
You want to alter you JS methods to work with the sorrounding element
<div class="container slider">
and then select and pass theese to controlSlide form showSlides.
Not tested:
var sliders = document.getElementsByClassName("slider");
var position=[1,-1];
var slideIndex=0;
sliders.forEach(function(slider){
showSlides(slider);
})
function showSlides(slider) {
let slides = slider.childNodes;
controlSlide(slides, position[0]);
setTimeout(showSlides,3000);
}
function controlSlide(slides, position) {
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex +=position;
if (slideIndex>slides.length) {
slideIndex = 1;
}
else if(slideIndex<=0){
slideIndex=slides.length;
}
slides[slideIndex-1].style.display= "block";
}

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>