我正在使用此plugin来创建3D滑块。一切都在浏览器上正常工作。当您单击图像时,它将变为活动幻灯片并进入中心。在iPad上无法使用相同的行为(点按图片)。我怎样才能在iPad上解决这个问题?
插件HTML结构:
<link rel="stylesheet" href="css/carrousel.css"/>
<!-- ... -->
<div class="banner">
<section id="dg-container" class="dg-container">
<div class="dg-wrapper">
<a href="#" link="http://www.anotherhome.net">
<img src="images/1.jpg">
</a>
<a href="#" link="http://www.anotherhome.net">
<img src="images/2.jpg">
</a>
<!-- ... -->
</div>
<ol class="button" id="lightButton">
<li index="0">
<li index="1">
<!-- ... -->
</ol>
<nav>
<span class="dg-prev"></span>
<span class="dg-next"></span>
</nav>
</section>
</div>
<!-- ... -->
<script src="js/jquery.js"></script>
<script src="js/carrousel.js"></script>
这是你实例化插件的方式:
$('#dg-container').carrousel({
current: 0,
autoplay: true,
interval: 3000
});
答案 0 :(得分:0)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jCarrousel Demo</title>
<link rel="stylesheet" href="https://www.anotherhome.net/file/jCarrousel/css/carrousel.css" />
</head>
<body>
<div class="banner">
<section id="dg-container" class="dg-container">
<div class="dg-wrapper">
<a href="#" link="http://www.anotherhome.net">
<img src="https://www.anotherhome.net/file/jCarrousel/images/1.jpg">
</a>
<a href="#" link="http://www.anotherhome.net">
<img src="https://www.anotherhome.net/file/jCarrousel/images/2.jpg">
</a>
<a href="#" link="http://www.anotherhome.net">
<img src="https://www.anotherhome.net/file/jCarrousel/images/3.jpg">
</a>
<a href="#" link="http://www.anotherhome.net">
<img src="https://www.anotherhome.net/file/jCarrousel/images/4.jpg">
</a>
<a href="#" link="http://www.anotherhome.net">
<img src="https://www.anotherhome.net/file/jCarrousel/images/5.jpg">
</a>
</div>
<ol class="button" id="lightButton">
<li index="0">
<li index="1">
<li index="2">
<li index="3">
<li index="4">
</ol>
<nav>
<span class="dg-prev"></span>
<span class="dg-next"></span>
</nav>
</section>
</div>
<script src="https://www.anotherhome.net/file/jCarrousel/js/jquery.min.js"></script>
<script src="https://www.anotherhome.net/file/jCarrousel/js/carrousel.js"></script>
<script>
$(function() {
$('#dg-container').carrousel({
current: 0,
autoplay: true,
interval: 3000
});
});
</script>
</body>
</html>
&#13;
这是网站上的示例代码
我添加了完整链接,以便您可以直接复制并粘贴到HTML文档中,而无需下载任何内容。我建议你复制&amp;粘贴这个,然后只更改图像,因为当我在平板电脑上试用它时,测试网站似乎工作。
希望这有帮助!