src/scss/bootstrap-4.0.0-alpha.6/scss/_carousel.scss

   1 // Wrapper for the slide container and indicators
   2 .carousel {
   3   position: relative;
   4 }
   5
   6 .carousel-inner {
   7   position: relative;
   8   width: 100%;
   9   overflow: hidden;
  10 }
  11
  12 .carousel-item {
  13   position: relative;
  14   display: none;
  15   width: 100%;
  16
  17   @include if-supports-3d-transforms() {
  18     @include transition($carousel-transition);
  19     backface-visibility: hidden;
  20     perspective: 1000px;
  21   }
  22 }
  23
  24 .carousel-item.active,
  25 .carousel-item-next,
  26 .carousel-item-prev {
  27   display: flex;
  28 }
  29
  30 .carousel-item-next,
  31 .carousel-item-prev {
  32   position: absolute;
  33   top: 0;
  34 }
  35
  36 // CSS3 transforms when supported by the browser
  37 @include if-supports-3d-transforms() {
  38   .carousel-item-next.carousel-item-left,
  39   .carousel-item-prev.carousel-item-right {
  40     transform: translate3d(0, 0, 0);
  41   }
  42
  43   .carousel-item-next,
  44   .active.carousel-item-right {
  45     transform: translate3d(100%, 0, 0);
  46   }
  47
  48   .carousel-item-prev,
  49   .active.carousel-item-left {
  50     transform: translate3d(-100%, 0, 0);
  51   }
  52 }
  53
  54
  55 //
  56 // Left/right controls for nav
  57 //
  58
  59 .carousel-control-prev,
  60 .carousel-control-next {
  61   position: absolute;
  62   top: 0;
  63   bottom: 0;
  64   // Use flex for alignment (1-3)
  65   display: flex; // 1. allow flex styles
  66   align-items: center; // 2. vertically center contents
  67   justify-content: center; // 3. horizontally center contents
  68   width: $carousel-control-width;
  69   color: $carousel-control-color;
  70   text-align: center;
  71   opacity: $carousel-control-opacity;
  72   // We can't have a transition here because WebKit cancels the carousel
  73   // animation if you trip this while in the middle of another animation.
  74
  75   // Hover/focus state
  76   @include hover-focus {
  77     color: $carousel-control-color;
  78     text-decoration: none;
  79     outline: 0;
  80     opacity: .9;
  81   }
  82 }
  83 .carousel-control-prev {
  84   left: 0;
  85 }
  86 .carousel-control-next {
  87   right: 0;
  88 }
  89
  90 // Icons for within
  91 .carousel-control-prev-icon,
  92 .carousel-control-next-icon {
  93   display: inline-block;
  94   width: $carousel-control-icon-width;
  95   height: $carousel-control-icon-width;
  96   background: transparent no-repeat center center;
  97   background-size: 100% 100%;
  98 }
  99 .carousel-control-prev-icon {
 100   background-image: $carousel-control-prev-icon-bg;
 101 }
 102 .carousel-control-next-icon {
 103   background-image: $carousel-control-next-icon-bg;
 104 }
 105
 106
 107 // Optional indicator pips
 108 //
 109 // Add an ordered list with the following class and add a list item for each
 110 // slide your carousel holds.
 111
 112 .carousel-indicators {
 113   position: absolute;
 114   right: 0;
 115   bottom: 10px;
 116   left: 0;
 117   z-index: 15;
 118   display: flex;
 119   justify-content: center;
 120   padding-left: 0; // override <ol> default
 121   // Use the .carousel-control's width as margin so we don't overlay those
 122   margin-right: $carousel-control-width;
 123   margin-left: $carousel-control-width;
 124   list-style: none;
 125
 126   li {
 127     position: relative;
 128     flex: 1 0 auto;
 129     max-width: $carousel-indicator-width;
 130     height: $carousel-indicator-height;
 131     margin-right: $carousel-indicator-spacer;
 132     margin-left: $carousel-indicator-spacer;
 133     text-indent: -999px;
 134     cursor: pointer;
 135     background-color: rgba($carousel-indicator-active-bg, .5);
 136
 137     // Use pseudo classes to increase the hit area by 10px on top and bottom.
 138     &::before {
 139       position: absolute;
 140       top: -10px;
 141       left: 0;
 142       display: inline-block;
 143       width: 100%;
 144       height: 10px;
 145       content: "";
 146     }
 147     &::after {
 148       position: absolute;
 149       bottom: -10px;
 150       left: 0;
 151       display: inline-block;
 152       width: 100%;
 153       height: 10px;
 154       content: "";
 155     }
 156   }
 157
 158   .active {
 159     background-color: $carousel-indicator-active-bg;
 160   }
 161 }
 162
 163
 164 // Optional captions
 165 //
 166 //
 167
 168 .carousel-caption {
 169   position: absolute;
 170   right: ((100% - $carousel-caption-width) / 2);
 171   bottom: 20px;
 172   left: ((100% - $carousel-caption-width) / 2);
 173   z-index: 10;
 174   padding-top: 20px;
 175   padding-bottom: 20px;
 176   color: $carousel-caption-color;
 177   text-align: center;
 178 }