.carousel-container { width: 1000px; position: relative; margin: auto; } .carousel-container img { max-width: 1000px; } /* Next & previous buttons */ .carousel-prev-button, .carousel-next-button { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */ .carousel-next-button { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .carousel-prev-button:hover, .carousel-next-button:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .carousel-caption { color: #f2f2f2; font-size: 15px; padding-top: 6px; padding-bottom: 6px; position: absolute; bottom: 0px; width: 1000px; text-align: center; background-color: rgba(0,0,0,0.6); } .carousel-caption-above, .carousel-caption-below { color: #000000; font-size: 15px; padding-top: 6px; padding-bottom: 6px; width: 1000px; text-align: center; } /* Number text (1/3 etc) */ .carousel-number, .carousel-number-above, .carousel-number-below { font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } .carousel-number, .carousel-number-below { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } .carousel-number-above { color: #000000; } .carousel-dots-container { text-align:center; } /* The dots/bullets/indicators */ .carousel-dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .carousel-dot-active, .carousel-dot:hover { background-color: #717171; } /* Fading animation */ .fading-slide { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fading-slide { from {opacity: .4} to {opacity: 1} } @keyframes fading-slide { from {opacity: .4} to {opacity: 1} }