1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31 | <section class="row">
<div class="nine columns">
<div class="coverflow top10 bot10">
<a class="prev-arrow"></a>
<a href=""><img src="https://i.imgur.com/I9SFA0sl.jpg" class="coverflow__image" /></a>
<a href=""><img src="https://i.imgur.com/gCr4ycDl.jpg" class="coverflow__image" /></a>
<a href=""><img src="https://i.imgur.com/XMS6PHsl.jpg" class="coverflow__image" /></a>
<a href=""><img src="https://i.imgur.com/w9qsfyQl.jpg" class="coverflow__image" /></a>
<a href=""><img src="https://i.imgur.com/xHwALvDl.jpg" class="coverflow__image" /></a>
<a href=""><img src="https://i.imgur.com/3sNGgkul.jpg" class="coverflow__image" /></a>
<a href=""><img src="https://i.imgur.com/Pq9Dexal.jpg" class="coverflow__image" /></a>
<a href=""><img src="https://i.imgur.com/R29XOCZl.jpg" class="coverflow__image" /></a>
<a href=""><img src="https://i.imgur.com/9GqSG9al.jpg" class="coverflow__image" /></a>
<a href=""><img src="https://i.imgur.com/KwuI9Z2l.jpg" class="coverflow__image" /></a>
<a class="next-arrow"></a>
</div></div>
</section>
<script src="https://dl.dropboxusercontent.com/s/z79ujjdn83bf9i0/3D-SLIDER.JS"></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/wruobu28zjqagce/3D-SLIDER.CSS">
<style>
.coverflow {position:relative;height:440px;padding:10px;overflow: hidden; -webkit-perspective: 1000px;perspective: 1000px;}
.coverflow__image {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select:none;width:640px;height:400px;-webkit-transition: all 350ms cubic-bezier(0.215, 0.61, 0.355, 1);transition: all 350ms cubic-bezier(0.215, 0.61, 0.355, 1);}
.coverflow__image[data-coverflow-index] {position: absolute;left: 41%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;}
.coverflow__image[data-coverflow-index]:before {content: " ";z-index: 1;position: absolute;top:440px;width:100%;height: 10%; box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);}
.prev-arrow, .next-arrow {cursor: pointer;z-index: 10;position: absolute;top: 50%;padding:20px;color: rgba(255, 255, 255, 0.7);font-size:20px;line-height:20px; background:rgba(100, 0, 0, 0.7);border-radius:10px;-webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);-webkit-transition: color 200ms, background 200ms;transition: color 200ms, background 200ms;}
.prev-arrow:hover, .next-arrow:hover, .prev-arrow:focus, .next-arrow:focus {color: rgba(255, 255, 255, 0.9);background: rgba(0, 90, 0, 0.7);}
.prev-arrow {left: 0%;}
.prev-arrow:before {content: "<";}
.next-arrow {right: 0%;}
.next-arrow:after {content: ">";}
</style>
|
