The arrows end up on the bottom. Ive tried using margin to move them up but no luck. What can I add to the code so the arrows are on opposite sides? I used w3 for the code but on their example the arrows are on opposite sides. How can I go about doing that?
/* Slide Show */
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 {display:none;}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/15456887b7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<div >
<div >
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTU3DPk4gCVZ0g40k0xiOjiwcqGY9MJkY4quA&usqp=CAU" >
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="auction.html">Auction</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="proceedings.html">Proceedings</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<i id="menu-icon"></i>
</div>
</div>
<div >
<img src="https://d1yb6h7rvkcay2.cloudfront.net/f6/d7/91/b0/c4/a8/41/a1/a4/da/02/38/c8/de/dd/6c/f6d791b0-c4a8-41a1-a4da-0238c8dedd6c-large::r:0.jpg" style="width:25%">
<img src="https://d1yb6h7rvkcay2.cloudfront.net/55/85/98/b0/60/4b/44/d8/90/83/15/56/03/e0/7b/57/558598b0-604b-44d8-9083-155603e07b57-large::r:0.jpg" style="width:25%">
<img src="https://d1yb6h7rvkcay2.cloudfront.net/71/e2/4d/a2/cb/10/42/99/a7/94/b2/50/2e/96/72/33/71e24da2-cb10-4299-a794-b2502e967233-large::r:0.jpg" style="width:25%">
<img src="https://d1yb6h7rvkcay2.cloudfront.net/26/77/14/f7/22/ff/40/99/83/8d/01/1b/ae/93/1d/3b/267714f7-22ff-4099-838d-011bae931d3b-large::r:0.jpg" style="width:25%">
<img src="https://d1yb6h7rvkcay2.cloudfront.net/3a/e9/36/2c/d3/08/4e/6b/bd/e6/06/7b/2a/22/89/a1/3ae9362c-d308-4e6b-bde6-067b2a2289a1-large::r:0.jpg" style="width:25%">
<img src="https://d1yb6h7rvkcay2.cloudfront.net/eb/f2/fc/2a/3f/3d/41/87/88/36/bc/17/68/d6/14/3d/ebf2fc2a-3f3d-4187-8836-bc1768d6143d-large::r:0.jpg" style="width:25%">
<img src="https://d1yb6h7rvkcay2.cloudfront.net/aa/8e/9c/02/aa/1d/48/f4/82/a1/63/f1/fa/c8/bb/52/aa8e9c02-aa1d-48f4-82a1-63f1fac8bb52-large::r:0.jpg" style="width:25%">
<button onclick="plusDivs(-1)">❮</button>
<button onclick="plusDivs(1)">❯</button>
</div>
<script src="index.js"></script>
</body>
</html>CodePudding user response：
You only missed to link your stylesheet 'index.css'. I just put back the link to w3.css, fixed the missing buttonleft class, and changed the width of each image back to 100% it worked.
If you want to put some margin or resize the images you need to edit the element (div) that contains them.
Probably you need to edit the classes w3_content and/or w3-display-container.
/* Slide Show */
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 {display:none;}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/15456887b7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>Document</title>
</head>
<body>
<div >
<div >
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTU3DPk4gCVZ0g40k0xiOjiwcqGY9MJkY4quA&usqp=CAU" >
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="auction.html">Auction</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="proceedings.html">Proceedings</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<i id="menu-icon"></i>
</div>
</div>
<div >
<img src="https://d1yb6h7rvkcay2.cloudfront.net/f6/d7/91/b0/c4/a8/41/a1/a4/da/02/38/c8/de/dd/6c/f6d791b0-c4a8-41a1-a4da-0238c8dedd6c-large::r:0.jpg" style="width:100%">
<img src="https://d1yb6h7rvkcay2.cloudfront.net/55/85/98/b0/60/4b/44/d8/90/83/15/56/03/e0/7b/57/558598b0-604b-44d8-9083-155603e07b57-large::r:0.jpg" style="width:100%">
<img src="https://d1yb6h7rvkcay2.cloudfront.net/71/e2/4d/a2/cb/10/42/99/a7/94/b2/50/2e/96/72/33/71e24da2-cb10-4299-a794-b2502e967233-large::r:0.jpg" style="width:100%">
<img src="https://d1yb6h7rvkcay2.cloudfront.net/26/77/14/f7/22/ff/40/99/83/8d/01/1b/ae/93/1d/3b/267714f7-22ff-4099-838d-011bae931d3b-large::r:0.jpg" style="width:100%">
<img src="https://d1yb6h7rvkcay2.cloudfront.net/3a/e9/36/2c/d3/08/4e/6b/bd/e6/06/7b/2a/22/89/a1/3ae9362c-d308-4e6b-bde6-067b2a2289a1-large::r:0.jpg" style="width:100%">
<img src="https://d1yb6h7rvkcay2.cloudfront.net/eb/f2/fc/2a/3f/3d/41/87/88/36/bc/17/68/d6/14/3d/ebf2fc2a-3f3d-4187-8836-bc1768d6143d-large::r:0.jpg" style="width:100%">
<img src="https://d1yb6h7rvkcay2.cloudfront.net/aa/8e/9c/02/aa/1d/48/f4/82/a1/63/f1/fa/c8/bb/52/aa8e9c02-aa1d-48f4-82a1-63f1fac8bb52-large::r:0.jpg" style="width:100%">
<button onclick="plusDivs(-1)">❮</button>
<button onclick="plusDivs(1)">❯</button>
</div>
<script src="index.js"></script>
</body>
</html>But if you want to work with slides/carousel I highly recommend to see bootstrap carousel or tiny-slider, because they make your work easier and the result is pretty and responsive, but there are many more other plugins/tools to work with.