Верстка "слайдера"

egoregor · February 11, 2012

Как сверстать блок с шириной 100% окна браузера, в котором есть несколько других дочерних блоков, принимающих его ширину? Из всех дочерних блоков виден только один. Это нужно для того, чтобы, например, при нажатии на кнопку дочерний блок сдвигался вбок, и стал виден второй блок.

Edited February 11, 2012 by egoregor

CharlieCruz · February 11, 2012

Чтобы сдвигать слайды нужно менять значение margin-left <ul class="gallery" style="margin-left:-100%;">

margin-left:-200% - даст нам 3-й слайд, margin-left:-700% - 8-й слайд и т.д. В данном примере может быть не больше 100 слайдов.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Project title</title>
	<style type="text/css">
		body {
			margin:0;
		}
		.slideshow {
			position:relative;
			width:100%;
			margin:100px 0;
			border:solid #000;
			border-width:10px 0;
			overflow:hidden;
		}
		.gallery {
			width:10000%;
			margin:0;
			padding:0;
			list-style:none;
			overflow:hidden;
		}
		.gallery li {
			float:left;
			width:1%;
			height:300px;
			font:60px/300px Arial, Helvetica, sans-serif;
			text-align:center;
			background:#fff;
		}
		.gallery .color-1 {background:#0f0;}
		.gallery .color-2 {background:#0ff;}
		.gallery .color-3 {background:#09c;}
		.gallery .color-4 {background:#00f;}
		.gallery .color-5 {background:#90f;}
	</style>
</head>
<body>
	<div class="slideshow">
		<ul class="gallery" style="margin-left:-100%;">
			<li class="color-1">slide 1</li>
			<li class="color-2">slide 2</li>
			<li class="color-3">slide 3</li>
			<li class="color-4">slide 4</li>
			<li class="color-5">slide 5</li>
			<li class="color-1">slide 6</li>
			<li class="color-2">slide 7</li>
			<li class="color-3">slide 8</li>
			<li class="color-4">slide 9</li>
			<li class="color-5">slide 10</li>
		</ul>
	</div>
</body>
</html>

egoregor · February 12, 2012

А как можно этот блок со списком растянуть на 100% высоты окна браузера?

За слайдер большое спасибо.

Edited February 13, 2012 by egoregor

CharlieCruz · February 13, 2012

За слайдер большое спасибо.

You are welcome ))

Чтобы растянуть слайдер на всю высоту можно всем элементам начиная с html задать height:100%. Но в таком случае если в слайдах контента будет больше чем высота окна браузера - контент будет обрезаться. В общем нужно смотреть на конкретный случай. Может это и подойдет.

Можно высоту слайдов проставлять и через js.


<style type="text/css">
		html {height:100%;}
                body {
			height:100%;
			margin:0;
                }
                .slideshow {
                        position:relative;
                        width:100%;
			height:100%;
                        overflow:hidden;
                }
                .gallery {
                        width:10000%;
			height:100%;
                        margin:0;
                        padding:0;
                        list-style:none;
                        overflow:hidden;
                }
                .gallery li {
                        float:left;
			height:100%;
                        width:1%;
                        font:60px/500px Arial, Helvetica, sans-serif;
                        text-align:center;
                        background:#fff;
                }
                .gallery .color-1 {background:#0f0;}
                .gallery .color-2 {background:#0ff;}
                .gallery .color-3 {background:#09c;}
                .gallery .color-4 {background:#00f;}
                .gallery .color-5 {background:#90f;}
        </style>

Sign In

Верстка "слайдера"

Question

egoregor

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

CharlieCruz

Link to comment

Share on other sites

egoregor

Link to comment

Share on other sites

CharlieCruz

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information