.carousel { position: relative } .carousel.pointer-event { -ms-touch-action: pan-y; touch-action: pan-y } .carousel-inner { position: relative; width: 100%; overflow: hidden } .carousel-inner::after { display: block; clear: both; content: "" } .carousel-item { position: relative; display: none; float: left; width: 100%; margin-right: -100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-transform .6s ease-in-out; transition: transform .6s ease-in-out; transition: transform .6s ease-in-out,-webkit-transform .6s ease-in-out } @media (prefers-reduced-motion:reduce) { .carousel-item { transition: none } } .carousel-item-next,.carousel-item-prev,.carousel-item.active { display: block } .active.carousel-item-right,.carousel-item-next:not(.carousel-item-left) { -webkit-transform: translateX(100%); transform: translateX(100%) } .active.carousel-item-left,.carousel-item-prev:not(.carousel-item-right) { -webkit-transform: translateX(-100%); transform: translateX(-100%) } .carousel-fade .carousel-item { opacity: 0; transition-property: opacity; -webkit-transform: none; transform: none } .carousel-fade .carousel-item-next.carousel-item-left,.carousel-fade .carousel-item-prev.carousel-item-right,.carousel-fade .carousel-item.active { z-index: 1; opacity: 1 } .carousel-fade .active.carousel-item-left,.carousel-fade .active.carousel-item-right { z-index: 0; opacity: 0; transition: 0s .6s opacity } @media (prefers-reduced-motion:reduce) { .carousel-fade .active.carousel-item-left,.carousel-fade .active.carousel-item-right { transition: none } } .carousel-control-next,.carousel-control-prev { position: absolute; top: 0; bottom: 0; z-index: 1; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; width: 15%; color: #fff; text-align: center; opacity: .5; transition: opacity .15s ease } @media (prefers-reduced-motion:reduce) { .carousel-control-next,.carousel-control-prev { transition: none } } .carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover { color: #fff; text-decoration: none; outline: 0; opacity: .9 } .carousel-control-prev { left: 0 } .carousel-control-next { right: 0 } .carousel-control-next-icon,.carousel-control-prev-icon { display: inline-block; width: 0.2rem; height: 0.2rem; background: no-repeat 50%/100% 100% } .carousel-control-prev-icon { background: url(../image/left.png) no-repeat center; } .carousel-control-next-icon { background: url(../image/right.png) no-repeat center; } .carousel-indicators { position: absolute; right: 0; bottom: 0; left: 0; z-index: 15; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; padding-left: 0; margin-right: 15%; margin-left: 15%; list-style: none } .carousel-indicators li { box-sizing: content-box; -ms-flex: 0 1 auto; flex: 0 1 auto; width: 0.3rem; height: 0.03rem; margin-right: 0.03rem; margin-left: 0.03rem; text-indent: -9.99rem; cursor: pointer; background-color: #fff; background-clip: padding-box; border-top: 0.1rem solid transparent; border-bottom: 0.1rem solid transparent; opacity: .5; transition: opacity .6s ease } @media (prefers-reduced-motion:reduce) { .carousel-indicators li { transition: none } } .carousel-indicators .active { opacity: 1 } .carousel-caption { position: absolute; right: 15%; bottom: 0.2rem; left: 15%; z-index: 10; padding-top: 0.2rem; padding-bottom: 0.2rem; color: #fff; text-align: center }