"imimim 333 sliiiddww"
Bootstrap 4.1.1 Snippet by ravic9089

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 ----------> <!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <!-- <link rel="stylesheet" href="../assets/css/docs.theme.min.css">--> <!-- Owl Stylesheets --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css"> <!-- javascript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <style> @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css); body{ padding:0; margin:0; overflow-x:hidden; } .owl-carousel { margin: 0; } .owl-carousel .owl-nav [class*=owl-] { background: rgba(0, 0, 0, 0.5); color: rgba(255, 255, 255, 0.9); font-size: 11px; width: 30px; height: 30px; line-height: 30px; border-radius: 0; text-align: center; } .owl-carousel .owl-nav [class*=owl-]:hover { background: green!important; color: #FFF!important; } .owl-carousel .owl-prev, .owl-carousel .owl-next { position: absolute; top: 38%; height: 30px; margin: auto !important; } .owl-carousel .owl-prev { left: 1%; height: 35px!important; width: 35px!important; background-color: #fff; border-radius: 50%!important; border:2px solid #fff !important; color:#fff!important; outline:none!important; } .owl-carousel .owl-next { right: 1%; width: 35px!important; height: 35px!important; background-color: #fff; border-radius: 50%!important; border: 2px solid #fff !important; color:#fff!important; outline:none!important; } .owl-carousel .owl-dots { display: block !important; } .owl-theme .owl-dots .owl-dot { display: inline-block; zoom: 1; outline: none; } </style> </head> <body> <!-- Demos --> <section id="demos"> <div class="row"> <div class="large-12 columns"> <div class="loop owl-carousel owl-theme"> <div class="item"> <img src="https://d314ueg0lpx3nd.cloudfront.net/banner/96821f5a44e-secondary_immunity_1.jpg" alt="banner" > </div> <div class="item"> <img src="https://d314ueg0lpx3nd.cloudfront.net/banner/96821f5a44e-secondary_immunity_1.jpg" alt=""> </div> <div class="item"> <img src="https://d314ueg0lpx3nd.cloudfront.net/banner/96821f5a44e-secondary_immunity_1.jpg"> </div> <div class="item"> <img src="https://d314ueg0lpx3nd.cloudfront.net/banner/96821f5a44e-secondary_immunity_1.jpg" alt=""> </div> <div class="item"> <img src="https://d314ueg0lpx3nd.cloudfront.net/banner/96821f5a44e-secondary_immunity_1.jpg" alt=""> </div> <div class="item"> <img src="https://d314ueg0lpx3nd.cloudfront.net/banner/96821f5a44e-secondary_immunity_1.jpg" alt=""> </div> </div> </div> </div> </section> <script> jQuery(document).ready(function($) { $('.loop').owlCarousel({ center: true, nav: true, navText: [ "<i class='fa fa-caret-left'></i>", "<i class='fa fa-caret-right'></i>" ], rewindNav : true, items: 1, loop: true, margin: 10, responsive: { 600: { items: 2 } } }); $('.nonloop').owlCarousel({ center: true, items: 2, loop: false, margin: 10, responsive: { 600: { items: 2 } } }); }); </script> </body> </html>

Related: See More

Light Bootstrap Dashboard

Questions / Comments: