"PROWEB"
Bootstrap 4.1.1 Snippet by Junnel

Post to Facebook Tweet this

<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 ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <body> <div class="navbar navfar"> <a href="#"><i class="fa fa-instagram bisc"></i><span class="mini"></span></a> </div> <!-- Page Content --> <div class="container page-top"> <div class="container"> <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000"> <div class="carousel-inner row w-100 mx-auto" role="listbox"> <div class="carousel-item col-md-3 active"> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src="https://images.pexels.com/photos/907267/pexels-photo-907267.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/907267/pexels-photo-907267.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>Diane</h3> </a> </div> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src="https://images.pexels.com/photos/1036628/pexels-photo-1036628.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/1036628/pexels-photo-1036628.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>John Doe</h3> </a> </div> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src=" https://images.pexels.com/photos/761963/pexels-photo-761963.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/774095/pexels-photo-774095.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>Margaret E</h3> </a> </div> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src="https://images.pexels.com/photos/452738/pexels-photo-452738.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/372042/pexels-photo-372042.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>Dolor</h3> </a> </div> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src="https://images.pexels.com/photos/843256/pexels-photo-843256.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/326559/pexels-photo-326559.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>Mr.Lorem</h3> </a> </div> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src="https://images.pexels.com/photos/119972/pexels-photo-119972.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/846741/pexels-photo-846741.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>Dipendra</h3> </a> </div> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src="https://images.pexels.com/photos/274011/pexels-photo-274011.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/375880/pexels-photo-375880.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>Paul</h3> </a> </div> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src="https://images.pexels.com/photos/734725/pexels-photo-734725.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/211050/pexels-photo-211050.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>Ipsum</h3> </a> </div> </div> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExample" 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 text-faded" href="#carouselExample" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </body>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <body> <div class="navbar navfar"> <a href="#"><i class="fa fa-instagram bisc"></i><span class="mini"></span></a> </div> <!-- Page Content --> <div class="container page-top"> <div class="container"> <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000"> <div class="carousel-inner row w-100 mx-auto" role="listbox"> <div class="carousel-item col-md-3 active"> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src="https://images.pexels.com/photos/907267/pexels-photo-907267.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/907267/pexels-photo-907267.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>Diane</h3> </a> </div> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src="https://images.pexels.com/photos/1036628/pexels-photo-1036628.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/1036628/pexels-photo-1036628.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>John Doe</h3> </a> </div> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src=" https://images.pexels.com/photos/761963/pexels-photo-761963.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/774095/pexels-photo-774095.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>Margaret E</h3> </a> </div> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src="https://images.pexels.com/photos/452738/pexels-photo-452738.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/372042/pexels-photo-372042.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>Dolor</h3> </a> </div> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src="https://images.pexels.com/photos/843256/pexels-photo-843256.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/326559/pexels-photo-326559.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>Mr.Lorem</h3> </a> </div> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src="https://images.pexels.com/photos/119972/pexels-photo-119972.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/846741/pexels-photo-846741.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>Dipendra</h3> </a> </div> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src="https://images.pexels.com/photos/274011/pexels-photo-274011.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/375880/pexels-photo-375880.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>Paul</h3> </a> </div> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src="https://images.pexels.com/photos/734725/pexels-photo-734725.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/211050/pexels-photo-211050.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>Ipsum</h3> </a> </div> </div> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExample" 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 text-faded" href="#carouselExample" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </body>
$('#carouselExample').on('slide.bs.carousel', function(e) { var $e = $(e.relatedTarget); var idx = $e.index(); var itemsPerSlide = 4; var totalItems = $('.carousel-item').length; if (idx >= totalItems - (itemsPerSlide - 1)) { var it = itemsPerSlide - (totalItems - idx); for (var i = 0; i < it; i++) { // append slides to end if (e.direction == "left") { $('.carousel-item').eq(i).appendTo('.carousel-inner'); } else { $('.carousel-item').eq(0).appendTo('.carousel-inner'); } } } }); $('#carouselExample').carousel({ interval: 2000 });

Related: See More

Paper Dashboard Pro

Questions / Comments: