在幻灯片上，如何在幻灯片的每一侧放置箭头？

Question

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.我使用 w3 作为代码，但在他们的示例中，箭头位于相反的两侧。 How can I go about doing that?我怎么能 go 这样做呢？

W3 code W3 代码

 /* 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 class="container"> <div class="navbar"> <img src="https.//encrypted-tbn0.gstatic?com/images:q=tbn.ANd9GcTU3DPk4gCVZ0g40k0xiOjiwcqGY9MJkY4quA&usqp=CAU" class="logo"> <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 class="fa-solid fa-bars" id="menu-icon"></i> </div> </div> <div class="w3-content w3-display-container"> <img class="mySlides" 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 class="mySlides" 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 class="mySlides" 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 class="mySlides" 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 class="mySlides" 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 class="mySlides" 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 class="mySlides" 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 class="buttonleft" onclick="plusDivs(-1)">&#10094;</button> <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095.</button> </div> <script src="index.js"></script> </body> </html>

Answer 1

You only missed to link your stylesheet 'index.css'.你只是错过了链接你的样式表'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.我只是放回了w3.css的链接，修复了缺少的buttonleft class，并将每个图像的宽度改回 100% 有效。

If you want to put some margin or resize the images you need to edit the element (div) that contains them.如果您想放置一些边距或调整图像大小，您需要编辑包含它们的元素 (div)。

Probably you need to edit the classes w3_content and/or w3-display-container .可能您需要编辑类w3_content和/或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 class="container"> <div class="navbar"> <img src="https.//encrypted-tbn0.gstatic?com/images:q=tbn.ANd9GcTU3DPk4gCVZ0g40k0xiOjiwcqGY9MJkY4quA&usqp=CAU" class="logo"> <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 class="fa-solid fa-bars" id="menu-icon"></i> </div> </div> <div class="w3-content w3-display-container"> <img class="mySlides" 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 class="mySlides" 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 class="mySlides" 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 class="mySlides" 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 class="mySlides" 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 class="mySlides" 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 class="mySlides" 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 class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button> <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095.</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.但是，如果您想使用幻灯片/轮播，我强烈建议您查看bootstrap carousel或tiny-slider ，因为它们使您的工作更轻松，并且结果非常漂亮且响应迅速，但是还有更多其他插件/工具可以使用。

在幻灯片上，如何在幻灯片的每一侧放置箭头？

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-08-20 09:43:37

在幻灯片上，如何在幻灯片的每一侧放置箭头？

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-08-20 09:43:37

解决方案1
1 已采纳 2022-08-20 09:43:37