"carousel two columns"
Bootstrap 4.1.1 Snippet by kekknka

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="main"> <div class="container"> <div class="row"> <div class="col-md-12"> <div id="MiCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#MiCarousel" data-slide-to="0" class="carousel-pagination active"></li> <li data-target="#MiCarousel" data-slide-to="1" class="carousel-pagination"></li> <li data-target="#MiCarousel" data-slide-to="2" class="carousel-pagination"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <div class="row"> <div class="col-md-6 div-l"> <div class="carousel-img" style="background-image: url(https://cdn.pixabay.com/photo/2016/11/19/14/00/code-1839406_960_720.jpg);"> <h1 class="carousel-title">Tecnologia</h1> </div> </div> <div class="col-md-6 div-r"> <h3>Subtitulo 1</h3> <hr> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A tenetur officiis voluptatem vel blanditiis. Nam enim quidem debitis aliquid maxime perferendis repudiandae similique, explicabo, quam minus tenetur cupiditate maiores ea.</p> <button class="btn btn-primary">Presiona el boton</button> </div> </div> </div> <div class="carousel-item"> <div class="row"> <div class="col-md-6 div-l"> <div class="carousel-img" style="background-image: url(https://cdn.pixabay.com/photo/2017/11/10/15/04/steak-2936531_960_720.jpg);"> <h1 class="carousel-title">Gastronomia</h1> </div> </div> <div class="col-md-6 div-r"> <h3>Subtitulo 2</h3> <hr> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A tenetur officiis voluptatem vel blanditiis. Nam enim quidem debitis aliquid maxime perferendis repudiandae similique, explicabo, quam minus tenetur cupiditate maiores ea.</p> <button class="btn btn-primary">Presiona otro boton</button> </div> </div> </div> <div class="carousel-item"> <div class="row"> <div class="col-md-6 div-l"> <div class="carousel-img" style="background-image: url(https://cdn.pixabay.com/photo/2016/01/22/16/42/eiffel-tower-1156146_960_720.jpg);"> <h1 class="carousel-title">Cultura</h1> </div> </div> <div class="col-md-6 div-r"> <h3>Subtitulo 2</h3> <hr> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A tenetur officiis voluptatem vel blanditiis. Nam enim quidem debitis aliquid maxime perferendis repudiandae similique, explicabo, quam minus tenetur cupiditate maiores ea.</p> <button class="btn btn-primary">Presiona otro boton</button> </div> </div> </div> </div> <a class="carousel-control-prev carousel-controls" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next carousel-controls" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> </div> </div>
body{ font-family: 'Roboto', sans-serif; } #MiCarousel{ margin-top: 30px; margin-bottom: 30px; -webkit-box-shadow: 10px 10px 38px -13px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 38px -13px rgba(0,0,0,0.75); box-shadow: 10px 10px 38px -13px rgba(0,0,0,0.75); } .carousel-img{ background-color: #000; color: #fff; background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; position: absolute; z-index: 2; -webkit-clip-path: polygon(0 0, 96% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%); opacity: 0.8; } .div-r{ padding: 40px; } .carousel-title{ font-size: 80px; font-weight: bold; margin-left: 20px; margin-top: 20px; } .carousel-pagination{ background-color: #000 !important; width: 15px !important; height: 15px !important; border-radius: 100%; position: relative; bottom: -50px; opacity: 0.5; } .carousel-pagination.active{ opacity: 1; } .carousel-controls{ display: none; }

Related: See More


Questions / Comments:

Hi, any responsive version for mobile ?

Grandroot () - 2 years ago - Reply 0