Slider 12

Home » Components » Slider » Slider 12

Slider 12


/* ===== Slider 12 ===== */

#slider-12 .carousel-item {
	padding-top: 100px;
	padding-bottom: 140px;
	background: rgba(255, 193, 7, 0.3);
	-webkit-transition: all .1s;
	-o-transition: all .1s;
	transition: all .1s;
}

#slider-12 .carousel-item:nth-child(2) {
	background: rgba(40, 167, 69, 0.3);
}

#slider-12 .carousel-item:nth-child(3) {
	background: rgba(0, 123, 255, 0.3)
}

#slider-12 .carousel-item:nth-child(4) {
	background: rgba(111, 66, 193, 0.3)
}

#slider-12 .carousel-item h2 {
	font-weight: 900
}

#slider-12 .row .col-12:first-child .card {
	-webkit-transform: translatey(100%);
	-ms-transform: translatey(100%);
	transform: translatey(100%);
	-webkit-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
	border: none;
	opacity: 0;
	background: transparent;
}

#slider-12 .active .row .col-12:first-child .card {
	-webkit-transform: translatey(0%);
	-ms-transform: translatey(0%);
	transform: translatey(0%);
	opacity: 1;
}

#slider-12 .row .col-12 img {
	-webkit-transform: translatex(100%);
	-ms-transform: translatex(100%);
	transform: translatex(100%);
	-webkit-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
	border: none;
	opacity: 0;
	background: transparent;
}

#slider-12 .active .row .col-12 img {
	-webkit-transform: translatex(0%);
	-ms-transform: translatex(0%);
	transform: translatex(0%);
	opacity: 1;
}

#slider-12 i {
	font-size: 24px;
	margin-right: .5rem;
}

#slider-12 .icons {
         position: absolute;
         width: 100%;
         z-index: 999;
         bottom: 20px;
}