Question

我有一个图形形式的滑块， 200％的身体宽度，在这个图中，我已经设置了2个图像滑块，一个接着另一个，每个都采用了flexbox身体的100％宽度我已将身体设置为 overflow-x：hidden; ，以便一次只显示2张图片中的1张。滑块通过无线电链接和简单的转换激活：转换（-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

Answer 1

仅更改

.figure{ position: absolute;}

到

.figure{ position: sticky; }

和

#services{ margin-top: 500px; }

到

#services{ margin-top: 0px; }

也删除此

.section { overflow-y: hidden;}

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

1 个答案: