html - 插入箭头按钮
问题描述
我在图片中有一个网页和一个滑块。现在滑块自己左右移动我想插入可点击的箭头键来左右导航用户。
<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?如何使左右键起作用?即使您不知道完整的答案,任何类型的帮助都是好的。
解决方案
您只需要下载一些图标 - 因此我推荐羽毛图标 - 将它们作为图像插入并使其可点击,例如使用 JavaScript。
推荐阅读
- sql - sql server 中超过 4 个部分的 parsename 的替代方案
- php - 如何在 php 请求中获取 HTTP 响应
- c# - 如何在不创建新集合的情况下创建新分区?
- java - 这是在没有单例的情况下在许多对象之间共享变量的正确方法吗?
- dialogflow-es - 如何在前端的 html 表单中同时显示对聊天机器人的响应?
- redis - Redis 精度 货币值的浮点精度问题
- javascript - Vuetify 对话框集道具从子到父突变
- azure-devops - 如何在 VSTS 的 CD 管道中执行 javascript 或 node.js 文件,以便将其替换为 keyvalue vault 中的秘密?
- c# - 在 MVC5 中使用扩展方法上传文件时出现问题
- java - HeaderHttpSessionIdResolver 配置