casadoc/public/userportal/ui-carousel.html

519 lines
35 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<title>Zoogler - Responsive Bootstrap 4 Admin Dashboard</title>
<meta content="Admin Dashboard" name="description" />
<meta content="Mannatthemes" name="author" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="shortcut icon" href="assets/images/favicon.ico">
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/icons.css" rel="stylesheet" type="text/css">
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
</head>
<body class="fixed-left">
<!-- Loader -->
<div id="preloader"><div id="status"><div class="spinner"></div></div></div>
<!-- Begin page -->
<div id="wrapper">
<!-- ========== Left Sidebar Start ========== -->
<div class="left side-menu">
<button type="button" class="button-menu-mobile button-menu-mobile-topbar open-left waves-effect">
<i class="ion-close"></i>
</button>
<!-- LOGO -->
<div class="topbar-left">
<div class="text-center bg-logo">
<a href="index.html" class="logo"><i class="mdi mdi-bowling text-success"></i> Zoogler</a>
<!-- <a href="index.html" class="logo"><img src="assets/images/logo.png" height="24" alt="logo"></a> -->
</div>
</div>
<div class="sidebar-user">
<img src="assets/images/users/avatar-6.jpg" alt="user" class="rounded-circle img-thumbnail mb-1">
<h6 class="">Mr. Michael Hill </h6>
<p class=" online-icon text-dark"><i class="mdi mdi-record text-success"></i>online</p>
<ul class="list-unstyled list-inline mb-0 mt-2">
<li class="list-inline-item">
<a href="#" class="" data-toggle="tooltip" data-placement="top" title="Profile"><i class="dripicons-user text-purple"></i></a>
</li>
<li class="list-inline-item">
<a href="#" class="" data-toggle="tooltip" data-placement="top" title="Settings"><i class="dripicons-gear text-dark"></i></a>
</li>
<li class="list-inline-item">
<a href="#" class="" data-toggle="tooltip" data-placement="top" title="Log out"><i class="dripicons-power text-danger"></i></a>
</li>
</ul>
</div>
<div class="sidebar-inner slimscrollleft">
<div id="sidebar-menu">
<ul>
<li class="menu-title">Main</li>
<li>
<a href="index.html" class="waves-effect">
<i class="dripicons-device-desktop"></i>
<span> Dashboard <span class="badge badge-pill badge-primary float-right">7</span></span>
</a>
</li>
<li>
<a href="calendar.html" class="waves-effect"><i class="dripicons-to-do"></i><span> Calendar </span></a>
</li>
<li class="menu-title">Components</li>
<li class="has_sub">
<a href="javascript:void(0);" class="waves-effect"><i class="dripicons-jewel"></i> <span> UI Elements </span> <span class="float-right"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="list-unstyled">
<li><a href="ui-alerts.html">Alerts</a></li>
<li><a href="ui-alertify.html">Alertify</a></li>
<li><a href="ui-badge.html">Badge</a></li>
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-carousel.html">Carousel</a></li>
<li><a href="ui-cards.html">Cards</a></li>
<li><a href="ui-dropdowns.html">Dropdowns</a></li>
<li><a href="ui-grid.html">Grid</a></li>
<li><a href="ui-images.html">Images</a></li>
<li><a href="ui-lightbox.html">Lightbox</a></li>
<li><a href="ui-modals.html">Modals</a></li>
<li><a href="ui-navs.html">Navs</a></li>
<li><a href="ui-progressbars.html">Progress Bars</a></li>
<li><a href="ui-pagination.html">Pagination</a></li>
<li><a href="ui-popover-tooltips.html">Popover & Tooltips</a></li>
<li><a href="ui-rating.html">Rating</a></li>
<li><a href="ui-rangeslider.html">Range Slider</a></li>
<li><a href="ui-sweet-alert.html">Sweet-Alert</a></li>
<li><a href="ui-typography.html">Typography</a></li>
<li><a href="ui-tabs-accordions.html">Tabs &amp; Accordions</a></li>
<li><a href="ui-video.html">Video</a></li>
</ul>
</li>
<li class="has_sub">
<a href="javascript:void(0);" class="waves-effect"><i class="dripicons-blog"></i><span> Forms </span> <span class="badge badge-pill badge-info float-right">8</span></a>
<ul class="list-unstyled">
<li><a href="form-advanced.html">Form Advanced</a></li>
<li><a href="form-elements.html">Form Elements</a></li>
<li><a href="form-editors.html">Form Editors</a></li>
<li><a href="form-uploads.html">Form File Upload</a></li>
<li><a href="form-mask.html">Form Mask</a></li>
<li><a href="form-summernote.html">Summernote</a></li>
<li><a href="form-validation.html">Form Validation</a></li>
<li><a href="form-xeditable.html">Form Xeditable</a></li>
</ul>
</li>
<li class="has_sub">
<a href="javascript:void(0);" class="waves-effect"><i class="dripicons-graph-pie"></i><span> Charts </span> <span class="float-right"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="list-unstyled">
<li><a href="charts-chartist.html">Chartist Chart</a></li>
<li><a href="charts-chartjs.html">Chartjs Chart</a></li>
<li><a href="charts-c3.html">C3 Chart</a></li>
<li><a href="charts-flot.html">Flot Chart</a></li>
<li><a href="charts-other.html">Jquery Knob Chart</a></li>
<li><a href="charts-morris.html">Morris Chart</a></li>
</ul>
</li>
<li class="has_sub">
<a href="javascript:void(0);" class="waves-effect"><i class="dripicons-trophy"></i> <span> Icons </span> <span class="float-right"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="list-unstyled">
<li><a href="icons-dripicons.html">Dripicons</a></li>
<li><a href="icons-fontawesome.html">Font Awesome</a></li>
<li><a href="icons-ion.html">Ion Icons</a></li>
<li><a href="icons-material.html">Material Design</a></li>
<li><a href="icons-themify.html">Themify Icons</a></li>
<li><a href="icons-typicons.html">Typicons Icons</a></li>
</ul>
</li>
<li class="has_sub">
<a href="javascript:void(0);" class="waves-effect"><i class="dripicons-card"></i><span> Tables </span> <span class="float-right"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="list-unstyled">
<li><a href="tables-basic.html">Basic Tables</a></li>
<li><a href="tables-datatable.html">Data Table</a></li>
<li><a href="tables-editable.html">Editable Table</a></li>
<li><a href="tables-responsive.html">Responsive Table</a></li>
</ul>
</li>
<li class="menu-title">Extra</li>
<li class="has_sub">
<a href="javascript:void(0);" class="waves-effect"><i class="dripicons-map"></i><span> Maps </span> <span class="badge badge-pill badge-danger float-right">2</span></a>
<ul class="list-unstyled">
<li><a href="maps-google.html"> Google Map</a></li>
<li><a href="maps-vector.html"> Vector Map</a></li>
</ul>
</li>
<li class="has_sub">
<a href="javascript:void(0);" class="waves-effect"><i class="dripicons-copy"></i><span> Pages </span> <span class="float-right"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="list-unstyled">
<li><a href="pages-login.html">Login</a></li>
<li><a href="pages-register.html">Register</a></li>
<li><a href="pages-recoverpw.html">Recover Password</a></li>
<li><a href="pages-lock-screen.html">Lock Screen</a></li>
<li><a href="pages-blank.html">Blank Page</a></li>
<li><a href="pages-404.html">Error 404</a></li>
<li><a href="pages-500.html">Error 500</a></li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"></div>
</div> <!-- end sidebarinner -->
</div>
<!-- Left Sidebar End -->
<!-- Start right Content here -->
<div class="content-page">
<!-- Start content -->
<div class="content">
<!-- Top Bar Start -->
<div class="topbar">
<nav class="navbar-custom">
<ul class="list-inline float-right mb-0">
<!-- language-->
<li class="list-inline-item dropdown notification-list hide-phone">
<a class="nav-link dropdown-toggle arrow-none waves-effect text-white" data-toggle="dropdown" href="#" role="button"
aria-haspopup="false" aria-expanded="false">
English <img src="assets/images/flags/us_flag.jpg" class="ml-2" height="16" alt=""/>
</a>
<div class="dropdown-menu dropdown-menu-right language-switch">
<a class="dropdown-item" href="#"><img src="assets/images/flags/italy_flag.jpg" alt="" height="16"/><span> Italian </span></a>
<a class="dropdown-item" href="#"><img src="assets/images/flags/french_flag.jpg" alt="" height="16"/><span> French </span></a>
<a class="dropdown-item" href="#"><img src="assets/images/flags/spain_flag.jpg" alt="" height="16"/><span> Spanish </span></a>
<a class="dropdown-item" href="#"><img src="assets/images/flags/russia_flag.jpg" alt="" height="16"/><span> Russian </span></a>
</div>
</li>
<li class="list-inline-item dropdown notification-list">
<a class="nav-link dropdown-toggle arrow-none waves-effect" data-toggle="dropdown" href="#" role="button"
aria-haspopup="false" aria-expanded="false">
<i class="dripicons-mail noti-icon"></i>
<span class="badge badge-danger noti-icon-badge">5</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-menu-lg">
<!-- item-->
<div class="dropdown-item noti-title">
<h5><span class="badge badge-danger float-right">745</span>Messages</h5>
</div>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon"><img src="assets/images/users/avatar-2.jpg" alt="user-img" class="img-fluid rounded-circle" /> </div>
<p class="notify-details"><b>Charles M. Jones</b><small class="text-muted">Dummy text of the printing and typesetting industry.</small></p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon"><img src="assets/images/users/avatar-3.jpg" alt="user-img" class="img-fluid rounded-circle" /> </div>
<p class="notify-details"><b>Thomas J. Mimms</b><small class="text-muted">You have 87 unread messages</small></p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon"><img src="assets/images/users/avatar-4.jpg" alt="user-img" class="img-fluid rounded-circle" /> </div>
<p class="notify-details"><b>Luis M. Konrad</b><small class="text-muted">It is a long established fact that a reader will</small></p>
</a>
<!-- All-->
<a href="javascript:void(0);" class="dropdown-item notify-item border-top">
View All
</a>
</div>
</li>
<li class="list-inline-item dropdown notification-list">
<a class="nav-link dropdown-toggle arrow-none waves-effect" data-toggle="dropdown" href="#" role="button"
aria-haspopup="false" aria-expanded="false">
<i class="dripicons-bell noti-icon"></i>
<span class="badge badge-success noti-icon-badge">2</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-menu-lg">
<!-- item-->
<div class="dropdown-item noti-title">
<h5><span class="badge badge-danger float-right">87</span>Notification</h5>
</div>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-primary"><i class="mdi mdi-cart-outline"></i></div>
<p class="notify-details"><b>Your order is placed</b><small class="text-muted">Dummy text of the printing and typesetting industry.</small></p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-success"><i class="mdi mdi-message"></i></div>
<p class="notify-details"><b>New Message received</b><small class="text-muted">You have 87 unread messages</small></p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-warning"><i class="mdi mdi-glass-cocktail"></i></div>
<p class="notify-details"><b>Your item is shipped</b><small class="text-muted">It is a long established fact that a reader will</small></p>
</a>
<!-- All-->
<a href="javascript:void(0);" class="dropdown-item notify-item border-top">
View All
</a>
</div>
</li>
<li class="list-inline-item dropdown notification-list">
<a class="nav-link dropdown-toggle arrow-none waves-effect nav-user" data-toggle="dropdown" href="#" role="button"
aria-haspopup="false" aria-expanded="false">
<img src="assets/images/users/avatar-6.jpg" alt="user" class="rounded-circle">
</a>
<div class="dropdown-menu dropdown-menu-right profile-dropdown ">
<!-- item-->
<div class="dropdown-item noti-title">
<h5>Welcome</h5>
</div>
<a class="dropdown-item" href="#"><i class="mdi mdi-account-circle m-r-5 text-muted"></i> Profile</a>
<a class="dropdown-item" href="#"><i class="mdi mdi-wallet m-r-5 text-muted"></i> My Wallet</a>
<a class="dropdown-item" href="#"><span class="badge badge-success float-right">5</span><i class="mdi mdi-settings m-r-5 text-muted"></i> Settings</a>
<a class="dropdown-item" href="#"><i class="mdi mdi-lock-open-outline m-r-5 text-muted"></i> Lock screen</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="mdi mdi-logout m-r-5 text-muted"></i> Logout</a>
</div>
</li>
</ul>
<ul class="list-inline menu-left mb-0">
<li class="float-left">
<button class="button-menu-mobile open-left waves-light waves-effect">
<i class="mdi mdi-menu"></i>
</button>
</li>
<li class="hide-phone app-search">
<form role="search" class="">
<input type="text" placeholder="Search..." class="form-control">
<a href=""><i class="fa fa-search"></i></a>
</form>
</li>
</ul>
<div class="clearfix"></div>
</nav>
</div>
<!-- Top Bar End -->
<div class="page-content-wrapper ">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="page-title-box">
<div class="btn-group float-right">
<ol class="breadcrumb hide-phone p-0 m-0">
<li class="breadcrumb-item"><a href="#">Zoogler</a></li>
<li class="breadcrumb-item"><a href="#">UI Kit</a></li>
<li class="breadcrumb-item active">Carousel</li>
</ol>
</div>
<h4 class="page-title">Carousel</h4>
</div>
</div>
</div>
<!-- end page title end breadcrumb -->
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="mt-0 header-title">Slides only</h4>
<p class="text-muted mb-4 font-13">Heres a carousel with slides only.
Note the presence of the <code>.d-block</code>
and <code>.img-fluid</code> on carousel images
to prevent browser default image alignment.</p>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="3000">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block mx-auto img-fluid" src="assets/images/small/img-1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block mx-auto img-fluid" src="assets/images/small/img-2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block mx-auto img-fluid" src="assets/images/small/img-3.jpg" alt="Third slide">
</div>
</div>
</div>
</div>
</div>
</div> <!-- end col -->
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="mt-0 header-title">With controls</h4>
<p class="text-muted mb-4 font-13">Adding in the previous and next controls:</p>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block mx-auto img-fluid" src="assets/images/small/img-4.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block mx-auto img-fluid" src="assets/images/small/img-5.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block mx-auto img-fluid" src="assets/images/small/img-6.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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" href="#carouselExampleControls" 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> <!-- end col -->
</div> <!-- end row -->
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="mt-0 header-title">With indicators</h4>
<p class="text-muted mb-4 font-13">You can also add the indicators to the
carousel, alongside the controls, too.</p>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block mx-auto img-fluid" src="assets/images/small/img-3.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block mx-auto img-fluid" src="assets/images/small/img-2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block mx-auto img-fluid" src="assets/images/small/img-1.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" 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" 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> <!-- end col -->
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="mt-0 header-title">With captions</h4>
<p class="text-muted mb-4 font-13">Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.carousel-item</code>.</p>
<div id="carouselExampleCaption" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="assets/images/small/img-7.jpg" alt="..." class="img-fluid mx-auto d-block">
<div class="carousel-caption d-none d-md-block">
<h3 class="text-white">First slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/images/small/img-5.jpg" alt="..." class="img-fluid mx-auto d-block">
<div class="carousel-caption d-none d-md-block">
<h3 class="text-white">Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/images/small/img-4.jpg" alt="..." class="img-fluid mx-auto d-block">
<div class="carousel-caption d-none d-md-block">
<h3 class="text-white">Third slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaption" 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" href="#carouselExampleCaption" 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> <!-- end col -->
</div> <!-- end row -->
</div><!-- container -->
</div> <!-- Page content Wrapper -->
</div> <!-- content -->
<footer class="footer">
© 2022 Zoogler by Mannatthemes.
</footer>
</div>
<!-- End Right content here -->
</div>
<!-- END wrapper -->
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/modernizr.min.js"></script>
<script src="assets/js/detect.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/jquery.blockUI.js"></script>
<script src="assets/js/waves.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<!-- App js -->
<script src="assets/js/app.js"></script>
</body>
</html>