Question

你能告诉我为什么我能在智能手机上看到我用于滑块的单选按钮吗？如果我在滑块移动时在屏幕上滑动，图片会弹出... Smartphone View

此外，我想编辑100％ux的代码，如果可以，请更正代码！：）

CSS：

.slider-wrapper
{
    display: block;
    background: #fff;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.slider
{
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;

    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
    align-content: center;

    background-position: center;
    background-size: cover;

    -webkit-transition: -webkit-transform 1500ms;
    transition: -webkit-transform 1500ms, transform 1500ms;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.slide1
{
    background-image: url("/img/slider_01_s.jpg");
    left: 0%;
}

.slide2
{
    background-image: url("/img/slider_02_s.jpg");
    left: 100%;
}

.slide3
{
    background-image: url("/img/slider_03_s.jpg");
    left: 200%;
}

.slide4
{
    background-image: url("/img/slider_04_s.jpg");
    left: 300%;
}

.slide5
{
    background-image: url("/img/slider_05_s.jpg");
    left: 400%;
}

.slide-radio1:checked ~ .slider
{
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

.slide-radio2:checked ~ .slider
{
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.slide-radio3:checked ~ .slider
{
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%);
}

.slide-radio4:checked ~ .slider
{
    -webkit-transform: translateX(-300%);
    transform: translateX(-300%);
}

.slide-radio5:checked ~ .slider
{
    -webkit-transform: translateX(-400%);
    transform: translateX(-400%);
}

HTML：

<div class="slider-wrapper">
    <input type="radio" name="slider" class="slide-radio1" checked />
    <input type="radio" name="slider" class="slide-radio2" />
    <input type="radio" name="slider" class="slide-radio3" />
    <input type="radio" name="slider" class="slide-radio4" />
    <input type="radio" name="slider" class="slide-radio5" />

    <div class="slider slide1">
        <div class="content">
            <h1>photography</h1>
        </div>
    </div>
    <div class="slider slide2">
        <div class="content">
            <h1>cinematography</h1>
        </div>
    </div>
    <div class="slider slide3">
        <div class="content">
            <h1>design</h1>
        </div>
    </div>
    <div class="slider slide4">
        <div class="content">
            <h1>code</h1>
        </div>
    </div>
    <div class="slider slide5">
        <div class="content">
            <h1>love</h1>
        </div>
    </div>
</div>

Answer 1

尝试使用以下代码隐藏它们 - 我无法在我的设备上重新创建，但只是隐藏它们似乎是最好的解决方案。

input[type="radio"] { visibility: hidden; }

希望这有帮助

css滑块与智能手机上的单选按钮

1 个答案: