MIF_E31210174/public/admin/docs/docs-ui-carousel.html

466 lines
29 KiB
HTML

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="../src/assets/images/favicon.png">
<title>Adminmart Template - The Ultimate Multipurpose admin template</title>
<!-- This page css -->
<!-- Custom CSS -->
<link href="../src/dist/css/style.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="highlights/highlight.min.css">
<!-- Custom CSS -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Custom CSS -->
</head>
<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="lds-ripple">
<div class="lds-pos"></div>
<div class="lds-pos"></div>
</div>
</div>
<!-- ============================================================== -->
<!-- Main wrapper - style you can find in pages.scss -->
<!-- ============================================================== -->
<div id="main-wrapper" data-theme="light" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full" data-sidebar-position="fixed" data-header-position="fixed" data-boxed-layout="full">
<!-- ============================================================== -->
<!-- Topbar header - style you can find in pages.scss -->
<!-- ============================================================== -->
<header class="topbar" data-navbarbg="skin6">
<nav class="navbar top-navbar navbar-expand-md">
<div class="navbar-header" data-logobg="skin6">
<!-- This is for the sidebar toggle which is visible on mobile only -->
<a class="nav-toggler waves-effect waves-light d-block d-md-none" href="javascript:void(0)"><i
class="ti-menu ti-close"></i></a>
<!-- ============================================================== -->
<!-- Logo -->
<!-- ============================================================== -->
<div class="navbar-brand">
<!-- Logo icon -->
<a href="docs.html">
<b class="logo-icon">
<!-- Dark Logo icon -->
<img src="../src/assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
<!-- Light Logo icon -->
<img src="../src/assets/images/logo-icon.png" alt="homepage" class="light-logo" />
</b>
<!--End Logo icon -->
<!-- Logo text -->
<span class="logo-text">
<!-- dark Logo text -->
<img src="../src/assets/images/logo-text.png" alt="homepage" class="dark-logo" />
<!-- Light Logo text -->
<img src="../src/assets/images/logo-light-text.png" class="light-logo" alt="homepage" />
</span>
</a>
</div>
<!-- ============================================================== -->
<!-- End Logo -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Toggle which is visible on mobile only -->
<!-- ============================================================== -->
<a class="topbartoggler d-block d-md-none waves-effect waves-light" href="javascript:void(0)"
data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><i
class="ti-more"></i></a>
</div>
<!-- ============================================================== -->
<!-- End Logo -->
<!-- ============================================================== -->
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<!-- ============================================================== -->
<!-- toggle and nav items -->
<!-- ============================================================== -->
<ul class="navbar-nav float-left mr-auto ml-3 pl-1">
<!-- ============================================================== -->
<!-- create new -->
<!-- ============================================================== -->
<li class="nav-item">
<a class="nav-link" href="docs.html" role="button">
Documentation
</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- ============================================================== -->
<!-- End Topbar header -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<aside class="left-sidebar" data-sidebarbg="skin6">
<!-- Sidebar scroll-->
<div class="scroll-sidebar" data-sidebarbg="skin6">
<!-- Sidebar navigation-->
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li class="nav-small-cap"><span class="hide-menu">Getting Started</span></li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="docs.html"
aria-expanded="false"><i data-feather="bar-chart-2" class="feather-icon"></i>
<span class="hide-menu">Introduction</span></a>
</li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="docs-start.html"
aria-expanded="false"><i data-feather="clipboard" class="feather-icon"></i>
<span class="hide-menu">Gettings Started</span></a>
</li>
<li class="list-divider"></li>
<li class="nav-small-cap"><span class="hide-menu">UI Components</span></li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="grid" class="feather-icon"></i><span
class="hide-menu">Bootstrap
</span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="docs-ui-buttons.html" class="sidebar-link"><span class="hide-menu"> Buttons </span></a></li>
<li class="sidebar-item"><a href="docs-ui-modals.html" class="sidebar-link"><span class="hide-menu"> Modals </span></a></li>
<li class="sidebar-item"><a href="docs-ui-tabs.html" class="sidebar-link"><span class="hide-menu"> Tabs </span></a></li>
<li class="sidebar-item"><a href="docs-ui-tooltip-popover.html" class="sidebar-link"><span class="hide-menu"> Tooltip & Popover </span></a></li>
<li class="sidebar-item"><a href="docs-ui-notification.html" class="sidebar-link"><span class="hide-menu"> Notification </span></a></li>
<li class="sidebar-item"><a href="docs-ui-progressbar.html" class="sidebar-link"><span class="hide-menu"> Progressbar </span></a></li>
<li class="sidebar-item"><a href="docs-ui-typography.html" class="sidebar-link"><span class="hide-menu"> Typography </span></a></li>
<li class="sidebar-item"><a href="docs-ui-bootstrapui.html" class="sidebar-link"><span class="hide-menu"> Bootstrap UI </span></a></li>
<li class="sidebar-item"><a href="docs-ui-breadcrumb.html" class="sidebar-link"><span class="hide-menu"> Breadcrumb </span></a></li>
<li class="sidebar-item"><a href="docs-ui-listmedia.html" class="sidebar-link"><span class="hide-menu"> List Media </span></a></li>
<li class="sidebar-item"><a href="docs-ui-grid.html" class="sidebar-link"><span class="hide-menu"> Grid </span></a></li>
<li class="sidebar-item"><a href="docs-ui-carousel.html" class="sidebar-link"><span class="hide-menu"> Carousel </span></a></li>
<li class="sidebar-item"><a href="docs-ui-scrollspy.html" class="sidebar-link"><span class="hide-menu"> Scrollspy </span></a></li>
<li class="sidebar-item"><a href="docs-ui-toasts.html" class="sidebar-link"><span class="hide-menu"> Toasts </span></a></li>
<li class="sidebar-item"><a href="docs-ui-spinner.html" class="sidebar-link"><span class="hide-menu"> Spinner </span></a></li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="edit" class="feather-icon"></i><span
class="hide-menu">Customized
</span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="docs-custom-datatables.html" class="sidebar-link"><span class="hide-menu"> Datatables </span></a></li>
<li class="sidebar-item"><a href="docs-custom-widgets.html" class="sidebar-link"><span class="hide-menu"> Widgets </span></a></li>
<li class="sidebar-item"><a href="docs-custom-chart-chartjs.html" class="sidebar-link"><span class="hide-menu"> ChartJs </span></a></li>
</ul>
</li>
</ul>
</nav>
<!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->
</aside>
<!-- ============================================================== -->
<!-- End Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Page wrapper -->
<!-- ============================================================== -->
<div class="page-wrapper">
<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="page-breadcrumb">
<div class="d-flex align-items-center">
<h4 class="page-title text-truncate text-dark font-weight-medium mb-0">Carousel</h4>
<div class="ml-auto">
<nav aria-label="breadcrumb">
<ol class="breadcrumb m-0 p-0">
<li class="breadcrumb-item text-muted active" aria-current="page">AdminMart</li>
<li class="breadcrumb-item text-muted" aria-current="page">Carousel</li>
</ol>
</nav>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Container fluid -->
<!-- ============================================================== -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card overflow-hidden">
<div class="card-body border-bottom">
<h4 class="card-title mb-0">Bootstrap Carousel</h4>
</div>
<div class="row justify-content-center bg-light p-5">
<div class="col-md-7">
<div class="card shadow-sm">
<div class="p-4 text-center">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active"> <img class="img-fluid"
src="../src/assets/images/big/img4.jpg" alt="First slide"> </div>
<div class="carousel-item"> <img class="img-fluid"
src="../src/assets/images/big/img5.jpg" alt="Second slide"> </div>
<div class="carousel-item"> <img class="img-fluid"
src="../src/assets/images/big/img6.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>
</div>
<div class="px-4">
<h4 class="card-title mt-4">Code Here:</h4>
<hr>
<pre class="highlight html">
<code class="shadow-sm px-4" style="height: 300px;">
&lt;div id=&quot;carouselExampleIndicators&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
&lt;div class=&quot;carousel-inner&quot; role=&quot;listbox&quot;&gt;
&lt;div class=&quot;carousel-item active&quot;&gt; &lt;img class=&quot;img-fluid&quot;
src=&quot;../assets/images/big/img4.jpg&quot; alt=&quot;First slide&quot;&gt; &lt;/div&gt;
&lt;div class=&quot;carousel-item&quot;&gt; &lt;img class=&quot;img-fluid&quot;
src=&quot;../assets/images/big/img5.jpg&quot; alt=&quot;Second slide&quot;&gt; &lt;/div&gt;
&lt;div class=&quot;carousel-item&quot;&gt; &lt;img class=&quot;img-fluid&quot;
src=&quot;../assets/images/big/img6.jpg&quot; alt=&quot;Third slide&quot;&gt; &lt;/div&gt;
&lt;/div&gt;
&lt;a class=&quot;carousel-control-prev&quot; href=&quot;#carouselExampleIndicators&quot; role=&quot;button&quot;
data-slide=&quot;prev&quot;&gt; &lt;span class=&quot;carousel-control-prev-icon&quot;
aria-hidden=&quot;true&quot;&gt;&lt;/span&gt; &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt; &lt;/a&gt;
&lt;a class=&quot;carousel-control-next&quot; href=&quot;#carouselExampleIndicators&quot; role=&quot;button&quot;
data-slide=&quot;next&quot;&gt; &lt;span class=&quot;carousel-control-next-icon&quot;
aria-hidden=&quot;true&quot;&gt;&lt;/span&gt; &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt; &lt;/a&gt;
&lt;/div&gt;
</code>
</pre>
</div>
<div class="px-4">
<h4 class="card-title">With Indicators & Captions</h4>
</div>
<div class="row justify-content-center bg-light p-5 mt-4">
<div class="col-md-9">
<div class="card shadow-sm">
<div class="p-4 text-center">
<div id="carouselExampleIndicators2" class="carousel slide"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators2" data-slide-to="0"
class="active"></li>
<li data-target="#carouselExampleIndicators2" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators2" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="img-fluid" src="../src/assets/images/big/img3.jpg"
alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h3 class="text-white">First title goes here</h3>
<p>this is the subcontent you can use this</p>
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="../src/assets/images/big/img4.jpg"
alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h3 class="text-white">Second title goes here</h3>
<p>this is the subcontent you can use this</p>
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="../src/assets/images/big/img5.jpg"
alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h3 class="text-white">Third title goes here</h3>
<p>this is the subcontent you can use this</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators2"
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="#carouselExampleIndicators2"
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>
<div class="px-4">
<h4 class="card-title mt-4">Code Here</h4>
<hr>
<pre class="highlight html">
<code class="shadow-sm px-4" style="height: 300px;">
&lt;div id=&quot;carouselExampleIndicators2&quot; class=&quot;carousel slide&quot;
data-ride=&quot;carousel&quot;&gt;
&lt;ol class=&quot;carousel-indicators&quot;&gt;
&lt;li data-target=&quot;#carouselExampleIndicators2&quot; data-slide-to=&quot;0&quot;
class=&quot;active&quot;&gt;&lt;/li&gt;
&lt;li data-target=&quot;#carouselExampleIndicators2&quot; data-slide-to=&quot;1&quot;&gt;&lt;/li&gt;
&lt;li data-target=&quot;#carouselExampleIndicators2&quot; data-slide-to=&quot;2&quot;&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;div class=&quot;carousel-inner&quot; role=&quot;listbox&quot;&gt;
&lt;div class=&quot;carousel-item active&quot;&gt;
&lt;img class=&quot;img-fluid&quot; src=&quot;../assets/images/big/img3.jpg&quot;
alt=&quot;First slide&quot;&gt;
&lt;div class=&quot;carousel-caption d-none d-md-block&quot;&gt;
&lt;h3 class=&quot;text-white&quot;&gt;First title goes here&lt;/h3&gt;
&lt;p&gt;this is the subcontent you can use this&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;carousel-item&quot;&gt;
&lt;img class=&quot;img-fluid&quot; src=&quot;../assets/images/big/img4.jpg&quot;
alt=&quot;Second slide&quot;&gt;
&lt;div class=&quot;carousel-caption d-none d-md-block&quot;&gt;
&lt;h3 class=&quot;text-white&quot;&gt;Second title goes here&lt;/h3&gt;
&lt;p&gt;this is the subcontent you can use this&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;carousel-item&quot;&gt;
&lt;img class=&quot;img-fluid&quot; src=&quot;../assets/images/big/img5.jpg&quot;
alt=&quot;Third slide&quot;&gt;
&lt;div class=&quot;carousel-caption d-none d-md-block&quot;&gt;
&lt;h3 class=&quot;text-white&quot;&gt;Third title goes here&lt;/h3&gt;
&lt;p&gt;this is the subcontent you can use this&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;a class=&quot;carousel-control-prev&quot; href=&quot;#carouselExampleIndicators2&quot;
role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;
&lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
&lt;/a&gt;
&lt;a class=&quot;carousel-control-next&quot; href=&quot;#carouselExampleIndicators2&quot;
role=&quot;button&quot; data-slide=&quot;next&quot;&gt;
&lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
</code>
</pre>
</div>
<div class="px-4">
<h4 class="card-title">With Individual Interval</h4>
</div>
<div class="row justify-content-center bg-light p-5 mt-4">
<div class="col-md-9">
<div class="card shadow-sm">
<div class="p-4 text-center">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active" data-interval="10000"> <img class="img-fluid"
src="../src/assets/images/big/img3.jpg" alt="First slide"> </div>
<div class="carousel-item" data-interval="2000"> <img class="img-fluid"
src="../src/assets/images/big/img4.jpg" alt="Second slide"> </div>
<div class="carousel-item"> <img class="img-fluid"
src="../src/assets/images/big/img2.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>
</div>
<div class="px-4">
<h4 class="card-title mt-4">Code Here</h4>
<hr>
<pre class="highlight html">
<code class="shadow-sm px-4" style="height: 300px;">
&lt;div id=&quot;carouselExampleIndicators&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
&lt;div class=&quot;carousel-inner&quot; role=&quot;listbox&quot;&gt;
&lt;div class=&quot;carousel-item active&quot; data-interval=&quot;10000&quot;&gt; &lt;img class=&quot;img-fluid&quot;
src=&quot;../assets/images/big/img3.jpg&quot; alt=&quot;First slide&quot;&gt; &lt;/div&gt;
&lt;div class=&quot;carousel-item&quot; data-interval=&quot;2000&quot;&gt; &lt;img class=&quot;img-fluid&quot;
src=&quot;../assets/images/big/img4.jpg&quot; alt=&quot;Second slide&quot;&gt; &lt;/div&gt;
&lt;div class=&quot;carousel-item&quot;&gt; &lt;img class=&quot;img-fluid&quot;
src=&quot;../assets/images/big/img2.jpg&quot; alt=&quot;Third slide&quot;&gt; &lt;/div&gt;
&lt;/div&gt;
&lt;a class=&quot;carousel-control-prev&quot; href=&quot;#carouselExampleIndicators&quot; role=&quot;button&quot;
data-slide=&quot;prev&quot;&gt; &lt;span class=&quot;carousel-control-prev-icon&quot;
aria-hidden=&quot;true&quot;&gt;&lt;/span&gt; &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt; &lt;/a&gt;
&lt;a class=&quot;carousel-control-next&quot; href=&quot;#carouselExampleIndicators&quot; role=&quot;button&quot;
data-slide=&quot;next&quot;&gt; &lt;span class=&quot;carousel-control-next-icon&quot;
aria-hidden=&quot;true&quot;&gt;&lt;/span&gt; &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt; &lt;/a&gt;
&lt;/div&gt;
</code>
</pre>
</div>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End Container fluid -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- footer -->
<!-- ============================================================== -->
<footer class="footer text-center">
All Rights Reserved by Adminmart. Designed and Developed by <a
href="https://wrappixel.com">WrapPixel</a>.
</footer>
<!-- ============================================================== -->
<!-- End footer -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Page wrapper -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Wrapper -->
<!-- ============================================================== -->
<!-- End Page -->
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="../src/assets/libs/jquery/dist/jquery.min.js"></script>
<script src="../src/assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="../src/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- apps -->
<script src="../src/dist/js/app-style-switcher.js"></script>
<script src="../src/dist/js/feather.min.js"></script>
<script src="../src/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="../src/dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="../src/dist/js/custom.min.js"></script>
<script src="highlights/highlight.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
<!-- End JS -->
</body>
</html>