Automatyczne dostostowanie rozmaru slajdu w sliderze js

pytanie zadane 16 października 2016 w JavaScript przez Michał Wołoszyn Początkujący (380 p.)

Witam. Przerobiłem lekcję na blogu Mirka Zelenta a konkretnie 2 odcinek Java Script dotyczący slidera. Wszystko fajnie działa na mojej stronie ale chciałbym się dowiedzieć w jaki sposób można dostosować wielkość slajdu do diva w którym się znajduje. Wysokość podana w px, natomiast szerokość na cały ekran, czyli 100%.

1 odpowiedź

odpowiedź 16 października 2016 przez dewe Gaduła (4,300 p.)

Nie wiem o co zbytnio chodzi, ale sprobuj pokombinowac z:

min-width: 100%;

max-width: 100%;

komentarz 16 października 2016 przez niezalogowany

a to nie wyjdzie na to samo co width: 100%?

komentarz 16 października 2016 przez dewe Gaduła (4,300 p.)

nie

komentarz 16 października 2016 przez niezalogowany

Mógłbyś pokazać przykład, na którym

min-width: 100%;
 
max-width: 100%;

zadziała inaczej niż:

width: 100%;

komentarz 16 października 2016 przez dewe Gaduła (4,300 p.)

min-width i max-width jednocześnie zadziała tak samo jak width, ale mówie żeby pokombinował a nie stosował tego i tego jednocześnie :)

komentarz 16 października 2016 przez niezalogowany

Jeśli zadziała tak samo, nie ma potrzeby tworzyć takich konstrukcji.

komentarz 16 października 2016 przez Michał Wołoszyn Początkujący (380 p.)

Wprowadziłem powyższą regułkę do CSS zdjęcie wyświetlane niestety jest w ogromej rozdzielczości i rozciągnęło diva.

to samo w <script> ;/

wklejam kod, będę wdzięczny jak ktoś zerknie i pomoże bo nic mi więcej do głowy przyjść nie może :/

body
{
	background-color: #0d0d0d;
	color: #000000;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	margin: 0 !important;
}

#container
{
	width: 100%
	
}

#nav
{
	width: 100%;
	height: 60px;
	background-color: #0d0d0d;
	color: #ffffff;
}

#slider
{
	width:100%;
 	height: 650px;
	background-color: #595959;
}

#tekst
{
	background-color: #f2f2f2;
	width: 100%;
	height: 650px;
}

#stopka
{
	width: 100%;
	height: 100px;
	background-color: #0d0d0d;
	color: #ffffff;
	
}

<!DOCTYPE HTML>
<html lang="pl">

<head>
	<meta charset="utf-8" >
	<title> Fotograf Rodzinny Szczecin </title>
	<meta name="description" content=" Fotograf rodzinny w Szczecinie. Sesje studyjne, sesje plenerowe, wesela, śluby, chrzty i inne imprezy okolicznościowe." >
	<meta name="keywords" content="fotograf, Szczecin, fotografia, fotografia rodzinna, śluby" >
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
	
	<link href="style.css" rel="stylesheet" type="text/css"  />
	<link rel="stylesheet" href="css/fontello.css" type="text/css" >
	<link href='https://fonts.googleapis.com/css?family=Lato|Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css' >
	
	<script src="http://code.jquery.com/jquery-1.11.2.min.js"> </script>
		
		<script type="text/javascript" width="100%" height="650">
		
			var numer = Math.floor(Math.random()*3)+1;
			
			var timer1 = 0;
			var timer2 = 0;
			
			function ustawslajd(nrslajdu)
			{
				clearTimeout(timer1);
				clearTimeout(timer2);
				numer = nrslajdu - 1;
				
				schowaj();
				setTimeout("zmienslajd()", 500);
				
			}
			
			function schowaj()
			{
				$("#slider").fadeOut(500);
			}
		
			function zmienslajd()
			{
				numer++; if (numer>3) numer=1;
				
				var plik = "<img src=\"img/fot" + numer + ".png\" />";
				
				document.getElementById("slider").innerHTML = plik;
				$("#slider").fadeIn(500);
				
				timer1 = setTimeout("zmienslajd()", 5000);
				timer2 = setTimeout("schowaj()", 4500);
			
			}
			
		</script>
	
</head>

<body onload="zmienslajd()">

			<div id="containter"> 
							
							<div id="nav">
							
							</div>
							
							
							<div id="slider">
							
							</div>
							
							<div id="tekst">
							
							</div>
							
							<div id="stopka">
							
							</div>
							
							
			
			
			
			
			
			
			
			


			</div>
</body>
</html>

komentarz 16 października 2016 przez pablop76 VIP (123,180 p.)

Jeżeli ustawić na sztywno wysokość a szerokość na 100% to jak te slajdy maja zachować proporcje?. Albo rozciągną się i zostaną przycięte z wysokości albo będą na całą wysokość ale obcięte po szerokości. Dla img stosuje się

img{

width: 100%;

height: auto;

}

lub

img{

max-width: 100%;

height: auto;

}

żeby obrazki nie powiększały się więcej niż ich oryginalna szerokość.

komentarz 16 października 2016 przez Michał Wołoszyn Początkujący (380 p.)

Dzięki kolego ! Pomogłeś :)

Podobne pytania

0 głosów

1 odpowiedź 427 wizyt

Slider z 2 odcinka kursu JS - widoczne tło przy zmianie slajdu

pytanie zadane 15 listopada 2018 w JavaScript przez Ghost11 Początkujący (280 p.)

0 głosów

0 odpowiedzi 127 wizyt

Jak stworzyć funkcję przycisków i umieścić je na sliderze?

pytanie zadane 10 stycznia 2020 w HTML i CSS przez FilOON Użytkownik (680 p.)

0 głosów

1 odpowiedź 209 wizyt

Dlaczego numer się nie dekrementuje? (przesuwanie slajdu)

pytanie zadane 26 października 2019 w JavaScript przez Moshita Nowicjusz (180 p.)

Automatyczne dostostowanie rozmaru slajdu w sliderze js

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci