You are here

views_slideshow_jcarousel.css in Views Slideshow JCarousel 7.2

/** Stage container **/

.connected-carousels .stage {
    margin: 20px auto;
    position: relative;
}

.connected-carousels .stage .carousel-item{
}

/** Navigation container **/

.connected-carousels .navigation {
    width: 260px;
    margin: 20px auto;
    position: relative;
}

/** Shared carousel styles **/

.connected-carousels .carousel {
    overflow: hidden;
    position: relative;
}

.connected-carousels .carousel .carousel-items-container {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.connected-carousels .carousel .carousel-item {
    float: left;
}

/** Stage carousel specific styles **/

.connected-carousels .carousel-stage {
    border: 10px solid #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 2px #999;
    -moz-box-shadow: 0 0 2px #999;
    box-shadow: 0 0 2px #999;
}

/** Navigation carousel specific styles **/

.connected-carousels .carousel-navigation {
    height: 60px;
    width: 240px;
    background: #fff;
    border: 10px solid #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 2px #999;
    -moz-box-shadow: 0 0 2px #999;
    box-shadow: 0 0 2px #999;
}

.connected-carousels .carousel-navigation .carousel-item {
    cursor: pointer;
}

.connected-carousels .carousel-navigation .carousel-item img {
    display: block;
    border: 5px solid #fff;
}

.connected-carousels .carousel-navigation .carousel-item.active img {
    border-color: #ccc;
}

/** Stage carousel controls **/

.connected-carousels .prev-stage,
.connected-carousels .next-stage {
    display: block;
    position: absolute;
    top: 0;
    width:50%;
    height:100%;
    color: #fff;
}

.connected-carousels .prev-stage {
    left: 0;
}

.connected-carousels .next-stage {
    right: 0;
}

.connected-carousels .carousel-navigation .active  {
    border-color: #ccc;
}

.connected-carousels .prev-stage.inactive,
.connected-carousels .next-stage.inactive {
    display: none;
}

.connected-carousels .prev-stage span,
.connected-carousels .next-stage span {
    display: none;
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #4E443C;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 24px/27px Arial, sans-serif;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 0 0 2px #999;
    -moz-box-shadow: 0 0 2px #999;
    box-shadow: 0 0 2px #999;
}

.connected-carousels .prev-stage span {
    left: 20px;
}

.connected-carousels .next-stage span {
    right: 20px;
}

.connected-carousels .prev-stage:hover span,
.connected-carousels .next-stage:hover span {
    display: block;
}

/** Navigation carousel controls **/

.connected-carousels .prev-navigation,
.connected-carousels .next-navigation {
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    background: #4E443C;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 16px/29px Arial, sans-serif;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 0 0 2px #999;
    -moz-box-shadow: 0 0 2px #999;
    box-shadow: 0 0 2px #999;
}

.connected-carousels .prev-navigation {
    left: -15px;
    top: 22px;
    text-indent: 6px;
}

.connected-carousels .next-navigation {
    right: -15px;
    top: 22px;
    text-indent: 20px;
}

.connected-carousels .prev-navigation.inactive,
.connected-carousels .next-navigation.inactive {
    opacity: .5;
    cursor: default;
}

File

css/views_slideshow_jcarousel.css
View source
  1. /** Stage container **/
  2. .connected-carousels .stage {
  3. margin: 20px auto;
  4. position: relative;
  5. }
  6. .connected-carousels .stage .carousel-item{
  7. }
  8. /** Navigation container **/
  9. .connected-carousels .navigation {
  10. width: 260px;
  11. margin: 20px auto;
  12. position: relative;
  13. }
  14. /** Shared carousel styles **/
  15. .connected-carousels .carousel {
  16. overflow: hidden;
  17. position: relative;
  18. }
  19. .connected-carousels .carousel .carousel-items-container {
  20. width: 20000em;
  21. position: relative;
  22. list-style: none;
  23. margin: 0;
  24. padding: 0;
  25. }
  26. .connected-carousels .carousel .carousel-item {
  27. float: left;
  28. }
  29. /** Stage carousel specific styles **/
  30. .connected-carousels .carousel-stage {
  31. border: 10px solid #fff;
  32. -webkit-border-radius: 5px;
  33. -moz-border-radius: 5px;
  34. border-radius: 5px;
  35. -webkit-box-shadow: 0 0 2px #999;
  36. -moz-box-shadow: 0 0 2px #999;
  37. box-shadow: 0 0 2px #999;
  38. }
  39. /** Navigation carousel specific styles **/
  40. .connected-carousels .carousel-navigation {
  41. height: 60px;
  42. width: 240px;
  43. background: #fff;
  44. border: 10px solid #fff;
  45. -webkit-border-radius: 5px;
  46. -moz-border-radius: 5px;
  47. border-radius: 5px;
  48. -webkit-box-shadow: 0 0 2px #999;
  49. -moz-box-shadow: 0 0 2px #999;
  50. box-shadow: 0 0 2px #999;
  51. }
  52. .connected-carousels .carousel-navigation .carousel-item {
  53. cursor: pointer;
  54. }
  55. .connected-carousels .carousel-navigation .carousel-item img {
  56. display: block;
  57. border: 5px solid #fff;
  58. }
  59. .connected-carousels .carousel-navigation .carousel-item.active img {
  60. border-color: #ccc;
  61. }
  62. /** Stage carousel controls **/
  63. .connected-carousels .prev-stage,
  64. .connected-carousels .next-stage {
  65. display: block;
  66. position: absolute;
  67. top: 0;
  68. width:50%;
  69. height:100%;
  70. color: #fff;
  71. }
  72. .connected-carousels .prev-stage {
  73. left: 0;
  74. }
  75. .connected-carousels .next-stage {
  76. right: 0;
  77. }
  78. .connected-carousels .carousel-navigation .active {
  79. border-color: #ccc;
  80. }
  81. .connected-carousels .prev-stage.inactive,
  82. .connected-carousels .next-stage.inactive {
  83. display: none;
  84. }
  85. .connected-carousels .prev-stage span,
  86. .connected-carousels .next-stage span {
  87. display: none;
  88. position: absolute;
  89. top: 50%;
  90. width: 30px;
  91. height: 30px;
  92. text-align: center;
  93. background: #4E443C;
  94. color: #fff;
  95. text-decoration: none;
  96. text-shadow: 0 0 1px #000;
  97. font: 24px/27px Arial, sans-serif;
  98. -webkit-border-radius: 30px;
  99. -moz-border-radius: 30px;
  100. border-radius: 30px;
  101. -webkit-box-shadow: 0 0 2px #999;
  102. -moz-box-shadow: 0 0 2px #999;
  103. box-shadow: 0 0 2px #999;
  104. }
  105. .connected-carousels .prev-stage span {
  106. left: 20px;
  107. }
  108. .connected-carousels .next-stage span {
  109. right: 20px;
  110. }
  111. .connected-carousels .prev-stage:hover span,
  112. .connected-carousels .next-stage:hover span {
  113. display: block;
  114. }
  115. /** Navigation carousel controls **/
  116. .connected-carousels .prev-navigation,
  117. .connected-carousels .next-navigation {
  118. display: block;
  119. position: absolute;
  120. width: 30px;
  121. height: 30px;
  122. background: #4E443C;
  123. color: #fff;
  124. text-decoration: none;
  125. text-shadow: 0 0 1px #000;
  126. font: 16px/29px Arial, sans-serif;
  127. -webkit-border-radius: 30px;
  128. -moz-border-radius: 30px;
  129. border-radius: 30px;
  130. -webkit-box-shadow: 0 0 2px #999;
  131. -moz-box-shadow: 0 0 2px #999;
  132. box-shadow: 0 0 2px #999;
  133. }
  134. .connected-carousels .prev-navigation {
  135. left: -15px;
  136. top: 22px;
  137. text-indent: 6px;
  138. }
  139. .connected-carousels .next-navigation {
  140. right: -15px;
  141. top: 22px;
  142. text-indent: 20px;
  143. }
  144. .connected-carousels .prev-navigation.inactive,
  145. .connected-carousels .next-navigation.inactive {
  146. opacity: .5;
  147. cursor: default;
  148. }