1 .GraphicSlider {2 /* layout */3 width: 500px;4 height: 200px;5 margin: auto;6 overflow: hidden;7 8 /* colors */9 border: solid black 1px;10 }11 12 .GraphicSlider-frame {13 /* layout */14 height: 100%;15 width: 300px;16 margin: auto;17 18 /* colors */19 }20 21 .GraphicSlider-position {22 /* layout */23 position: absolute;24 height: 0;25 width: inherit;26 27 /* colors */28 text-align: center;29 }30 31 .GraphicSlider-position-item {32 /* layout */33 display: inline-block;34 width: 16px;35 height: 16px;36 }37 38 .GraphicSlider-position-item.selected {39 color: red;40 }41 42 .GraphicSlider-arrow-frame {43 /* layout */44 height: inherit;45 width: 100px;46 47 /* colors */48 }49 50 .GraphicSlider-arrow-frame.left {51 /* layout */52 position: absolute;53 height: inherit;54 }55 56 .GraphicSlider-arrow-frame.right {57 /* layout */58 float: right;59 }60 61 .GraphicSlider-arrow {62 /* layout */63 position:absolute;64 height: inherit;65 width: inherit;66 67 /* colors */68 background:red;69 -ms-opacity: 0.5;70 opacity: 0.5;71 }72 73 .GraphicSlider-roll {74 /* layout */75 display: block;76 height: 100%;77 width: 100%;78 margin-left: 0;79 white-space: nowrap;80 81 /* animation */82 -o-transition: margin 0.5s ease;83 -ie-transition: margin 0.5s ease;84 -moz-transition: margin 0.5s ease;85 -webkit-transition: margin 0.5s ease;86 transition: margin 0.5s ease;87 88 /* colors */89 }90 91 .GraphicSlider-slide {92 /* layout */93 display: inline-block;94 height: 100%;95 width: 100%;96 overflow: hidden;97 98 /* colors */99 background: rgba(100, 100, 100, 0.3);100 }101 102 103 104 Este ShareCode tiene versiones:
- Graphic slider O ... (24/04/2013)
- Graphic slider O ... (24/04/2013)
- Graphic slider O ... (24/04/2013)
- Graphic slider O ... (24/04/2013)
Enlace
El enlace para compartir es: