Miket kell megváltoztatnom a css fájl-ban hogy 10 képpel is hűködjön?
Készítettem egy weblapot gyakorlásból de a slider csak 5 képpel működik rendesen. Mit/miket kell megváltoztatnom a css ben hogy működjön? Vagy mi a logikája hogy akárhány képpel el tudjam készíteni?
------------------------------HTML---------------------------------------
<!doctype html>
<html lang="hu-HU">
<head>
<title>Hulu katalógus</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style4.css">
<link rel="shortcut icon" href="image/favicon.png" type="image/x-icon">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<HEader>
<nav>
<input type="checkbox" name="" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Film katalógus</label>
<ul>
<li><a href="katalogus.index.html">Főoldal</a></li>
<li><a href="netflixkatalogus.index.html">Netflix</a></li>
<li><a href="hbokatalogus.index.html">Hbo</a></li>
<li><a class="active" href="hulukatalogus.index.html">Hulu</a></li>
<li><a href="appletvplus.index.html">Apple Tv+</a></li>
</ul>
</nav>
</HEader>
<main>
<div id="notice">
Az ezen az oldalon lévő összes műsort a <a href="https://www.hulu.com/welcome?orig_referrer=https%3A%2F%2Fwww.google.com%2F" target="blank">Hulu weboldalán</a> lehet megtekinteni előfizetéssel.
</div>
<div class="container">
<div id="slider">
<figure>
<a href="https://www.netflix.com/title/80018294" target="blank"><img src="./css/image/hulu.jpeg" alt=""></a>
<a href="https://www.netflix.com/title/80100172" target="blank"><img src="./css/image/harlots.jpg" alt=""></a>
<a href="https://www.netflix.com/title/80192098" target="blank"><img src="./css/image/pen15.jpg" alt=""></a>
<a href="https://www.netflix.com/title/80057281" target="blank"><img src="./css/image/viceinvestigates.jpg" alt=""></a>
<a href="https://www.netflix.com/title/80018294" target="blank"><img src="./css/image/hulu.jpeg" alt=""></a>
</figure>
</div>
</div>
</main>
</body>
</html>
------------------------------CSS-------------------------------------
html, body{
padding: 0px;
margin: 0px;
background-color: #4c4c4c;
}
/* navigation */
nav{
background-color: #8B0000;
height: 70px;
width: 100%;
}
label.logo{
color: white;
font-size: 35px;
line-height: 80px;
padding: 0px 100px;
font-weight: bold;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 50px;
margin: 0px 5px;
}
nav ul li a{
color: white;
font-size: 17px;
text-transform: uppercase;
padding: 7px 13px;
border-radius: 3px;
text-decoration: none;
}
a.active,a:hover{
background-color: black;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
@media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
}
@media (max-width: 858px){
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: gray;
top: 70px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0px;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: green;
}
#check:checked ~ ul{
left: 0px;
}
}
/*slider*/
.container{
margin: 0px auto;
margin-top: 20px;
position: relative;
width: 70%;
height: 0px;
padding-bottom: 39.37%;
background: #4c4c4c;
border: solid 10px #8B0000;
}
#slider{
overflow: hidden;
}
#slider figure{
position: relative;
width: 500%;
margin: 0px;
left: 0px;
animation: 20s slider infinite;
}
#slider figure img{
float: left;
width: 20%;
}
@keyframes slider{
0%{left: 0px;}
20%{left: 0px;}
25%{left: -100%;}
45%{left: -100%;}
50%{left: -200%;}
70%{left: -200%;}
75%{left: -300%;}
95%{left: -300%;}
100%{left: -400%;}
}
#notice{
padding: 0%;
margin: 0%;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-size: 20px;
margin: 0px 0px;
background-color: #1de783;
display: block;
position: relative;
line-height: 50px;
width: 100%;
}
#notice a{
text-decoration: underline;
color: white;
background: none;
font-style: italic;
}
-----------------------------------------------------------
válasza: válasza:Előzmény:
https://www.gyakorikerdesek.hu/szamitastechnika__weblapkeszi..
Törölték a kommentemet (nem értem miért), de újra leírom:
* a #slider figure-ban a width értékét elemszám*100%-ra
* a #slider figure img-ben a width értékét 100/elemszám%-ra
* és ehhez mérten a kulcskockákat elosztani 0 és -elemszám*100% között
ehhez CSS-ben segítséget nyújthatna a var():
* [link]
és a calc():
* [link]
vagy használhatnál SASS-t:
* [link]
vagy Javascriptet
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!