我已经创建了一个唯一的CSS滑块,几天前,当我在计算机上打开页面时,它似乎控制箭头定位良好,但是当我放大或缩小页面时它们正在移动。我如何保持他们总是在位? 我无法弄清楚我错过了什么。
这是测试页面: http://friendshipforever.co.uk/slider%20test/slider.html
下面的CSS和HTML:
#slider {
text-align: center;
}
h2 {
margin: 40px 0 25px;
border-bottom: 1px solid #bbb;
padding: 0 0 10px;
}
p {
margin: 0 0 16px;
}
strong {
font-weight: bold;
}
label, a {
color: teal;
cursor: pointer;
text-decoration: none;
}
label:hover, a:hover {
color: #000 !important;
}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
label, #active, img { -moz-user-select:none;-webkit-user-select:none; }
.catch { display: block; height: 0; overflow: hidden; }
#slider {
margin: 0 auto;
}
#description {
margin: 25px auto;
text-align: left;
max-width: 650px;
padding: 0 25px;
}
.respond {
margin: 0 auto;
max-width: 370px;
}
/* NEW EXPERIMENT */
/* Slider Setup */
input {
display: none;
}
#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }
#overflow {
width: 105%;
overflow: hidden;
}
article img {
max-width: 400px;
}
#slides .inner {
width: 500%;
line-height: 0;
}
#slides article {
width: 20%;
float: left;
}
/* Slider Styling */
/* Control Setup */
#controls {
margin: -25% 0 0 0;
width: 100%;
height: 50px;
}
#controls label {
display: none;
width: 50px;
height: 50px;
opacity: 0.3;
}
#active {
margin: 23% 0 0;
text-align: center;
}
#active label img {
display: inline-block;
height: 70px;
border-style: solid;
border-width: 3px;
border-color: black;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#active label img:hover {
opacity: 0.5;
}
#controls label:hover {
opacity: 0.8;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(1) {
background: url('next.png') no-repeat;
position: relative;
float: right;
margin: 0 350px 0 0;
display: block;
}
#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
background: url('prev.png') no-repeat;
position: relative;
float: left;
margin: 0 0 0 300px;
display: block;
}
#slide1:checked ~ #active label:nth-child(1),
#slide2:checked ~ #active label:nth-child(2),
#slide3:checked ~ #active label:nth-child(3),
#slide4:checked ~ #active label:nth-child(4),
#slide5:checked ~ #active label:nth-child(5) {
opacity: 0.5;
}
/* Slider Styling */
#slides {
width:400px;
margin: auto;
}
/* Animation */
#slides .inner {
-webkit-transform: translateZ(0);
-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}
#slider {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#controls label{
-webkit-transform: translateZ(0);
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
#slide1:checked ~ #slides article:nth-child(1) .info,
#slide2:checked ~ #slides article:nth-child(2) .info,
#slide3:checked ~ #slides article:nth-child(3) .info,
#slide4:checked ~ #slides article:nth-child(4) .info,
#slide5:checked ~ #slides article:nth-child(5) .info {
opacity: 1;
-webkit-transition: all 1s ease-out 0.6s;
-moz-transition: all 1s ease-out 0.6s;
-o-transition: all 1s ease-out 0.6s;
transition: all 1s ease-out 0.6s;
}
.info, #controls, #slides, #active, #active label, .info h3, .desktop, .tablet, .mobile {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
<!-- CSS -->
<link href="sliderstyle.css" media="screen, projection" rel="stylesheet" type="text/css" />
<!-- Slider Setup -->
<input checked type=radio name=slider id=slide1 />
<input type=radio name=slider id=slide2 />
<input type=radio name=slider id=slide3 />
<input type=radio name=slider id=slide4 />
<input type=radio name=slider id=slide5 />
<!-- The Slider -->
<div id=slides>
<div id=overflow>
<div class=inner>
<article>
<img src=cheesesandwich.png />
</article>
<article>
<img src=cheeseplush1.jpg />
</article>
<article>
<img src=cheeseplush2.jpg />
</article>
<article>
<img src=cheeseplush3.jpg />
</article>
<article>
<img src=cheeseplush4.jpg />
</article>
</div> <!-- .inner -->
</div> <!-- #overflow -->
</div> <!-- #slides -->
<!-- Controls and Active Slide Display -->
<div id=controls>
<label for=slide1></label>
<label for=slide2></label>
<label for=slide3></label>
<label for=slide4></label>
<label for=slide5></label>
</div> <!-- #controls -->
<div id=active>
<label for=slide1><img src=cheesesandwich.png /></label>
<label for=slide2><img src=cheeseplush1.jpg /></label>
<label for=slide3><img src=cheeseplush2.jpg /></label>
<label for=slide4><img src=cheeseplush3.jpg /></label>
<label for=slide5><img src=cheeseplush4.jpg /></label>
</div> <!-- #active -->
</article> <!-- #slider -->
答案 0 :(得分:0)
删除保证金
#controls {
height: 50px;
/*margin: -25% 0 0;*/
width: 100%;
}
#active {
/*margin: 23% 0 0;*/
text-align: center;
}