Slideshow component

* {
	margin:0;
	padding:0;
}
body {
	background:#7F8C8D;
	font-family:"Helvetica Neue",sans-serif;
	color:rgba(255,255,255,.8);
	text-align:center;
}
h1 {
	font-size:42px;
	margin:30px auto;
}
#slideshow {
	width:980px;
	height:450px;
	overflow:hidden;
	margin:0 auto;
	position:relative;
}
#slideshow ul,#slideshow ul li,#slideshow-nav {
	list-style:none;
	position:absolute;
}
#slideshow-nav {
	width:100%;
	bottom:20px;
	text-align:center;
}
#slideshow-nav span {
	display:inline-block;
	border-radius:50%;
	width:15px;
	height:15px;
	font-size:0;
	background:rgba(255,255,255,.3);
	transition:all .5s;
	-webkit-transition:all .5s;
	margin:0 7px;
	cursor:pointer;
	user-select:none;
	/*使圆点不能被选中*/
	-webkit-user-select:none;
}
#slideshow-nav span.active {
	background:#FFF;
}
#slideshow,ul,li,img {
	width:980px;
} 
@media screen and (max-width:979px) {
	#slideshow,ul,li,img {
	width:100%;
}
}