Untitled

dabblet.css

*{
	margin:0;
	padding:0;
}
#page1{
	display:inline-block;
		width:670px;
		height:120px;
		background:green;
}
#page2{
	display:inline-block;
		width:670px;
		height:120px;
		background:yellow;
}
#page3{
	display:inline-block;
		width:670px;
		height:120px;
		background:orange;
}
#page4{
	display:inline-block;
		width:670px;
		height:120px;
		background:white;
}
#page5{
	display:inline-block;
		width:670px;
		height:120px;
		background:brown;
}
	
	#truc{
		background:Red;
		width:650px;
		height:400px;
		padding:10px;
		overflow:hidden;
	}
	#slide{
		width:10000px;
		height:380px;
		padding:10px;
		background:black;
	}
	#G:active ~ #truc #slide{
		background:green;
		margin-left:-400px;
	}
	
	#b1, #b2, #b3, #b4, #b5{
		display:inline-block;
		width:50px;
		height:50px;
		background:blue;
		
	}
	a{
		color:white;
	}

dabblet.html

 <ul>
 	
    <li id="truc">
    <ul>
    	<ul id="slide">
        	<li id="page1"></li>
            <li id="page2"></li>
            <li id="page3"></li>
            <li id="page4"></li>
            <li id="page5"></li>
            
            </ul>
    </ul>
    </li><!--fin truc-->
    <li id="b1"><a href="#page1">page 1</a></li>
 	<li id="b2"><a href="#page2">page 2</a></li>
    <li id="b3"><a href="#page3">page 3</a></li>
    <li id="b4"><a href="#page4">page 4</a></li>
    <li id="b5"><a href="#page5">page 5</a></li>
 </ul>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}