swiper
Version:
Mobile touch slider and framework with hardware accelerated transitions
97 lines (96 loc) • 1.69 kB
CSS
body,html {
position: relative;
height: 100%;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 1.5;
background: #fff;
color: #333;
}
.swiper-content {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #fff;
}
.swiper-content .inner {
padding: 20px;
}
.swiper-content h1 {
margin: 0 0 15px;
font-size: 25px;
}
.swiper-content .movie-pic {
float: left;
border-radius: 5px;
box-shadow: 0px 1px 2px #000;
width: 110px;
height: auto;
}
.swiper-content .movie-text {
margin-left: 120px;
}
.swiper-nav {
height: 95px;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: #ddd;
box-shadow: 0px 1px 3px rgba(0,0,0,0.5) inset;
}
.swiper-nav .swiper-slide {
width: 80px;
height: 95px;
text-align: center;
position: relative;
}
.swiper-nav .swiper-slide, .swiper-nav .angle {
-webkit-transition: 300ms;
-moz-transition: 300ms;
-ms-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
}
.swiper-nav .angle {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #fff;
position: absolute;
left: 50%;
margin-left: -3px;
top: -1px;
opacity: 0;
}
.swiper-nav .active-nav {
background: #bbb;
box-shadow: 0px 2px 5px rgba(0,0,0,0.8) inset;
}
.swiper-nav .active-nav .angle {
opacity: 1;
}
.swiper-nav .swiper-wrapper {
margin: 0 auto;
}
.swiper-nav img {
margin-top: 10px;
width: 60px;
height: 60px;
border-radius: 5px;
box-shadow: 0px 1px 2px #000;
}
.swiper-nav .title {
margin: 0 5px;
font-size: 10px;
font-weight: bold;
position: relative;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}