After implementing the carousel using your provided code, I noticed that the only issue was with the absence of dots in the HTML structure. Once I eliminated all dot references from the JavaScript file, everything functioned as intended.
If you are still facing any problems, I suggest sharing the rendered HTML to further investigate. My testing did not reveal any image positioning issues.
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("mySlides");
//var dots = document.getElementsByClassName("Slides");
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-red", "");
}
*/
x[slideIndex - 1].style.display = "block";
//dots[slideIndex - 1].className += " w3-red";
}
.slide-content {
max-width: 300px;
margin: auto;
position: relative;
}
.mySlides {
display: block;
}
.slide-content {
margin: auto;
}
.w3-center {
text-align: center !important;
}
.w3-section,
.w3-code {
margin-top: 16px !important;
margin-bottom: 16px !important;
}
.w3-light-grey,
.w3-hover-light-grey:hover,
.w3-light-gray,
.w3-hover-light-gray:hover {
/* color: #000 !important; */
background-color: #f1f1f1 !important;
}
.w3-btn,
.w3-button {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.w3-btn,
.w3-button {
border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap;
}
button,
html [type=button],
[type=reset],
[type=submit] {
-webkit-appearence: button;
}
/* Custom styles for testing */
img {
max-height: 300px;
margin-left: auto;
margin-right: auto;
}
<div style="padding:10px">
<div class="slide-content" style="max-width:800px">
<img class="mySlides" src="https://i.ytimg.com/vi/5Nj2BngIko0/maxresdefault.jpg">
<img class="mySlides" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg">
<img class="mySlides" src="http://i0.kym-cdn.com/entries/icons/original/000/016/546/hidethepainharold.jpg">
<div class="w3-center">
<div class="w3-section">
<button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ </button>
<button class="w3-button w3-light-grey" onclick="plusDivs(1)"> ❯</button>
</div>
</div>
</div>
</div>