WizdomWeb/public/assets/css/slider.css

38 lines
923 B
CSS

/* Slider Styles */
.slider, .carousel-inner, .carousel-item {
width: 100%;
height: 65vh;
position: relative;
overflow: hidden;
}
.slider-image {
width: 100%;
height: 65vh;
object-fit: cover;
filter: grayscale(100%);
transition: filter 0.5s ease-in-out;
}
.slider-image:hover {
filter: grayscale(0%);
}
.carousel-indicators {
bottom: 10px;
}
.carousel-indicators button {
width: 30px;
height: 10px;
border-radius: 5px;
border: none;
margin: 3px;
opacity: 0.5;
}
.carousel-indicators .active {
opacity: 1;
}
.indicator-color-1.active { background-color: #ffcc00; }
.indicator-color-2.active { background-color: #ffff66; }
.indicator-color-3.active { background-color: #0099FF; }
.indicator-color-4.active { background-color: #A3A300; }
.indicator-color-5.active { background-color: #990000; }
.indicator-color-6.active { background-color: #29527A; }