japboy/slider.html

## slider.html
<!DOCTYPE html>
<html dir="ltr">
    <head>
        <meta charset="UTF-8">
        <style type="text/css">

body section#slider
{
    background-color: #eee;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 320px;
    height: 400px;
}

/* body section#slider div#page1 div#page2 div#page3 div#pages
   て書いたら次ページに進まなくなった。謎。*/
body section#slider div#page1 div#page2 div#pages
{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 960px;
    -webkit-transition: left .3s linear;
}

body section#slider div#page1 div#page2 div#page3 div#pages div.page
{
    float: left;
    padding: 20px;
    position: relative;
    width: 280px;
    height: 360px;
}

body section#slider div#page1:target div#page2 div#page3 div#pages
{
    background-color: #fab;
    left: 0px;
}

body section#slider div#page1 div#page2:target div#page3 div#pages
{
    background-color: #4c4;
    left: -320px;
}

body section#slider div#page1 div#page2 div#page3:target div#pages
{
    background-color: #69f;
    left: -640px;
}

        </style>
    </head>
    <body>
        <section id="slider">
            <div id="page1">
                <div id="page2">
                    <div id ="page3">
                        <div id="pages">
                            <div class="page">
                                <h1>Page 1</h1>
                                <p>Let's begin. Go on to <a href="#page2">the next page</a>.</p>
                            </div>
                            <div class="page">
                                <h1>Page 2</h1>
                                <p>Page 2. You can back to <a href="#page1">the front page</a>, or just go on to <a href="#page3">the last page</a>.</p>
                            </div>
                            <div class="page">
                                <h1>Page 3</h1>
                                <p>The last page. You can back to <a href="#page2">previous page</a>, or <a href="#page1">the front page</a>.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </body>
</html>
	<!DOCTYPE html>
	<html dir="ltr">
	<head>
	<meta charset="UTF-8">
	<style type="text/css">

	body section#slider
	{
	background-color: #eee;
	margin: auto;
	overflow: hidden;
	position: relative;
	width: 320px;
	height: 400px;
	}

	/* body section#slider div#page1 div#page2 div#page3 div#pages
	て書いたら次ページに進まなくなった。謎。*/
	body section#slider div#page1 div#page2 div#pages
	{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 960px;
	-webkit-transition: left .3s linear;
	}

	body section#slider div#page1 div#page2 div#page3 div#pages div.page
	{
	float: left;
	padding: 20px;
	position: relative;
	width: 280px;
	height: 360px;
	}

	body section#slider div#page1:target div#page2 div#page3 div#pages
	{
	background-color: #fab;
	left: 0px;
	}

	body section#slider div#page1 div#page2:target div#page3 div#pages
	{
	background-color: #4c4;
	left: -320px;
	}

	body section#slider div#page1 div#page2 div#page3:target div#pages
	{
	background-color: #69f;
	left: -640px;
	}

	</style>
	</head>
	<body>
	<section id="slider">
	<div id="page1">
	<div id="page2">
	<div id ="page3">
	<div id="pages">
	<div class="page">
	<h1>Page 1</h1>
	<p>Let's begin. Go on to <a href="#page2">the next page</a>.</p>
	</div>
	<div class="page">
	<h1>Page 2</h1>
	<p>Page 2. You can back to <a href="#page1">the front page</a>, or just go on to <a href="#page3">the last page</a>.</p>
	</div>
	<div class="page">
	<h1>Page 3</h1>
	<p>The last page. You can back to <a href="#page2">previous page</a>, or <a href="#page1">the front page</a>.</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>
	</body>
	</html>