HTML / CSS滑块在移动设备上无法正确显示应该怎么解决?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (102)

我有一个滑块,其形状为一个占用身体宽度200%的图形,在这个图形内部,设置了2个图像滑块,每个滑块靠近另一个,每个都带有100%的身体宽度,我已将身体设置为在overflow-x: hidden;一次只能显示两张图像中的一张。滑块通过简单的transform: translate(-50%);

这适用于PC浏览器,但不适用于移动设备

这里是滑块的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 */

我怎样才能使这个设计在手机上的工作是一样的?

提问于
用户回答回答于

变化

.figure{ position: absolute;}

.figure{ position: sticky; }

#services{ margin-top: 500px; }

#services{ margin-top: 0px; }

也删除这个

.section { overflow-y: hidden;}

扫码关注云+社区

领取腾讯云代金券