Slide-show
Hej Jag har försökt skapa en slide show men bilderna kommer inte upp, jag förstår inte vart probelemt ligger men här är koden. Tacksam om någon kunde hjälpa mig
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="OmOss.css">
<title>Document</title>
</head>
<body>
<nav class="Nico">
<ul>
<li><a href="">Om Oss</a></li>
<li><a href="Produkter.html">Proukter</a></li>
<li id="Nikka"><a href="OmOss.html">Nikka</a></li>
<li><a href="Anstallda.html">Anställda</a></li>
<li><a href="KontaktaOss.html">Kontakta Oss</a></li>
</ul>
</nav>
<div class="slide">
<div class="slideShow1">
<img id="merz" src="https://www.bing.com/images/search?view=detailV2&ccid=uQuwFTnc&id=0637632FE8AB4D0BDE70E8C166CFC0F1757350C8&thid=OIP.uQuwFTncfwNyiMIBWCUFMwHaE_&mediaurl=https%3a%2f%2fi.pinimg.com%2foriginals%2f4a%2f9d%2f08%2f4a9d089744912b1c236e503556e02f2d.jpg&cdnurl=https%3a%2f%2fth.bing.com%2fth%2fid%2fR.b90bb01539dc7f037288c20158250533%3frik%3dyFBzdfHAz2bB6A%26pid%3dImgRaw%26r%3d0&exph=691&expw=1024&q=G-wagon+brabrus+green+&simid=608026297171525519&FORM=IRPRST&ck=214BD6C277DFBE0A655CA43540B74600&selectedIndex=20&ajaxhist=0&ajaxserp=0" alter="G-wagoon brabrus">
</div>
<div class="slideShow1">
<img id="merz" src="https://www.bing.com/images/search?view=detailV2&ccid=UtuC5%2fNd&id=205BE6D62382E2E7711A1A3CECA8D592B117C435&thid=OIP.UtuC5_NdK4yQN33cwYcjOAHaEK&mediaurl=https%3a%2f%2fi.redd.it%2fouwahf05gnb21.jpg&cdnurl=https%3a%2f%2fth.bing.com%2fth%2fid%2fR.52db82e7f35d2b8c90377ddcc1872338%3frik%3dNcQXsZLVqOw8Gg%26pid%3dImgRaw%26r%3d0&exph=2268&expw=4032&q=porsche+911+gt3+rs+forest+green&simid=608018935613161796&FORM=IRPRST&ck=05E0DDAEB355A21A77C3D89044BEA525&selectedIndex=16&ajaxhist=0&ajaxserp=0" alter="911 GT3 RS">
</div>
<div class="slideShow1">
<img id="merz" src="https://www.bing.com/images/search?view=detailV2&ccid=2A6rJFz8&id=00B667E8901BA84C0E2F2FFF01979E0953253457&thid=OIP.2A6rJFz86Kt6xBDeZbHyAQHaE8&mediaurl=https%3a%2f%2fimages.hdqwalls.com%2fwallpapers%2fbmw-m4-green-5k-ai.jpg&cdnurl=https%3a%2f%2fth.bing.com%2fth%2fid%2fR.d80eab245cfce8ab7ac410de65b1f201%3frik%3dVzQlUwmelwH%252fLw%26pid%3dImgRaw%26r%3d0&exph=3744&expw=5616&q=bmw+m4+forest+green&simid=607988248113316339&FORM=IRPRST&ck=7A21B83CCB7B4899007A993E18CE474E&selectedIndex=12&ajaxhist=0&ajaxserp=0" alter="BMW M4">
</div>
<div class="slideShow1">
<img id="merz" src="https://www.bing.com/images/search?view=detailV2&ccid=d%2bq4mY%2fj&id=A4CE6C5F11F138D40A31E49084AF6C586DD65125&thid=OIP.d-q4mY_j98QLxwDujy9vTQHaEK&mediaurl=https%3a%2f%2fimg00.deviantart.net%2f8fc7%2fi%2f2013%2f111%2f8%2f7%2fmazda_rx7_green__8__by_iby786x-d62gyda.jpg&cdnurl=https%3a%2f%2fth.bing.com%2fth%2fid%2fR.77eab8998fe3f7c40bc700ee8f2f6f4d%3frik%3dJVHWbVhsr4SQ5A%26pid%3dImgRaw%26r%3d0&exph=576&expw=1024&q=mazda+rx7+green&simid=608035050305625273&FORM=IRPRST&ck=83CAD67013FD1954CFB7CA1867778417&selectedIndex=5&ajaxhist=0&ajaxserp=0" alter="G-wagoon brabrus">
</div>
<div class="slideShow1">
<img id="merz" src="https://www.bing.com/images/search?view=detailV2&ccid=9J6nnW0N&id=182671D5E1F3C529CBE4DDC12A3DAA98C9FC3D84&thid=OIP.9J6nnW0NgGFEhQn-zyIdjAHaEM&mediaurl=https%3a%2f%2fimages.hgmsites.net%2fhug%2fupdated-audi-q7_100705674_h.jpg&cdnurl=https%3a%2f%2fth.bing.com%2fth%2fid%2fR.f49ea79d6d0d8061448509fecf221d8c%3frik%3dhD38yZiqPSrB3Q%26pid%3dImgRaw%26r%3d0&exph=1089&expw=1920&q=audi+q7+&simid=608008206769535610&FORM=IRPRST&ck=E3430DA13E9C68E57701F76DE57FA340&selectedIndex=28&ajaxhist=0&ajaxserp=0" alter="G-wagoon brabrus">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">></a>
</div>
<br>
</body>
</html>
CSS:
*{
box-sizing: border-box;
}
body{
margin: 0%;
padding: 0%;
}
.Nico{
display: block;
width: 100%;
background-color: black;
line-height: 50px;
height: 50px;
text-align: center;
}
.Nico ul{
list-style: none;
margin: 0;
padding: 0;
overflow: hiddden;
background-color: #0a2c47;
}
.Nico li{
display: inline;
}
#Nikka{
font-size:55px;
font-style: bold;
}
.Nico li a {
display: inline-block;
color: #e6dac7;
text-align: center;
padding: 15px 30px;
text-decoration: none;
font-size: 22px;
font-style: italic;
}
.slide{
max-width: 1000px;
position: relative;
margin: auto;
}
#merz{
width: 100%;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: #e6dac7;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover{
background-color: rgba(0,0,0,0.8);
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
mvh
H
Jag försökte även göra en av orden i listan i nav större men det funkade inte med font-size: 50; vet någon vad jag skulle kunna göra för att få till det
Du saknar måttenhet för din font-size: 50; prova med 50px för 50 pixlar storlek på teckensnittet kanske.
Gällande din slideshow, URL:erna till dina bilder är inte URL:er till själva bildkällorna, de ser istället ut att vara URL:er till själva BING sidorna som visar bilderna.
Du behöver en källadress för själva bilden.
Denna kan du få genom att använda t ex. Google Chrome's Web Inspector när du högerklickar på bilden och sedan kopierar IMG src="" attributvärdet i HTML-koden för BING sidan :)
Såg nu på deras sida du länkar till i dina IMG-taggar att de har en knapp som heter "Visa bild" som även ger dig URL till bildkällan som hade funkat även den.