我在显示图片库时遇到了一些问题,demo-wrapper我希望可以并排显示图像(水平),并且能够在没有按钮的情况下在它们之间滑动。我无法使用 flex 完成此操作,因此现在我尝试使用 javascript 来完成此操作。目前我的参考脚本有一个基于箭头的按钮来改变图像之间的,但遗憾的是我无法控制图像并且我找不到我的错误。
我希望就如何使用下面的脚本完成此操作或替代方法提供建议。
HTML:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<a name="top"></a>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スタジオ</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
Slider = $('#slider').Swipe({
auto: 3000,
continuous: true
}).data('swipe');
$('.next').on('click', Slider.next);
$('.prev').on('click', Slider.prev);
});
</script>
</head>
<body>
<div class="banner">スタジオ</div>
<div class="header">NAME<br>LASTNAME.</div>
<div class="pofabut">About</div>
<div class="contact-social">
<div class='github'>
<a href="https://github.com/user" alt="github" target="_blank">
<img width="19px" src="components/img/github.svg"/> </a>
</div>
<div class='instagram'>
<a href="https://www.instagram.com/user" alt="instagram" target="_blank">
<img width="20" src="components/img/instagram.png"/> </a>
</div>
<div class='email'>
<a href="mailto:email" alt="email" target="_blank">
<img width="25px" src="components/img/email.png"/> </a>
</div>
<div class='linkedin'>
<a href="" alt="linkedin-user" target="_blank">
<img width="20px" src="components/img/linkedin.svg"/> </a>
</div>
</div>
<div class="image-one">
<img src="components/img/001.png" alt="landing_page_one"></div>
<div class="circle">
相关分类