carousel.css
3.4 KB
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
/* Tiny Carousel */
#slider1 { height: 1%; overflow:hidden; padding: 0 0 10px; margin-top: 30px;}
#slider1 .viewport { float: left; width: 680px; height: 90px; overflow: hidden; position: relative; }
#slider1 .buttons { background:url("../images/buttons.png") no-repeat scroll 0 0 transparent; display: block; margin: 25px 10px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 37px; overflow: hidden; position: relative; }
#slider1 .next { background-position: 0 0; margin: 20px 0 0 10px; }
#slider1 .disable { visibility: hidden; }
#slider1 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0 top: 0; }
#slider1 .overview li{ float: left; margin: 0 20px 0 0; }
#slider1 ul.overview li img {width: 80px;}
#slider1 .pager { display: table;margin: auto; list-style: none; clear: both;}
#slider1 .pager li { float: left; }
#slider1 .pagenum {
margin:0 2px;
border:solid 3px #FFF;
background: pink;
display: inline-block;
height: 4px;
width: 4px;
text-decoration: none;
}
#slider1 .active {
margin:0 2px;
border:solid 3px #FFF;
background: red;
display: inline-block;
height: 4px;
width: 4px;
text-decoration: none;
}
/* Tiny Carousel */
#slider2 { height: 170px; overflow:hidden; padding: 0 0 10px; margin-top: 10px;}
#slider2 .viewport { float: left; width: 770px; height: 170px; overflow: hidden; position: relative; }
#slider2 .buttons { display: block; float: left; width: 20px; height: 150px; overflow: hidden; position: relative; }
#slider2 .prev { background:url("../images/arrow_left-1.png") no-repeat scroll 0 0 transparent;background-position:center; }
#slider2 .next { background:url("../images/arrow_right-1.png") no-repeat scroll 0 0 transparent; background-position:center; }
#slider2 .disable { /*visibility: hidden;*/ opacity: 0.5; }
#slider2 .overview { list-style: none; position: absolute; padding: 0; margin: 0 0 0 -3px; width: 240px; left: 0 top: 0; }
#slider2 .overview li{ width: 250px; height:170px;float: left; margin: 0 2px 0 5px; background:url("../images/offer_bg-2.png") no-repeat scroll 0 0 transparent;}
#slider2 ul.overview li img {width: 90px; float: left; margin: 0 0 0 25px;}
#slider2 ul.overview li canvas {width: 90px; float: left; margin: 0 0 0 25px;}
#slider2 ul.overview li .col { float: left; padding-left: 5px; width: 120px;}
#slider2 ul.overview li .title { font-size: 12px; height: 30px; margin: 15px 20px 5px 25px; }
#slider2 ul.overview li .title span{ vertical-align:middle; display:table-cell; height: 30px; font-weight: bold;}
#slider2 ul.overview li .desc { height: 58px;overflow: hidden;margin-bottom:6px;}
#slider2 ul.overview li .price {display: table;float: left;padding: 7px 3px 7px 3px;}
#slider2 ul.overview li .button {background:url("../images/button_offer_buy.png") no-repeat scroll 0 0 transparent; float: right;height: 28px; padding-top: 6px; text-align: center; width: 65px;margin-right: 0px;}
#slider2 .pager { display: table;margin: auto; list-style: none; clear: both;}
#slider2 .pager li { float: left; }
#slider2 .pagenum {
margin:0 2px;
border:solid 3px #FFF;
background: pink;
display: inline-block;
height: 4px;
width: 4px;
text-decoration: none;
}
#slider2 .active {
margin:0 2px;
border:solid 3px #FFF;
background: red;
display: inline-block;
height: 4px;
width: 4px;
text-decoration: none;
}