You are here

jquery-carousel-default.css in jQuery carousel 7

Same filename and directory in other branches
  1. 8 jcarousel-themes/default/jquery-carousel-default.css
.preview-section .rs-carousel-horizontal {
  width: 500px;
}

#container {
  position: relative;
  width: 80%;
}

/* carousel */
.rs-carousel {
  overflow: hidden;
  display: inline-block;
}

.rs-carousel .rs-carousel-mask {
  position: relative;
  overflow: hidden;
  border: 6px solid #444;
}

.rs-carousel .rs-carousel-runner {
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}

.no-js .rs-carousel .rs-carousel-runner {
  position: static;
}

.rs-carousel .rs-carousel-item {
  float: left;
  width: 150px;
  height: 150px;
  color: #fff;
  font-size: 8em;
  text-align: center;
  margin: 0;
}

.rs-carousel.rs-carousel-vertical .rs-carousel-item {
  float: none;
}

/* pagination */
.rs-carousel-pagination {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rs-carousel-disabled .rs-carousel-pagination {
  display: none;
}

.rs-carousel-pagination-link {
  display: inline;
}

.rs-carousel-pagination-link a {
  padding: 2px 6px;
}

.rs-carousel-pagination-link a:hover {
  text-decoration: none;
}

.rs-carousel-pagination-link-active a {
  background: #444;
  color: #fff;
}

/* next & prev actions */
.rs-carousel-disabled .rs-carousel-action-next,
.rs-carousel-disabled .rs-carousel-action-prev {
  display: none;
}

.rs-carousel-action-disabled {
  color: gray;
  cursor: default;
}

/** my carousel 1 **/

/** horizontal **/
#my-carousel-1 .rs-carousel-mask {
  height: 150px;
}

/** items per page **/
#my-carousel-1.rs-carousel-items-1 .rs-carousel-mask {
  width: 150px;
}

#my-carousel-1.rs-carousel-items-2 .rs-carousel-mask {
  width: 300px;
}

#my-carousel-1.rs-carousel-items-3 .rs-carousel-mask {
  width: 450px;
}

#my-carousel-1.rs-carousel-items-4 .rs-carousel-mask {
  width: 600px;
}

/** vertical **/
#my-carousel-1.rs-carousel-vertical .rs-carousel-mask {
  width: 150px;
}

/** items per page **/
#my-carousel-1.rs-carousel-vertical.rs-carousel-items-1 .rs-carousel-mask {
  height: 150px;
}

#my-carousel-1.rs-carousel-vertical.rs-carousel-items-2 .rs-carousel-mask {
  height: 300px;
}

#my-carousel-1.rs-carousel-vertical.rs-carousel-items-3 .rs-carousel-mask {
  height: 450px;
}

#my-carousel-1.rs-carousel-vertical.rs-carousel-items-4 .rs-carousel-mask {
  height: 600px;
}

.color-1 {
  background: #007cd2;
}
.color-2 {
  background: #1788d7;
}
.color-3 {
  background: #3798db;
}
.color-4 {
  background: #62acdf;
}
.color-5 {
  background: #86bbe0;
}
.color-6 {
  background: #a7c7de;
}
.color-7 {
  background: #d5dbdf;
}

.rs-carousel-cloned {
  background: red;
}

.field,
.actions {
  margin: 20px;
}

.action-set .action {
  display: inline;
}

ul.base,
ol.base {
  list-style: none;
  padding: 0;
}

.rs-carousel.rs-carousel-vertical .rs-carousel-mask {
  width: 150px;
  height: 500px;
}

File

