100% に設定されている div で大きな問題が発生しています。デスクトップでは問題なく表示されますが、iPhoneでは右側にギャップがあります。試してみました
body
{
min-width:980px;
background-color: #fff;
インターネットで見つけた他のいくつかの修正を試みましたが、まだ機能していません。
初めて使用したidangero swiperを使用しているので、それが原因かどうかはわかりませんが、iPhoneでは正常に表示されます。表示されないのはdivです。
ここにCSSがあります
#welcome{
width: 100%;
height: 256px;
background-color: #1e2f3f;
}
これはスワイパーのコードです:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="idangerous.swiper.css">
<script src="idangerous.swiper.js"></script>
<script type="text/javascript">
/*======
Use document ready or window load events
For example:
With jQuery: $(function() { ...code here... })
Or window.onload = function() { ...code here ...}
Or document.addEventListener('DOMContentLoaded', function(){ ...code here... }, false)
=======*/
window.onload = function() {
var mySwiper = new Swiper('.swiper-container',{
//Your options here:
mode:'horizontal',
loop: true
//etc..
});
}
</script>
<style>
.device {
width: 980px;
height: 528px;
padding: 30px 40px;
border-radius: 20px;
background: #111;
border: 3px solid white;
margin: 5px auto;
position: relative;
box-shadow: 0px 0px 5px #000;
margin: 0 auto;
}
.device .arrow-left {
background: url(images/arrows.png); no-repeat left top;
position: absolute;
left: 10px;
top: 50%;
margin-top: -15px;
width: 17px;
height: 30px;
}
.device .arrow-right {
background: url(images/arrows.png) no-repeat left bottom;
position: absolute;
right: 10px;
top: 50%;
margin-top: -15px;
width: 17px;
height: 30px;
}
</style>
</head>
<body>
<div class="device">
<a class="arrow-left" href="#"></a>
<a class="arrow-right" href="#"></a>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/slide1.png"/>
</div>
<!--Second Slide-->
<div class="swiper-slide">
<img src="images/slide2.jpg"/>
</div>
<!--Third Slide-->
<div class="swiper-slide">
<a href="http://www.lbbacchus.com"><img src="images/slide4.jpg" alt=""/></a> </div>
<!--Etc..-->
</div>
</div>
<div class="pagination"></div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.arrow-left').on('click', function(e){
e.preventDefault()
mySwiper.swipePrev()
})
$('.arrow-right').on('click', function(e){
e.preventDefault()
mySwiper.swipeNext()
})
</script>
どうもありがとう:)
