0

スワイプ用の 5 つの画像があり、html の 5 つの画像ページすべてにドロップダウン ボックスを追加する必要があります。最初の画像スライドのドロップダウン ボックスのサイズは固定されており、クリック可能ですが、残りの 4 つの画像ページのドロップダウン ボックスは小さく、そうではありません。クリック可能、これは奇妙な問題のようです。たくさんグーグル検索しましたが、私の問題に関連する解決策を得ることができませんでした。

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>
4

0 に答える 0