我有一个网页和一个图片内的 slider 。现在， slider 自行左右移动，我想插入可点击的箭头键，以便用户左右导航。
<body>
<div id="slider">
<div class="container">
<div class="slide">
<h3>Slide 1</h3>
<p>#</p>
</div>
<div class="slide">
<h3>Slide 2</h3>
<p>#</p>
</div>
<div class="slide">
<h3>Slide 3</h3>
<p>#</p>
</div>
<div class="slide">
<h3>Slide 4</h3>
<p>#</p>
</div>
<div class="slide">
<h3>Slide 5</h3>
<p>#</p>
</div>
</div>
</div>
</body>
这是CSS
#slider, #slider .slide{
width: 500px;
height: 250px;
}
#slider {
overflow: hidden;
margin: 0 auto;
font-size: 1.2em;
}
#slider .container {
position: relative;
width: 9000px; /* Assign an insanely large width */
top: 0;
right: 0;
animation: slide-animation 25s infinite;
}
#slider .slide {
position: relative;
float: left;
box-sizing: border-box;
padding: 10px 20px;
}
@keyframes slide-animation {
0% {
opacity: 0;
right: 0;
}
11% {
opacity: 1;
right: 0;
}
22% { right: 100%; }
33% { right: 100%; }
44% { right: 200%; }
55% { right: 200%; }
66% { right: 300%; }
77% { right: 300%; }
88% {
opacity: 1;
right: 400%;
}
100% {
opacity: 0;
right: 400%;
}
}
任何帮助将不胜感激使用箭头键的代码是什么？ 在哪里插入箭头键的div？ 如何使左右键起作用？ 即使您不知道完整的答案，任何类型的帮助都是好的。
最佳答案
你只需要下载一些图标 - 所以我推荐Feather图标 - 将它们作为图像插入并使它们可点击，例如使用 JavaScript。
关于html - 插入箭头按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57478490/