Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

_carousel.scss 4.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. // Wrapper for the slide container and indicators
  2. .carousel {
  3. position: relative;
  4. }
  5. .carousel-inner {
  6. position: relative;
  7. width: 100%;
  8. overflow: hidden;
  9. > .carousel-item {
  10. position: relative;
  11. display: none;
  12. transition: .6s ease-in-out left;
  13. // Account for jankitude on images
  14. > img,
  15. > a > img {
  16. @extend .img-fluid;
  17. line-height: 1;
  18. }
  19. // WebKit CSS3 transforms for supported devices
  20. @media all and (transform-3d), (-webkit-transform-3d) {
  21. transition: transform .6s ease-in-out;
  22. backface-visibility: hidden;
  23. perspective: 1000px;
  24. &.next,
  25. &.active.right {
  26. left: 0;
  27. transform: translate3d(100%, 0, 0);
  28. }
  29. &.prev,
  30. &.active.left {
  31. left: 0;
  32. transform: translate3d(-100%, 0, 0);
  33. }
  34. &.next.left,
  35. &.prev.right,
  36. &.active {
  37. left: 0;
  38. transform: translate3d(0, 0, 0);
  39. }
  40. }
  41. }
  42. > .active,
  43. > .next,
  44. > .prev {
  45. display: block;
  46. }
  47. > .active {
  48. left: 0;
  49. }
  50. > .next,
  51. > .prev {
  52. position: absolute;
  53. top: 0;
  54. width: 100%;
  55. }
  56. > .next {
  57. left: 100%;
  58. }
  59. > .prev {
  60. left: -100%;
  61. }
  62. > .next.left,
  63. > .prev.right {
  64. left: 0;
  65. }
  66. > .active.left {
  67. left: -100%;
  68. }
  69. > .active.right {
  70. left: 100%;
  71. }
  72. }
  73. //
  74. // Left/right controls for nav
  75. //
  76. .carousel-control {
  77. position: absolute;
  78. top: 0;
  79. bottom: 0;
  80. left: 0;
  81. width: $carousel-control-width;
  82. font-size: $carousel-control-font-size;
  83. color: $carousel-control-color;
  84. text-align: center;
  85. text-shadow: $carousel-text-shadow;
  86. opacity: $carousel-control-opacity;
  87. // We can't have this transition here because WebKit cancels the carousel
  88. // animation if you trip this while in the middle of another animation.
  89. // Set gradients for backgrounds
  90. &.left {
  91. @include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
  92. }
  93. &.right {
  94. right: 0;
  95. left: auto;
  96. @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
  97. }
  98. // Hover/focus state
  99. @include hover-focus {
  100. color: $carousel-control-color;
  101. text-decoration: none;
  102. outline: 0;
  103. opacity: .9;
  104. }
  105. // Toggles
  106. .icon-prev,
  107. .icon-next {
  108. position: absolute;
  109. top: 50%;
  110. z-index: 5;
  111. display: inline-block;
  112. width: 20px;
  113. height: 20px;
  114. margin-top: -10px;
  115. font-family: serif;
  116. line-height: 1;
  117. }
  118. .icon-prev {
  119. left: 50%;
  120. margin-left: -10px;
  121. }
  122. .icon-next {
  123. right: 50%;
  124. margin-right: -10px;
  125. }
  126. .icon-prev {
  127. &::before {
  128. content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
  129. }
  130. }
  131. .icon-next {
  132. &::before {
  133. content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
  134. }
  135. }
  136. }
  137. // Optional indicator pips
  138. //
  139. // Add an unordered list with the following class and add a list item for each
  140. // slide your carousel holds.
  141. .carousel-indicators {
  142. position: absolute;
  143. bottom: 10px;
  144. left: 50%;
  145. z-index: 15;
  146. width: 60%;
  147. padding-left: 0;
  148. margin-left: -30%;
  149. text-align: center;
  150. list-style: none;
  151. li {
  152. display: inline-block;
  153. width: 10px;
  154. height: 10px;
  155. margin: 1px;
  156. text-indent: -999px;
  157. cursor: pointer;
  158. // IE9 hack for event handling
  159. //
  160. // Internet Explorer 9 does not properly handle clicks on elements with a `background-color` of `transparent`,
  161. // so we use `rgba(0,0,0,0)` instead since it's a non-buggy equivalent.
  162. // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
  163. background-color: rgba(0,0,0,0); // IE9
  164. border: 1px solid $carousel-indicator-border-color;
  165. border-radius: 10px;
  166. }
  167. .active {
  168. width: 12px;
  169. height: 12px;
  170. margin: 0;
  171. background-color: $carousel-indicator-active-bg;
  172. }
  173. }
  174. // Optional captions
  175. //
  176. // Hidden by default for smaller viewports.
  177. .carousel-caption {
  178. position: absolute;
  179. right: 15%;
  180. bottom: 20px;
  181. left: 15%;
  182. z-index: 10;
  183. padding-top: 20px;
  184. padding-bottom: 20px;
  185. color: $carousel-caption-color;
  186. text-align: center;
  187. text-shadow: $carousel-text-shadow;
  188. .btn {
  189. text-shadow: none; // No shadow for button elements in carousel-caption
  190. }
  191. }
  192. //
  193. // Responsive variations
  194. //
  195. @include media-breakpoint-up(sm) {
  196. // Scale up the controls a smidge
  197. .carousel-control {
  198. .icon-prev,
  199. .icon-next {
  200. width: 30px;
  201. height: 30px;
  202. margin-top: -15px;
  203. font-size: 30px;
  204. }
  205. .icon-prev {
  206. margin-left: -15px;
  207. }
  208. .icon-next {
  209. margin-right: -15px;
  210. }
  211. }
  212. // Show and left align the captions
  213. .carousel-caption {
  214. right: 20%;
  215. left: 20%;
  216. padding-bottom: 30px;
  217. }
  218. // Move up the indicators
  219. .carousel-indicators {
  220. bottom: 20px;
  221. }
  222. }