Question

我似乎无法找到一种方法来使这个HTML和CSS滑块响应，文本只是消失但是当我将它设置为overflow-x时：隐藏它只是添加一个滚动。

我已经尝试过一天尝试不同的身高和状态，任何帮助都会非常感激

如果可能的话，如果有任何帮助是CSS tweeks会很好，因为我试图避免这个项目的Javascript，谢谢 HTML

<head>
<meta charset="UTF-8">
<title>Pure CSS3 Overlapping Content Slideshow</title>

  <link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:400,600" rel="stylesheet">

</head>

<body>

<div class="css-slider">
<input id="slide-1" type="radio" name="slides" checked>
<section class="slide slide-one">
<div class="slideText">
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a turpis sit amet tortor egestas convallis. Pellentesque pharetra, lectus sit amet pulvinar vestibulum</span></p>

<p>sem tortor tincidunt diam, vel pretium velit est vitae dolor. Sed vitae orci ac nisi consequat sollicitudin. Donec id feugiat est, non aliquet ex. Ut a tortor imperdiet, feugiat nisl in, venenatis eros. Aenean sed ullamcorper massa, sit amet ullamcorper leo. Nulla non ante at enim consequat venenatis ut in tellus.</p>
    </div>
  <nav>


    <label for="slide-3" class="prev">&#10094;</label>
    <label for="slide-2" class="next">&#10095;</label>
  </nav>
</section>
<input id="slide-2" type="radio" name="slides">
<section class="slide slide-two">
  <div class="slideText">
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a turpis sit amet tortor egestas convallis. Pellentesque pharetra, lectus sit amet pulvinar vestibulum</span></p>

<p>sem tortor tincidunt diam, vel pretium velit est vitae dolor. Sed vitae orci ac nisi consequat sollicitudin. Donec id feugiat est, non aliquet ex. Ut a tortor imperdiet, feugiat nisl in, venenatis eros. Aenean sed ullamcorper massa, sit amet ullamcorper leo. Nulla non ante at enim consequat venenatis ut in tellus.</p>
    </div>
  <nav>
    <label for="slide-1" class="prev">&#10094;</label>
    <label for="slide-3" class="next">&#10095;</label>
  </nav>
</section>
<input id="slide-3" type="radio" name="slides">
<section class="slide slide-three">
  <div class="slideText">
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a turpis sit amet tortor egestas convallis. Pellentesque pharetra, lectus sit amet pulvinar vestibulum</span></p>

<p>sem tortor tincidunt diam, vel pretium velit est vitae dolor. Sed vitae orci ac nisi consequat sollicitudin. Donec id feugiat est, non aliquet ex. Ut a tortor imperdiet, feugiat nisl in, venenatis eros. Aenean sed ullamcorper massa, sit amet ullamcorper leo. Nulla non ante at enim consequat venenatis ut in tellus. </p>
    </div>
  <nav>
    <label for="slide-2" class="prev">&#10094;</label>
    <label for="slide-1" class="next">&#10095;</label>
  </nav>
</section>
<header>
  <label for="slide-1" id="slide-1"></label>
  <label for="slide-2" id="slide-2"></label>
  <label for="slide-3" id="slide-3"></label>
</header>
</div>

</body>

</html>

CSS

html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;


font-family: 'Libre Franklin', sans-serif;


}

*, *:before, *:after { box-sizing: border-box; }

h1 {
color: #fff;
font-size: 2em;
line-height: 1.2;
margin: 0.5em 0 3em;
}

.css-slider {
min-height: 450px;
max-width: 980px;
position: relative;
overflow: hidden;
background: #2d2926;
color: #fff;
text-align: center;
}
.css-slider span {
color: #89cb31;
font-style: italic;
}

label {
cursor: pointer;
display: inline-block;
}

header {
position: absolute;
bottom: 0;
left: 0;
z-index: 900;
width: 100%;
}

header label {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
width: 15px;
height: 15px;
margin: 20px 10px;
}

nav {
position: absolute;
top: 50%;
margin-top: -42px;
z-index: 900;
width: 100%;
}

nav label { font-size: 50px; }

header label:hover { background: #89cb31; }

.prev {
position: absolute;
left: 10px;
}

.next {
position: absolute;
right: 10px;
}

.slide {
width: 100%;
max-width: 1920px;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 2em 0px;
background-color: #2d2926;
background-position: 150% -500%;
background-size: cover;
-webkit-transition: left 0s .75s ease-in-out;
transition: left 0s .75s ease-in-out;


}
.slideText {
padding: 0 5em;
}

.slide .prev, .slide .next { opacity: 0; }

input#slide-1:checked ~ header label#slide-1, input#slide-2:checked ~ header label#slide-2, input#slide-3:checked ~ header label#slide-3 { background: #89cb31; }

[id^="slide"]:checked + .slide {
left: 0;
z-index: 100;
-webkit-transition: left .65s ease-in-out;
transition: left .65s ease-in-out;
}

[id^="slide"]:checked + .slide h1 {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: all .5s .5s;
transition: all .5s .5s;
}

[id^="slide"]:checked + .slide .prev, [id^="slide"]:checked + .slide .next {
opacity: 1;
-webkit-transition: all .5s .5s;
transition: all .5s .5s;
}

如何使这个仅CSS的文本滑块响应

0 个答案: