¿Cómo envolver el texto alrededor del carrusel circular en Bootstrap 4?

Envolver un carrusel circular es bastante agitado en comparación con envolver una imagen circular o cualquier forma de la imagen. En este artículo primero, tenemos que crear un carrusel para hacer esa circular, luego podemos usar el texto para envolver el carrusel. 
Primero, debe crear Bootstrap Carousel . Para hacer que ese carrusel sea circular, puede usar la propiedad border-radius de CSS . Luego escriba su texto de ajuste y use la función CSS Circle() en el div principal. Esto envolverá su carrusel circular de manera adecuada: El siguiente
ejemplo ilustra el enfoque anterior: 
Ejemplo: 
 

html

<!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>GeeksforGeeks</h1>
         
        <b>
            A Computer Science Portal
            for Geeks
        </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://media.geeksforgeeks.org/wp-content/uploads/20200120171114/logo10.png"
                            alt="" style="width:100%;">
                    </div>
 
                    <div class="item">
                        <img src=
"https://media.geeksforgeeks.org/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>
                How many times were you frustrated while
                looking out for a good collection of
                programming/ algorithm/ interview questions?
                What did you expect and what did you get?
                This portal has been created to provide well
                written, well thought and well explained
                solutions for selected questions. An IIT
                Roorkee alumnus and founder of GeeksforGeeks.
                He loves to solve programming problems in
                most efficient ways. Apart from GeeksforGeeks,
                he has worked with DE Shaw and Co. as a
                software developer and JIIT Noida as an
                assistant professor. It is a good platform
                to learn programming. It is an educational
                website. Prepare for the Recruitment drive
                of product based companies like Microsoft,
                Amazon, Adobe etc with a free online
                placement preparation course.
            </b>
        </div>
    <center>
</body>
 
</html>

Producción: 
 

Publicación traducida automáticamente

Artículo escrito por kartik arora 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *