首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HTML/CSS滑块在移动设备上无法正确显示

HTML/CSS滑块在移动设备上无法正确显示
EN

Stack Overflow用户
提问于 2018-06-03 11:01:21
回答 1查看 41关注 0票数 -2

我有一个滑块的形式,在一个数字,采取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

EN

回答 1

Stack Overflow用户

发布于 2018-06-03 13:56:13

只有改变

.figure{ position: absolute;}

.figure{ position: sticky; }

#services{ margin-top: 500px; }

#services{ margin-top: 0px; }

也要删除这个

.section { overflow-y: hidden;}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50662922

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档