我有一个滑块的形式,在一个数字,采取200%宽度的身体,在这个数字我设置了2个图像滑块,一个挨着另一个与flexbox每个采取100%宽度的身体我已经设置了身体上的overflow-x:隐藏;,以便只有1的2个图像将显示在同一时间。通过单选链接和简单的转换激活滑块: translate(-50%);
这在PC浏览器上工作得很好,但不幸的是不能在移动设备上工作:
as shown in this screenshot here
以下是包含滑块的站点的链接:
https://jzsgpbizbig5vvch0nnmdg-on.drv.tw/Openclassroom/webagency/Webagency.html
这是滑块的html部分
<!--Slider starts here-->
<section>
<input type="radio" id="i2" name="images" />
<input type="radio" id="i1" name="images" />
<figure id="slider">
<div class="controls">
<div class="left-control">
<label class="prev" for="i2">
<i class="fas fa-angle-left"></i>
</label>
</div><!--left control-->
<div class="right-control">
<label class="next" for="i1">
<i class="fas fa-angle-right"></i>
</label>
</div><!--right control-->
</div><!--controls-->
<div id="slide1">
<img src="images/slider/bg1.jpg">
<div class="text">
<h1><span>WEBAGENCY</span>: L'AGENCE DE TOUS<br>VOS PROJECTS!</h1>
<h3>Vous avez un projet web? La WebAgency vous aide à le réaliser!</h3>
<h5>Plus d'infos</h5>
</div><!--text-->
</div><!--slider-->
<div id="slide2">
<img src="images/slider/bg2.jpg">
<div class="text2">
<h1><span>WEBAGENCY</span>: L'AGENCE DE TOUS<br>VOS PROJECTS!</h1>
<h3>Vous avez un projet web? La WebAgency vous aide à le réaliser!</h3>
<h5>Plus d'infos</h5>
</div><!--text-->
</div><!--slider2-->
</figure>
</section>
<!--End of slider section-->
这是CSS
body
{
font-family: 'Roboto', Arial, sans-serif;
display: flex;
flex-direction: column;
font-size: 100%;
width: 100%;
overflow-x: hidden;
/* Slider */
figure
{
display: flex;
position: sticky;
top: 90px;
left: 0px;
width: 200%;
transition-duration: 1s;
}
#slide1 , #slide2
{
width: 100%;
height: 100%;
}
#slide1 img , #slide2 img
{
width: 100%;
}
.text
{
position: absolute;
height: 40%;
width: 40%;
left: 5%;
top: 20%;
}
.text2
{
position: absolute;
height: 40%;
width: 40%;
left: 55%;
top: 20%;
}
#slide1 h1 , #slide2 h1
{
left: 150px;
top: 150px;
color: white;
font-size: 2.4vw;
}
#slide1 h1 span , #slide2 h1 span
{
color: #30ABB1;
}
#slide1 h3 , #slide2 h3
{
padding-top: 5px;
font-family: arial;
color: white;
font-size: 1vw;
}
#slide1 h5 , #slide2 h5
{
display: inline-block;
color: white;
background-color: #30ABB1;
padding: 10px;
margin-top: 10px;
border-radius: 3px;
font-size: 1.5vw;
cursor: pointer;
}
#i1 , #i2
{
display: none;
}
#i1:checked ~ figure
{
transform: translate(-50%);
}
#i2:checked ~ figure
{
transform: none;
}
.left-control
{
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
height: 60px;
width: 30px;
border-radius: 0 60px 60px 0;
background-color: rgba(45 ,45 ,45 , 0.7);
z-index: 90;
}
.left-control i
{
position: absolute;
color: white;
font-size: 1.3em;
font-weight: bold;
top: 30%;
margin-left: 5px;
cursor: pointer;
}
.left-control:hover
{
height: 60px;
width: 40px;
transition-duration: 250ms;
overflow: hidden;
padding-left: 10px;
}
.right-control
{
position: absolute;
right: 50%;
top: 50%;
height: 60px;
width: 35px;
border-radius: 60px 0 0 60px;
background-color: rgba(45 ,45 ,45 , 0.7);
z-index: 80;
}
.right-control i
{
position: absolute;
color: white;
font-size: 1.3em;
font-weight: bold;
top: 30%;
margin-left: 15px;
cursor: pointer;
}
.right-control:hover
{
height: 60px;
width: 40px;
transition-duration: 250ms;
overflow: hidden;
padding-right: 10px;
}
/* Slider ends here */
所以我的问题是:如何让这种设计在移动设备上同样有效?
提前感谢您的时间,并为这么长的帖子道歉。XD
发布于 2018-06-03 13:56:13
只有改变
.figure{ position: absolute;}
至
.figure{ position: sticky; }
和
#services{ margin-top: 500px; }
至
#services{ margin-top: 0px; }
也要删除这个
.section { overflow-y: hidden;}
https://stackoverflow.com/questions/50662922
复制相似问题