0
Ich habe eine einfache Folie Menü mit nichts außer CSS, für mein Schulprojekt.Slide Menü letzten 2 Kugeln funktioniert nicht
Ich fand ein Tutorial in einem Blog und ich wollte 2 zusätzliche Folien von dem, was es auf der Website präsentiert wurde, Kugeln erschienen, gleiten zwischen ihnen arbeiten, aber nichts nach Auswahl angezeigt.
Hier ist, was ich getan habe:
@import url(http://fonts.googleapis.com/css?family=Archivo+Narrow);
* {
margin: 0;
padding: 0;
}
body {
background-color: #666;
}
h1 {
color: #333;
text-shadow: 1px 1px #999;
font-size: 40px;
font-family: Archivo Narrow;
margin: 40px;
text-align: center;
}
.slider {
display: block;
height: 600px;
min-width: 260px;
max-width: 1200px;
margin: auto;
margin-top: 10px;
position: relative;
}
.sliderinner {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.sliderinner>ul {
list-style: none;
height: 100%;
width: 500%;
overflow: hidden;
position: relative;
left: 0px;
-webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}
.sliderinner>ul>li {
width: 20%;
height: 600px;
float: left;
position: relative;
}
.sliderinner>ul>li>img {
margin: auto;
height: 100%;
}
.slider input[type=radio] {
position: absolute;
left: 50%;
bottom: 15px;
z-index: 100;
visibility: hidden;
}
.slider label {
position: absolute;
left: 50%;
bottom: -45px;
z-index: 100;
width: 12px;
height: 12px;
background-color: #ccc;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
-webkit-transition: background-color .2s;
-moz-transition: background-color .2s;
-o-transition: background-color .2s;
transition: background-color .2s;
}
.slider input[type=radio]#control1:checked~label[for=control1] {
background-color: #333;
}
.slider input[type=radio]#control2:checked~label[for=control2] {
background-color: #333;
}
.slider input[type=radio]#control3:checked~label[for=control3] {
background-color: #333;
}
.slider input[type=radio]#control4:checked~label[for=control4] {
background-color: #333;
}
.slider input[type=radio]#control5:checked~label[for=control5] {
background-color: #333;
}
.slider input[type=radio]#control6:checked~label[for=control6] {
background-color: #333;
}
.slider input[type=radio]#control7:checked~label[for=control7] {
background-color: #333;
}
.slider label[for=control1] {
margin-left: -54px
}
.slider label[for=control2] {
margin-left: -36px
}
.slider label[for=control3] {
margin-left: -18px
}
.slider label[for=control5] {
margin-left: 18px
}
.slider label[for=control6] {
margin-left: 36px
}
.slider label[for=control7] {
margin-left: 54px
}
.slider input[type=radio]#control1:checked~.sliderinner>ul {
left: 0
}
.slider input[type=radio]#control2:checked~.sliderinner>ul {
left: -100%
}
.slider input[type=radio]#control3:checked~.sliderinner>ul {
left: -200%
}
.slider input[type=radio]#control4:checked~.sliderinner>ul {
left: -300%
}
.slider input[type=radio]#control5:checked~.sliderinner>ul {
left: -400%
}
.slider input[type=radio]#control6:checked~.sliderinner>ul {
left: -500%
}
.slider input[type=radio]#control7:checked~.sliderinner>ul {
left: -600%
}
.description {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
font-family: Archivo Narrow;
z-index: 1000;
}
.description-text {
background-color: rgba(0, 0, 0, .8);
padding: 10px;
top: 0;
size: 40px;
z-index: 4;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
color: #fff;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link href="sliderstyle.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>"Why Should I Learn English?" - 10 Compelling Reasons for EFL Learners</h1>
<div class="slider">
<input type="radio" id="control1" name="controls" checked="checked" />
<label for="control1"></label>
<input type="radio" id="control2" name="controls" />
<label for="control2"></label>
<input type="radio" id="control3" name="controls" />
<label for="control3"></label>
<input type="radio" id="control4" name="controls" />
<label for="control4"></label>
<input type="radio" id="control5" name="controls" />
<label for="control5"></label>
<input type="radio" id="control6" name="controls" />
<label for="control6"></label>
<input type="radio" id="control7" name="controls" />
<label for="control7"></label>
<div class="sliderinner">
<ul>
<li>
<img src="image1.jpg" width="1200px" height="600px">
<div class="description">
<div class="description-text">
<h2>English is one of the most widely spoken languages</h2>
<p>Although it comes....
</p>
</div>
</div>
</li>
<li>
<img src="image2.jpg" height="600px" width="1200">
<div class="description">
<div class="description-text">
<h2>English will open up more opportunities for you</h2>
<p>Being able ....</p>
</div>
</div>
</li>
<li>
<img src="image3.jpg" width="1200px" height="600px">
<div class="description">
<div class="description-text">
<h2>English gives you access to some of the world's best universities</h2>
<p>English is widely ....</p>
</div>
</div>
</li>
<li>
<img src="image4.jpg" width="1200px" height="600px">
<div class="description">
<div class="description-text">
<h2>English is the language of some of the world's greatest literature</h2>
<p>If you learn English...</p>
</div>
</div>
</li>
<li>
<img src="image5.jpg" width="1200px" height="600px">
<div class="description">
<div class="description-text">
<h2>English gives you wider access to knowledge</h2>
<p>Did you know that...</p>
</div>
</div>
</li>
<li>
<img src="images/6.jpg" />
<div class="description">
<div class="description-text">
<h2>English is a fantastic intellectual challenge</h2>
<p>English is undoubtedly...</p>
</div>
</div>
</li>
<li>
<img src="images/7.jpg" />
<div class="description">
<div class="description-text">
<h2>English allows you to get more from popular culture</h2>
<p>The world's highest....</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<!--slider-->
</body>
</html>
</body>
</html>
Sie waren ein schneller, nur 'Breite zu verwenden: ber (100%/7);' würde kühler sein. – Stickers
Ich werde mit dem Update, das ist eine gute Idee :) – dippas
Sorry, hat meinen Beitrag gelöscht. Du warst schneller. – TheNothingMan