Issue
I am trying to add border-radius to the left side of the slider(exactly like on the right side).
I tried giving relative positions and z-indexes to elements, but can't make it work.
Any help would be much appreciated.
PS. Open snippet in full page.
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div id="modalx1" class="container-fluid" style="padding:60px 0 60px 0;scroll-margin:19px">
<div class="container" style="padding:0px 0 0px 0;">
<div class="row" style="background-color:transparent">
<div class="col-12">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<div style="padding:-40px;box-shadow: 0 0 20px 20px rgb(0 0 0 / 15%);border-radius:20px;">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-6 pt-0 order-2 content" data-aos="fade-left" data-aos-delay="100" style="margin:auto!important;padding:0!important;text-align: center;">
<h3 style="font-size:30px!important;font-weight: bolder;margin-bottom:20px!important">Hiho
</h3>
<span > Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
<p class="font500s" style="font-size:.85rem">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</p>
</div>
<div class="col-md-6 order-1 pt-4" data-aos="fade-right" data-aos-delay="100" style="position:relative;z-index:9;margin:auto!important;padding:0!important">
<img src="https://www.shaadidukaan.com/vogue/wp-content/uploads/2019/08/hug-kiss-images.jpg" style="position:relative;z-index:10;width: 100%;">
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Solution
Just use overflow: hidden; with border radius
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div id="modalx1" class="container-fluid" style="padding:60px 0 60px 0;scroll-margin:19px">
<div class="container" style="padding:0px 0 0px 0;">
<div class="row" style="background-color:transparent">
<div class="col-12">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<div style="padding:-40px;box-shadow: 0 0 20px 20px rgb(0 0 0 / 15%);border-radius:20px; overflow:hidden;">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-6 pt-0 order-2 content" data-aos="fade-left" data-aos-delay="100" style="margin:auto!important;padding:0!important;text-align: center;">
<h3 style="font-size:30px!important;font-weight: bolder;margin-bottom:20px!important">Hiho
</h3>
<span > Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
<p class="font500s" style="font-size:.85rem">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</p>
</div>
<div class="col-md-6 order-1 pt-4" data-aos="fade-right" data-aos-delay="100" style="position:relative;z-index:9;margin:auto!important;padding:0!important">
<img src="https://www.shaadidukaan.com/vogue/wp-content/uploads/2019/08/hug-kiss-images.jpg" style="position:relative;z-index:10;width: 100%;">
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Answered By - Rohit Verma
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.