我有 5 个要滑动的图像,并且需要为 html 中的所有 5 个图像页面添加下拉框,因为第一个图像幻灯片下拉框的大小是固定的并且可点击,但对于剩余的四个图像页面,下拉框很小,也不是可点击,这似乎是一个奇怪的问题,谷歌搜索了很多但无法获得与我的问题相关的解决方案。
css
html {
height: 100%;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.5;
position: relative;
height: 100%;
}
.swiper-container {
width: 90%;
height: 100%;
color: #fff;
text-align: center;
}
.red-slide {
background: "file:///android_res/drawable/r9.jpg";
}
.blue-slide {
background: "file:///android_res/drawable/br.jpeg";
}
.orange-slide {
background: "file:///android_res/drawable/br.jpeg";
}
.green-slide {
background: "bb1.jpg";
}
.pink-slide {
background: "bb1.jpg";
}
.swiper-slide .title {
font-style: italic;
font-size: 42px;
margin-top: 80px;
margin-bottom: 0;
line-height: 45px;
}
.pagination {
position: absolute;
z-index: 20;
left: 10px;
bottom: 10px;
}
.swiper-pagination-switch {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 8px;
background: #222;
margin-right: 5px;
opacity: 0.8;
border: 1px solid #fff;
cursor: pointer;
}
.swiper-visible-switch {
background: #aaa;
}
.swiper-active-switch {
background: #fff;
}
.wrapper {
text-align: center;
}
.button {
position: absolute;
top: 50%;
}
html
<body style="padding:0px 0px;">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide red-slide">
<img src="file:///android_res/drawable/a.jpg" >
<div class="wrapper">
<div class="button" >
<div id="ddmenu">
<ul>
<li>SHARE
<div>
<div class="column">
<a id="sendFacebook" onclick="share(3)" href="#">Email</a>
<a id="sendMMS" onclick="share1(3)" href="#">MMS</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="swiper-slide blue-slide">
<img src="file:///android_res/drawable/b.jpg" >
<div class="wrapper">
<div class="button" >
<div id="ddmenu">
<ul>
<li>SHARE
<div>
<div class="column">
<a id="sendFacebook" onclick="share(4)" href="#">Email</a>
<a id="sendMMS" onclick="share1(4)" href="#">MMS</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>