jcarousel-themes/default/jquery-carousel-default.css
View source
  1. .preview-section .rs-carousel-horizontal {
  2. width: 500px;
  3. }
  4. #container {
  5. position: relative;
  6. width: 80%;
  7. }
  8. /* carousel */
  9. .rs-carousel {
  10. overflow: hidden;
  11. display: inline-block;
  12. }
  13. .rs-carousel .rs-carousel-mask {
  14. position: relative;
  15. overflow: hidden;
  16. border: 6px solid #444;
  17. }
  18. .rs-carousel .rs-carousel-runner {
  19. overflow: hidden;
  20. margin: 0;
  21. padding: 0;
  22. list-style: none;
  23. }
  24. .no-js .rs-carousel .rs-carousel-runner {
  25. position: static;
  26. }
  27. .rs-carousel .rs-carousel-item {
  28. float: left;
  29. width: 150px;
  30. height: 150px;
  31. color: #fff;
  32. font-size: 8em;
  33. text-align: center;
  34. margin: 0;
  35. }
  36. .rs-carousel.rs-carousel-vertical .rs-carousel-item {
  37. float: none;
  38. }
  39. /* pagination */
  40. .rs-carousel-pagination {
  41. list-style: none;
  42. margin: 0;
  43. padding: 0;
  44. }
  45. .rs-carousel-disabled .rs-carousel-pagination {
  46. display: none;
  47. }
  48. .rs-carousel-pagination-link {
  49. display: inline;
  50. }
  51. .rs-carousel-pagination-link a {
  52. padding: 2px 6px;
  53. }
  54. .rs-carousel-pagination-link a:hover {
  55. text-decoration: none;
  56. }
  57. .rs-carousel-pagination-link-active a {
  58. background: #444;
  59. color: #fff;
  60. }
  61. /* next & prev actions */
  62. .rs-carousel-disabled .rs-carousel-action-next,
  63. .rs-carousel-disabled .rs-carousel-action-prev {
  64. display: none;
  65. }
  66. .rs-carousel-action-disabled {
  67. color: gray;
  68. cursor: default;
  69. }
  70. /** my carousel 1 **/
  71. /** horizontal **/
  72. #my-carousel-1 .rs-carousel-mask {
  73. height: 150px;
  74. }
  75. /** items per page **/
  76. #my-carousel-1.rs-carousel-items-1 .rs-carousel-mask {
  77. width: 150px;
  78. }
  79. #my-carousel-1.rs-carousel-items-2 .rs-carousel-mask {
  80. width: 300px;
  81. }
  82. #my-carousel-1.rs-carousel-items-3 .rs-carousel-mask {
  83. width: 450px;
  84. }
  85. #my-carousel-1.rs-carousel-items-4 .rs-carousel-mask {
  86. width: 600px;
  87. }
  88. /** vertical **/
  89. #my-carousel-1.rs-carousel-vertical .rs-carousel-mask {
  90. width: 150px;
  91. }
  92. /** items per page **/
  93. #my-carousel-1.rs-carousel-vertical.rs-carousel-items-1 .rs-carousel-mask {
  94. height: 150px;
  95. }
  96. #my-carousel-1.rs-carousel-vertical.rs-carousel-items-2 .rs-carousel-mask {
  97. height: 300px;
  98. }
  99. #my-carousel-1.rs-carousel-vertical.rs-carousel-items-3 .rs-carousel-mask {
  100. height: 450px;
  101. }
  102. #my-carousel-1.rs-carousel-vertical.rs-carousel-items-4 .rs-carousel-mask {
  103. height: 600px;
  104. }
  105. .color-1 {
  106. background: #007cd2;
  107. }
  108. .color-2 {
  109. background: #1788d7;
  110. }
  111. .color-3 {
  112. background: #3798db;
  113. }
  114. .color-4 {
  115. background: #62acdf;
  116. }
  117. .color-5 {
  118. background: #86bbe0;
  119. }
  120. .color-6 {
  121. background: #a7c7de;
  122. }
  123. .color-7 {
  124. background: #d5dbdf;
  125. }
  126. .rs-carousel-cloned {
  127. background: red;
  128. }
  129. .field,
  130. .actions {
  131. margin: 20px;
  132. }
  133. .action-set .action {
  134. display: inline;
  135. }
  136. ul.base,
  137. ol.base {
  138. list-style: none;
  139. padding: 0;
  140. }
  141. .rs-carousel.rs-carousel-vertical .rs-carousel-mask {
  142. width: 150px;
  143. height: 500px;
  144. }