Wrapping up a circular carousel is quite hectic compared to wrapping up a circular image or any shape of the image. In this article first, we have to create a carousel to make that circular, then we can use the text to wrap the carousel.
First, we have to create Bootstrap Carousel. To make that carousel circular we can use CSS border-radius property. Then write down our wrapping text and use the CSS Circle() function on the main div. This will adequately wrap our circular carousel:
The below example illustrates the above approach:
Example Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to wrap text around circular
carousel in Bootstrap 4 ?
</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<style>
h1{
color: green;
}
.container {
margin: 15px 10px 0px;
width: 200px;
height: 200px;
float: left;
shape-outside: circle();
}
.carousel {
border-radius: 50% ;
overflow: hidden;
}
.text {
font-size: 18px;
text-align: justify;
margin: 0px 15px;
}
</style>
</head>
<body>
<center>
<h1>Lorem Ipsum</h1>
<b>
Random Text
</b>
<div class="container">
<div id="myCarousel"
class="carousel slide"
data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel"
data-slide-to="0" class="active"></li>
<li data-target="#myCarousel"
data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src=
"https://wp-content/uploads/20200120171114/logo10.png"
alt="" style="width:100%;">
</div>
<div class="item">
<img src=
"https://wp-content/uploads/20200120152724/gfg_icon.png"
alt="" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control"
href="#myCarousel" >
</a>
<a class="right carousel-control"
href="#myCarousel" >
</a>
</div>
</div>
<div class="text">
<b>
In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
</b>
</div>
<center>
</body>
</html>