I have a bootstrap carousel in which the bootstrap "row" for each slide has a box-shadow applied. When the slide is transitioning the second slide shadow appears and doubles on top of each other (making the shadow look darker). I've tried to figure out how to apply it to a parent container so it won't show on each slide thus doubling up but have had no luck.
.row {
padding:70px !important;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 14px 40px 0 rgba(0, 0, 0, 0.15);
}
Thank you for any help.
<!DOCTYPE html>
<html lang="zxx"><head>
<!-- Meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/8ba63ee074.js" crossorigin="anonymous"></script>
</head>
<body class="background">
<div id="myCarousel" class="carousel slide carousel-fade" data-bs-theme="light">
<div class="carousel-inner">
<img src="./img/pattern-quotes.svg" class="quote"/>
<div class="carousel-item active">
<div class="container">
<div class="carousel-caption text-start">
<div class="row">
<img src="./img/pattern-curve.svg" class="curve"/>
<div class="col-xs-12 col-md-6">
<div class="carousel-content">
<p class="carousel-desc-txt quote-text">" I've been interested in coding for a while but never taken the jump, until now. I couldn't recommend this course enough. I'm now in the job of my dreams and so excited about the future. "</p>
<div class="carousel-desc-txt first-name">
Tanya Sinclair <span class="last-name">UX Engineer</span>
</div>
</div>
</div>
<!-- Carousel Image -->
<div class="col-xs-12 col-md-6">
<div class="position-relative h-100">
<div class="carousel-media">
<img src="./img/tanya-sinclair.jpg" alt="Tanya Sinclair Photo" class="carousel-img">
<div class="nav-container">
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<i style="color: #202046; padding-top: 13px;" class="fa-solid fa-chevron-left"></i>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<i style="color: #202046; padding-top: 13px" class="fa-solid fa-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="carousel-caption text-start">
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="carousel-content">
<p class="carousel-desc-txt quote-text">" If you want to lay the best foundation possible I'd recommend taking this course. The depth the instructors go into is incredible. I now feel so confident about starting up as a professional developer. "</p>
<div class="carousel-desc-txt first-name">
John Tarkpor <span class="last-name">Junior Front-end Developer</span>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="position-relative h-100">
<div class="carousel-media">
<img src="./img/john-tarkpor.jpg" alt="John Tarkpor Photo" class="carousel-img">
<div class="nav-container">
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<i style="color: #202046; padding-top: 13px" class="fa-solid fa-chevron-left"></i>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<i style="color: #202046; padding-top: 13px" class="fa-solid fa-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScripts -->
<script src="./js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
jQuery(document).bind('keyup', function(e) {
if (e.keyCode==39) {
jQuery('a.carousel-control.right').trigger('click');
}
else if(e.keyCode==37){
jQuery('a.carousel-control.left').trigger('click');
}
});
</script>
</body>
</html>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
body {
font-family: "Inter", system-ui;
font-weight: 300;
font-style: normal;
background-color: #ffffff;
position: relative;
}
.background {
background: url("../img/background.png") ;
background-repeat:no-repeat;
background-size:cover;
background-position:center;;
}
.nav-container {
width:100px;
height: 20px;
background-color: #ffffff;
border: 2px;
border-radius: 25px;
position: absolute;
left: 20%;
bottom:4%;
z-index: 2;
padding: 25px
}
.curve {
height: 130px;
display:block;
position:absolute;
left:0;
bottom:0;
margin:auto;
width: auto;
}
.quote {
display:block;
position:absolute;
left:26%;
bottom:58%;
margin:auto;
width: 110px;
z-index: 2;
}
.first-name {
font-size: 18px;
padding-top:15px;
color:#202046;
font-weight:700;
line-height: 2
}
.last-name {
color:#babacf;
font-weight:500;
font-size: 18px;
}
.abstract {
display:block;
position:absolute;
left:-11%;
bottom:-8%;
margin:auto;
z-index: 1;
}
.carousel {
min-height: 100vh;
position: relative;
z-index: 1;
}
.carousel-control-next,
.carousel-control-prev {
width: auto;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
text-transform: uppercase;
font-weight: bold;
font-size: 1.15rem;
letter-spacing: .5rem;
opacity: 1;
}
.carousel-control-prev {
left: 1rem;
}
.carousel-control-next {
right: 1rem;
}
.carousel-caption {
padding: 0;
bottom: 0;
top: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 10;
position: relative;
left: 0;
right: 0;
min-height: 100vh;
}
.carousel-inner {
overflow-y: auto;
}
.carousel-inner,
.carousel-item {
height: 100%;
}
/* transitions */
.carousel-img {
-webkit-transform: translate3d(100px,0,0);
transform: translate3d(100px,0,0);
-webkit-transition: opacity 3s cubic-bezier(.175,.885,.32,1.275), -webkit-transform .8s cubic-bezier(.175,.885,.32,.1);
transition: opacity 3s cubic-bezier(.175,.885,.32,1.275), -webkit-transform .8s cubic-bezier(.175,.885,.32,.1);
-o-transition: opacity 3s cubic-bezier(.175,.885,.32,1.275), transform .8s cubic-bezier(.175,.885,.32,.1);
transition: opacity 3s cubic-bezier(.175,.885,.32,1.275), transform .8s cubic-bezier(.175,.885,.32,.1);
transition: opacity 3s cubic-bezier(.175,.885,.32,1.275), transform .8s cubic-bezier(.175,.885,.32,.1), -webkit-transform .8s cubic-bezier(.175,.885,.32,.1);
}
.carousel-fade .carousel-item {
opacity: 0;
display: block;
}
.carousel-item-next.carousel-item-start .carousel-img,
.carousel-item-prev.carousel-item-end .carousel-img,
.carousel-item.active .carousel-img {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.active.carousel-item-start .carousel-img,
.active.carousel-item-end .carousel-img {
opacity: 0;
-webkit-transform: translate3d(100px,0,0);
transform: translate3d(100px,0,0);
}
.carousel-desc-txt {
-webkit-transform: translate3d(300px,0,0);
transform: translate3d(300px,0,0);
-webkit-transition: opacity 1s cubic-bezier(.175,.885,.32,1.275), -webkit-transform 1s cubic-bezier(.175,.885,.32,1.275);
transition: opacity 1s cubic-bezier(.175,.885,.32,1.275), -webkit-transform 1s cubic-bezier(.175,.885,.32,1.275);
-o-transition: opacity 1s cubic-bezier(.175,.885,.32,1.275), transform 1s cubic-bezier(.175,.885,.32,1.275);
transition: opacity 1s cubic-bezier(.175,.885,.32,1.275), transform 1s cubic-bezier(.175,.885,.32,1.275);
transition: opacity 1s cubic-bezier(.175,.885,.32,1.275), transform 1s cubic-bezier(.175,.885,.32,1.275), -webkit-transform 1s cubic-bezier(.175,.885,.32,1.275);
}
.carousel-item-next.carousel-item-start .carousel-desc-txt,
.carousel-item-prev.carousel-item-end .carousel-desc-txt,
.carousel-item.active .carousel-desc-txt {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.active.carousel-item-start .carousel-desc-txt,
.active.carousel-item-end .carousel-desc-txt {
opacity: 0;
-webkit-transform: translate3d(100px,0,0);
transform: translate3d(100px,0,0);
}
.carousel-caption > .row {
position: relative;
width: 100%;
height: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #ffffff
}
.carousel-caption > .row > div {
height: 100%;
}
.carousel-media {
position: relative;
height: 100%;
}
.carousel-img {
max-width: 100%;
z-index: 1;
position: relative;
}
.carousel-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
padding-left:19%;
padding-top: 45px;
}
.quote-text {
font-size: 2rem;
margin-bottom: 0;
color: #202046;
width: 607px;
letter-spacing: .5px;
line-height: 1.35;
z-index: 2;
position: relative
}
.row {
padding:70px !important;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 14px 40px 0 rgba(0, 0, 0, 0.15);
}
/* responsive */
@media only screen and (max-width: 1199px) {
.carousel-control-prev {
left: 1.5rem;
}
.carousel-control-next {
right: 1.5rem;
}
.carousel-content {
padding-left: 2rem;
}
}
@media only screen and (max-width: 992px) {
.quote-text {
font-size: 1.2rem;
width: 400px;
}
.quote {
width: 75px;
}
}
@media only screen and (max-width: 768px){
.quote-text {
font-size: 1.1rem;
width: 100%;
text-align: center;
}
.carousel-caption .row {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.carousel-content {
margin-top: 4rem;
padding: 0 1rem;
}
.quote {
width: 65px;
left: 43%;
bottom: 33%;
}
.carousel-desc-txt {
text-align: center;
}
.first-name {
font-size: 16px;
width:100%;
display:block;
line-height: 1.35
}
.last-name {
font-size: 16px;
width: 100%;
display: block
}
.nav-container {
left: 37%;
bottom:3%;
}
.carousel-control-prev {
left: .8rem;
}
.carousel-control-next {
right: .8rem;
}
.curve {
height: 60px;
left: -3%;
bottom: -7%
}
.carousel-media {
width:90%;
margin: 0 auto
}
.row {
padding:0px !important;
box-shadow: none;
}
}
</style>
I've tried applying the shadow to a div outside of the carousel itself so it won't double but have had no luck.
