1399 lines
84 KiB
HTML
1399 lines
84 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
|
|
<meta name="keywords" content="bootstrap 5, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
|
|
<meta name="author" content="elemis">
|
|
<title>Sandbox - Modern & Multipurpose Bootstrap 5 Template</title>
|
|
<link rel="shortcut icon" href="../../assets/img/favicon.png">
|
|
<link rel="stylesheet" href="../../assets/css/plugins.css">
|
|
<link rel="stylesheet" href="../../assets/css/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="content-wrapper">
|
|
<header class="wrapper bg-soft-primary">
|
|
<nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
|
|
<div class="container flex-lg-row flex-nowrap align-items-center">
|
|
<div class="navbar-brand w-100">
|
|
<a href="../../index.html">
|
|
<img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="" />
|
|
</a>
|
|
</div>
|
|
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
|
|
<div class="offcanvas-header d-lg-none">
|
|
<h3 class="text-white fs-30 mb-0">Sandbox</h3>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item dropdown dropdown-mega">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
|
|
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
|
|
<li class="mega-menu-content mega-menu-scroll">
|
|
<ul class="row row-cols-1 row-cols-lg-6 gx-0 gx-lg-4 gy-lg-2 list-unstyled">
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo1.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi1.jpg" srcset="../../assets/img/demos/mi1@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 1</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo2.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi2.jpg" srcset="../../assets/img/demos/mi2@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 2</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo3.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi3.jpg" srcset="../../assets/img/demos/mi3@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 3</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo4.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi4.jpg" srcset="../../assets/img/demos/mi4@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 4</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo5.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi5.jpg" srcset="../../assets/img/demos/mi5@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 5</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo6.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi6.jpg" srcset="../../assets/img/demos/mi6@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 6</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo7.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi7.jpg" srcset="../../assets/img/demos/mi7@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 7</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo8.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi8.jpg" srcset="../../assets/img/demos/mi8@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 8</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo9.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi9.jpg" srcset="../../assets/img/demos/mi9@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 9</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo10.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi10.jpg" srcset="../../assets/img/demos/mi10@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 10</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo11.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi11.jpg" srcset="../../assets/img/demos/mi11@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 11</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo12.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi12.jpg" srcset="../../assets/img/demos/mi12@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 12</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo13.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi13.jpg" srcset="../../assets/img/demos/mi13@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 13</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo14.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi14.jpg" srcset="../../assets/img/demos/mi14@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 14</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo15.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi15.jpg" srcset="../../assets/img/demos/mi15@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 15</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo16.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi16.jpg" srcset="../../assets/img/demos/mi16@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 16</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo17.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi17.jpg" srcset="../../assets/img/demos/mi17@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 17</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo18.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi18.jpg" srcset="../../assets/img/demos/mi18@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 18</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo19.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi19.jpg" srcset="../../assets/img/demos/mi19@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 19</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo20.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi20.jpg" srcset="../../assets/img/demos/mi20@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 20</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo21.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi21.jpg" srcset="../../assets/img/demos/mi21@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 21</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo22.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi22.jpg" srcset="../../assets/img/demos/mi22@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 22</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo23.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi23.jpg" srcset="../../assets/img/demos/mi23@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 23</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo24.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi24.jpg" srcset="../../assets/img/demos/mi24@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 24</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo25.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi25.jpg" srcset="../../assets/img/demos/mi25@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 25</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo26.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi26.jpg" srcset="../../assets/img/demos/mi26@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 26</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo27.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi27.jpg" srcset="../../assets/img/demos/mi27@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 27</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo28.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi28.jpg" srcset="../../assets/img/demos/mi28@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 28</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo29.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi29.jpg" srcset="../../assets/img/demos/mi29@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 29</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo30.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi30.jpg" srcset="../../assets/img/demos/mi30@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 30</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo31.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi31.jpg" srcset="../../assets/img/demos/mi31@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 31</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo32.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi32.jpg" srcset="../../assets/img/demos/mi32@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 32</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo33.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi33.jpg" srcset="../../assets/img/demos/mi33@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 33</span>
|
|
</a>
|
|
</li>
|
|
<li class="col">
|
|
<a class="dropdown-item" href="../../demo34.html">
|
|
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi34.jpg" srcset="../../assets/img/demos/mi34@2x.jpg 2x" alt=""></figure>
|
|
<span class="d-lg-none">Demo 34</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!--/.row -->
|
|
<span class="d-none d-lg-flex"><i class="uil uil-direction"></i><strong>Scroll to view more</strong></span>
|
|
</li>
|
|
<!--/.mega-menu-content-->
|
|
</ul>
|
|
<!--/.dropdown-menu -->
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class="dropdown-item" href="../../services.html">Services I</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../services2.html">Services II</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class="dropdown-item" href="../../about.html">About I</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../about2.html">About II</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class="dropdown-item" href="../../shop.html">Shop I</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../shop2.html">Shop II</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../shop-product.html">Product Page</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../shop-cart.html">Shopping Cart</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../shop-checkout.html">Checkout</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class="dropdown-item" href="../../contact.html">Contact I</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../contact2.html">Contact II</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../contact3.html">Contact III</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class="dropdown-item" href="../../career.html">Job Listing I</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../career2.html">Job Listing II</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../career-job.html">Job Description</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class="dropdown-item" href="../../404.html">404 Not Found</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../page-loader.html">Page Loader</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../signin.html">Sign In I</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../signin2.html">Sign In II</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../signup.html">Sign Up I</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../signup2.html">Sign Up II</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../terms.html">Terms</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../pricing.html">Pricing</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../onepage.html">One Page</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
|
|
<div class="dropdown-menu dropdown-lg">
|
|
<div class="dropdown-lg-content">
|
|
<div>
|
|
<h6 class="dropdown-header">Project Pages</h6>
|
|
<ul class="list-unstyled">
|
|
<li><a class="dropdown-item" href="../../projects.html">Projects I</a></li>
|
|
<li><a class="dropdown-item" href="../../projects2.html">Projects II</a></li>
|
|
<li><a class="dropdown-item" href="../../projects3.html">Projects III</a></li>
|
|
<li><a class="dropdown-item" href="../../projects4.html">Projects IV</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.column -->
|
|
<div>
|
|
<h6 class="dropdown-header">Single Projects</h6>
|
|
<ul class="list-unstyled">
|
|
<li><a class="dropdown-item" href="../../single-project.html">Single Project I</a></li>
|
|
<li><a class="dropdown-item" href="../../single-project2.html">Single Project II</a></li>
|
|
<li><a class="dropdown-item" href="../../single-project3.html">Single Project III</a></li>
|
|
<li><a class="dropdown-item" href="../../single-project4.html">Single Project IV</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.column -->
|
|
</div>
|
|
<!-- /auto-column -->
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class="dropdown-item" href="../../blog.html">Blog without Sidebar</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../blog2.html">Blog with Sidebar</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../blog3.html">Blog with Left Sidebar</a></li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class="dropdown-item" href="../../blog-post.html">Post without Sidebar</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../blog-post2.html">Post with Sidebar</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="../../blog-post3.html">Post with Left Sidebar</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown dropdown-mega">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
|
|
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
|
|
<li class="mega-menu-content">
|
|
<ul class="row row-cols-1 row-cols-lg-6 gx-0 gx-lg-6 gy-lg-4 list-unstyled">
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/about.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block1.svg" alt=""></div>
|
|
<span>About</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/blog.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block2.svg" alt=""></div>
|
|
<span>Blog</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/call-to-action.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block3.svg" alt=""></div>
|
|
<span>Call to Action</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/clients.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block4.svg" alt=""></div>
|
|
<span>Clients</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/contact.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block5.svg" alt=""></div>
|
|
<span>Contact</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/facts.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block6.svg" alt=""></div>
|
|
<span>Facts</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/faq.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block7.svg" alt=""></div>
|
|
<span>FAQ</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/features.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block8.svg" alt=""></div>
|
|
<span>Features</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/footer.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block9.svg" alt=""></div>
|
|
<span>Footer</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/hero.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block10.svg" alt=""></div>
|
|
<span>Hero</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/misc.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block17.svg" alt=""></div>
|
|
<span>Misc</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/navbar.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block11.svg" alt=""></div>
|
|
<span>Navbar</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/portfolio.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block12.svg" alt=""></div>
|
|
<span>Portfolio</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/pricing.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block13.svg" alt=""></div>
|
|
<span>Pricing</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/process.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block14.svg" alt=""></div>
|
|
<span>Process</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/team.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block15.svg" alt=""></div>
|
|
<span>Team</span>
|
|
</a>
|
|
</li>
|
|
<li class="col"><a class="dropdown-item" href="../../docs/blocks/testimonials.html">
|
|
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block16.svg" alt=""></div>
|
|
<span>Testimonials</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!--/.row -->
|
|
</li>
|
|
<!--/.mega-menu-content-->
|
|
</ul>
|
|
<!--/.dropdown-menu -->
|
|
</li>
|
|
<li class="nav-item dropdown dropdown-mega">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
|
|
<ul class="dropdown-menu mega-menu">
|
|
<li class="mega-menu-content">
|
|
<div class="row gx-0 gx-lg-3">
|
|
<div class="col-lg-4">
|
|
<h6 class="dropdown-header">Usage</h6>
|
|
<ul class="list-unstyled cc-2 pb-lg-1">
|
|
<li><a class="dropdown-item" href="../../docs/index.html">Get Started</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/forms.html">Forms</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/faq.html">FAQ</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/changelog.html">Changelog</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/credits.html">Credits</a></li>
|
|
</ul>
|
|
<h6 class="dropdown-header mt-lg-6">Styleguide</h6>
|
|
<ul class="list-unstyled cc-2">
|
|
<li><a class="dropdown-item" href="../../docs/styleguide/colors.html">Colors</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/styleguide/fonts.html">Fonts</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/styleguide/icons-svg.html">SVG Icons</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/styleguide/icons-font.html">Font Icons</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/styleguide/illustrations.html">Illustrations</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/styleguide/backgrounds.html">Backgrounds</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/styleguide/misc.html">Misc</a></li>
|
|
</ul>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-lg-8">
|
|
<h6 class="dropdown-header">Elements</h6>
|
|
<ul class="list-unstyled cc-3">
|
|
<li><a class="dropdown-item" href="../../docs/elements/accordion.html">Accordion</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/alerts.html">Alerts</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/animations.html">Animations</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/avatars.html">Avatars</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/background.html">Background</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/badges.html">Badges</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/buttons.html">Buttons</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/card.html">Card</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/carousel.html">Carousel</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/dividers.html">Dividers</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/form-elements.html">Form Elements</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/image-hover.html">Image Hover</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/image-mask.html">Image Mask</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/lightbox.html">Lightbox</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/player.html">Media Player</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/modal.html">Modal</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/pagination.html">Pagination</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/progressbar.html">Progressbar</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/shadows.html">Shadows</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/shapes.html">Shapes</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/tables.html">Tables</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/tabs.html">Tabs</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/text-animations.html">Text Animations</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/text-highlight.html">Text Highlight</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/tiles.html">Tiles</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/tooltips-popovers.html">Tooltips & Popovers</a></li>
|
|
<li><a class="dropdown-item" href="../../docs/elements/typography.html">Typography</a></li>
|
|
</ul>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</li>
|
|
<!--/.mega-menu-content-->
|
|
</ul>
|
|
<!--/.dropdown-menu -->
|
|
</li>
|
|
</ul>
|
|
<!-- /.navbar-nav -->
|
|
<div class="offcanvas-footer d-lg-none">
|
|
<div>
|
|
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
|
|
<br /> 00 (123) 456 78 90 <br />
|
|
<nav class="nav social social-white mt-4">
|
|
<a href="#"><i class="uil uil-twitter"></i></a>
|
|
<a href="#"><i class="uil uil-facebook-f"></i></a>
|
|
<a href="#"><i class="uil uil-dribbble"></i></a>
|
|
<a href="#"><i class="uil uil-instagram"></i></a>
|
|
<a href="#"><i class="uil uil-youtube"></i></a>
|
|
</nav>
|
|
<!-- /.social -->
|
|
</div>
|
|
</div>
|
|
<!-- /.offcanvas-footer -->
|
|
</div>
|
|
<!-- /.offcanvas-body -->
|
|
</div>
|
|
<!-- /.navbar-collapse -->
|
|
<div class="navbar-other w-100 d-flex ms-auto">
|
|
<ul class="navbar-nav flex-row align-items-center ms-auto">
|
|
<li class="nav-item dropdown language-select text-uppercase">
|
|
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class="dropdown-item" href="#">En</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="#">De</a></li>
|
|
<li class="nav-item"><a class="dropdown-item" href="#">Es</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item d-none d-md-block">
|
|
<a href="../../contact.html" class="btn btn-sm btn-primary rounded-pill">Contact</a>
|
|
</li>
|
|
<li class="nav-item d-lg-none">
|
|
<button class="hamburger offcanvas-nav-btn"><span></span></button>
|
|
</li>
|
|
</ul>
|
|
<!-- /.navbar-nav -->
|
|
</div>
|
|
<!-- /.navbar-other -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</nav>
|
|
<!-- /.navbar -->
|
|
</header>
|
|
<!-- /header -->
|
|
<section class="wrapper bg-soft-primary">
|
|
<div class="container pt-10 pb-12 pt-md-14 pb-md-16 text-center">
|
|
<div class="row">
|
|
<div class="col-md-9 col-lg-7 col-xl-6 mx-auto">
|
|
<h1 class="display-1 mb-3">Carousel</h1>
|
|
<p class="lead px-xxl-2">Here you can find simple carousel examples and usage instructions. For further carousel documentation please visit <a href="https://swiperjs.com" target="_blank" class="hover more">Swiper docs</a></p>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<div class="container">
|
|
<div class="row">
|
|
<aside class="col-xl-2 sidebar doc-sidebar mt-md-0 py-16 d-none d-xl-block">
|
|
<div class="widget pb-3">
|
|
<h6 class="widget-title fs-17 mb-2">Usage</h6>
|
|
<nav id="collapse-usage">
|
|
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
|
<li><a href="../../docs/index.html">Get Started</a></li>
|
|
<li><a href="../../docs/forms.html">Forms</a></li>
|
|
<li><a href="../../docs/faq.html">FAQ</a></li>
|
|
<li><a href="../../docs/changelog.html">Changelog</a></li>
|
|
<li><a href="../../docs/credits.html">Credits</a></li>
|
|
</ul>
|
|
</nav>
|
|
<!-- /nav -->
|
|
</div>
|
|
<!-- /.widget -->
|
|
<div class="widget pb-3">
|
|
<h6 class="widget-title fs-17 mb-2">Styleguide</h6>
|
|
<nav id="collapse-style">
|
|
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
|
<li><a href="../../docs/styleguide/colors.html">Colors</a></li>
|
|
<li><a href="../../docs/styleguide/fonts.html">Fonts</a></li>
|
|
<li><a href="../../docs/styleguide/icons-svg.html">SVG Icons</a></li>
|
|
<li><a href="../../docs/styleguide/icons-font.html">Font Icons</a></li>
|
|
<li><a href="../../docs/styleguide/illustrations.html">Illustrations</a></li>
|
|
<li><a href="../../docs/styleguide/backgrounds.html">Backgrounds</a></li>
|
|
<li><a href="../../docs/styleguide/misc.html">Misc</a></li>
|
|
</ul>
|
|
</nav>
|
|
<!-- /nav -->
|
|
</div>
|
|
<!-- /.widget -->
|
|
<div class="widget pb-3">
|
|
<h6 class="widget-title fs-17 mb-2">Elements</h6>
|
|
<nav id="collapse-elements">
|
|
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
|
<li><a href="../../docs/elements/accordion.html">Accordion</a></li>
|
|
<li><a href="../../docs/elements/alerts.html">Alerts</a></li>
|
|
<li><a href="../../docs/elements/animations.html">Animations</a></li>
|
|
<li><a href="../../docs/elements/avatars.html">Avatars</a></li>
|
|
<li><a href="../../docs/elements/background.html">Background</a></li>
|
|
<li><a href="../../docs/elements/badges.html">Badges</a></li>
|
|
<li><a href="../../docs/elements/buttons.html">Buttons</a></li>
|
|
<li><a href="../../docs/elements/card.html">Card</a></li>
|
|
<li><a href="../../docs/elements/carousel.html" class="active">Carousel</a></li>
|
|
<li><a href="../../docs/elements/dividers.html">Dividers</a></li>
|
|
<li><a href="../../docs/elements/form-elements.html">Form Elements</a></li>
|
|
<li><a href="../../docs/elements/image-hover.html">Image Hover</a></li>
|
|
<li><a href="../../docs/elements/image-mask.html">Image Mask</a></li>
|
|
<li><a href="../../docs/elements/lightbox.html">Lightbox</a></li>
|
|
<li><a href="../../docs/elements/player.html">Media Player</a></li>
|
|
<li><a href="../../docs/elements/modal.html">Modal</a></li>
|
|
<li><a href="../../docs/elements/pagination.html">Pagination</a></li>
|
|
<li><a href="../../docs/elements/progressbar.html">Progressbar</a></li>
|
|
<li><a href="../../docs/elements/shadows.html">Shadows</a></li>
|
|
<li><a href="../../docs/elements/shapes.html">Shapes</a></li>
|
|
<li><a href="../../docs/elements/tables.html">Tables</a></li>
|
|
<li><a href="../../docs/elements/tabs.html">Tabs</a></li>
|
|
<li><a href="../../docs/elements/text-animations.html">Text Animations</a></li>
|
|
<li><a href="../../docs/elements/text-highlight.html">Text Highlight</a></li>
|
|
<li><a href="../../docs/elements/tiles.html">Tiles</a></li>
|
|
<li><a href="../../docs/elements/tooltips-popovers.html">Tooltips & Popovers</a></li>
|
|
<li><a href="../../docs/elements/typography.html">Typography</a></li>
|
|
</ul>
|
|
</nav>
|
|
<!-- /nav -->
|
|
</div>
|
|
<!-- /.widget -->
|
|
</aside>
|
|
<!-- /column -->
|
|
<aside class="col-xl-2 order-xl-3 sidebar sticky-sidebar mt-md-0 py-16 d-none d-xl-block">
|
|
<div class="widget">
|
|
<h6 class="widget-title fs-17 mb-2 ps-xl-5">On this page</h6>
|
|
<nav class="ps-xl-5" id="sidebar-nav">
|
|
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
|
<li><a class="nav-link scroll active" href="#snippet-1">Simple Carousel</a></li>
|
|
<li><a class="nav-link scroll" href="#snippet-2">Card Carousel</a></li>
|
|
<li><a class="nav-link scroll" href="#snippet-3">Text Slider</a></li>
|
|
<li><a class="nav-link scroll" href="#snippet-4">Image Slider</a></li>
|
|
<li><a class="nav-link scroll" href="#snippet-5">Thumbnail Slider</a></li>
|
|
<li><a class="nav-link scroll" href="#instructions">Instructions</a></li>
|
|
</ul>
|
|
</nav>
|
|
<!-- /nav -->
|
|
</div>
|
|
<!-- /.widget -->
|
|
</aside>
|
|
<!-- /column -->
|
|
<div class="col-xl-8 order-xl-2">
|
|
<section id="snippet-1" class="wrapper pt-16">
|
|
<h2 class="mb-5">Simple Carousel</h2>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="swiper-container mb-10" data-margin="30" data-nav="true" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-0"><a href="#"> <img src="../../assets/img/photos/p1.jpg" srcset="../../assets/img/photos/p1@2x.jpg 2x" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-0"><a href="#"> <img src="../../assets/img/photos/p2.jpg" srcset="../../assets/img/photos/p2@2x.jpg 2x" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-0"><a href="#"> <img src="../../assets/img/photos/p3.jpg" srcset="../../assets/img/photos/p3@2x.jpg 2x" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-0"><a href="#"> <img src="../../assets/img/photos/p4.jpg" srcset="../../assets/img/photos/p4@2x.jpg 2x" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-0"><a href="#"> <img src="../../assets/img/photos/p5.jpg" srcset="../../assets/img/photos/p5@2x.jpg 2x" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
<div class="card-footer position-relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-1">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-1" class="card-footer bg-dark p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><div class="swiper-container mb-10" data-margin="30" data-nav="true" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
...
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
...
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
...
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
...
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
...
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</section>
|
|
<section id="snippet-2" class="wrapper pt-16">
|
|
<h2 class="mb-5">Card Carousel</h2>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="swiper-container dots-closer blog grid-view mb-6" data-margin="0" data-dots="true" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<p>Duis mollis est non commodo luctu, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna vel scelerisque nisl consectetur et.</p>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<p>Duis mollis est non commodo luctu, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna vel scelerisque nisl consectetur et.</p>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<p>Duis mollis est non commodo luctu, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna vel scelerisque nisl consectetur et.</p>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<p>Duis mollis est non commodo luctu, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna vel scelerisque nisl consectetur et.</p>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
<div class="card-footer position-relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-2">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-2" class="card-footer bg-dark p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><div class="swiper-container dots-closer blog grid-view mb-6" data-margin="0" data-dots="true" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
...
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
...
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
...
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
...
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</section>
|
|
<section id="snippet-3" class="wrapper pt-16">
|
|
<h2 class="mb-5">Text Slider</h2>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="swiper-container dots-closer text-center mb-6" data-margin="30" data-dots="true">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
<div class="card-footer position-relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-3">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-3" class="card-footer bg-dark p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><div class="swiper-container dots-closer text-center mb-6" data-margin="30" data-dots="true">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
...
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
...
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
...
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</section>
|
|
<section id="snippet-4" class="wrapper pt-16">
|
|
<h2 class="mb-3">Image Slider</h2>
|
|
<p class="lead">Remove <code class="code">.dots-over</code> class to move bullets below the images.</p>
|
|
<p class="lead mb-3">Use any available <code class="code">.m-*</code>, <code class="code">.p-*</code>, <code class="code">.bg-*</code> and <code class="code">.text-*</code> helper class to style and place the captions. You can change their placement with the help of flex classes as well.</p>
|
|
<p class="lead">Use <a href="https://animate.style" class="external" target="_blank">animate.css</a> animation and utility classes to add animations and delays to captions.</p>
|
|
<p class="lead mb-8">For hero slider (slider with fixed height and background cover images) with captions example check out <a href="../../demo15.html" class="external" target="_blank">Demo 15</a></p>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="swiper-container dots-over" data-margin="5" data-dots="true" data-nav="true" data-autoheight="true">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide bg-overlay bg-overlay-400 rounded">
|
|
<img src="../../assets/img/photos/is1.jpg" alt="" />
|
|
<div class="caption-wrapper p-12">
|
|
<div class="caption bg-white rounded px-4 py-3 mt-auto animate__animated animate__slideInDown animate__delay-1s">
|
|
<h5 class="mb-0">Vivamus sagittis lacus augue</h5>
|
|
</div>
|
|
<!--/.caption -->
|
|
</div>
|
|
<!--/.caption-wrapper -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide rounded">
|
|
<img src="../../assets/img/photos/is2.jpg" alt="" />
|
|
<div class="caption-wrapper p-12">
|
|
<div class="caption bg-white rounded px-4 py-3 mx-auto mt-auto animate__animated animate__slideInDown animate__delay-1s">
|
|
<h5 class="mb-0">Vivamus sagittis lacus augue</h5>
|
|
</div>
|
|
<!--/.caption -->
|
|
</div>
|
|
<!--/.caption-wrapper -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide"><img src="../../assets/img/photos/is3.jpg" class="rounded" alt="" /></div>
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
<div class="card-footer position-relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-4">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-4" class="card-footer bg-dark p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><div class="swiper-container dots-over" data-margin="5" data-dots="true" data-nav="true" data-autoheight="true">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide bg-overlay bg-overlay-400 rounded">
|
|
<img src="./assets/img/photos/is1.jpg" alt="" />
|
|
<div class="caption-wrapper p-12">
|
|
<div class="caption bg-white rounded px-4 py-3 mt-auto animate__animated animate__slideInDown animate__delay-1s"><h5 class="mb-0">Caption</h5></div>
|
|
<!--/.caption -->
|
|
</div>
|
|
<!--/.caption-wrapper -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide rounded">
|
|
<img src="./assets/img/photos/is2.jpg" alt="" />
|
|
<div class="caption-wrapper p-12">
|
|
<div class="caption bg-white rounded px-4 py-3 mx-auto mt-auto animate__animated animate__slideInDown animate__delay-1s"><h5 class="mb-0">Caption</h5></div>
|
|
<!--/.caption -->
|
|
</div>
|
|
<!--/.caption-wrapper -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide"><img src="./assets/img/photos/is3.jpg" class="rounded" alt="" /></div>
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</section>
|
|
<section id="snippet-5" class="wrapper pt-16">
|
|
<h2 class="mb-5">Thumbnail Slider</h2>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="swiper-container swiper-thumbs-container dots-over" data-margin="10" data-dots="false" data-nav="true" data-thumbs="true">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="../../assets/img/photos/shs1.jpg" srcset="../../assets/img/photos/shs1@2x.jpg 2x" alt="" /><a class="item-link" href="../../assets/img/photos/shs1@2x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="../../assets/img/photos/shs2.jpg" srcset="../../assets/img/photos/shs2@2x.jpg 2x" alt="" /><a class="item-link" href="../../assets/img/photos/shs2@2x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="../../assets/img/photos/shs3.jpg" srcset="../../assets/img/photos/shs3@2x.jpg 2x" alt="" /><a class="item-link" href="../../assets/img/photos/shs3@2x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="../../assets/img/photos/shs4.jpg" srcset="../../assets/img/photos/shs4@2x.jpg 2x" alt="" /><a class="item-link" href="../../assets/img/photos/shs4@2x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
<div class="swiper swiper-thumbs">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide"><img src="../../assets/img/photos/shs1-th.jpg" srcset="../../assets/img/photos/shs1-th@2x.jpg 2x" class="rounded" alt="" /></div>
|
|
<div class="swiper-slide"><img src="../../assets/img/photos/shs2-th.jpg" srcset="../../assets/img/photos/shs2-th@2x.jpg 2x" class="rounded" alt="" /></div>
|
|
<div class="swiper-slide"><img src="../../assets/img/photos/shs3-th.jpg" srcset="../../assets/img/photos/shs3-th@2x.jpg 2x" class="rounded" alt="" /></div>
|
|
<div class="swiper-slide"><img src="../../assets/img/photos/shs4-th.jpg" srcset="../../assets/img/photos/shs4-th@2x.jpg 2x" class="rounded" alt="" /></div>
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
<div class="card-footer position-relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-5">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-5" class="card-footer bg-dark p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html">
|
|
<code><div class="swiper-container swiper-thumbs-container dots-over" data-margin="10" data-dots="false" data-nav="true" data-thumbs="true">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="./assets/img/photos/shs1.jpg" alt="" /><a class="item-link" href="./assets/img/photos/shs1@2x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="./assets/img/photos/shs2.jpg" alt="" /><a class="item-link" href="./assets/img/photos/shs2@2x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="./assets/img/photos/shs3.jpg" alt="" /><a class="item-link" href="./assets/img/photos/shs3@2x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="./assets/img/photos/shs4.jpg" alt="" /><a class="item-link" href="./assets/img/photos/shs4@2x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
<div class="swiper swiper-thumbs">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide"><img src="./assets/img/photos/shs1-th.jpg" class="rounded" alt="" /></div>
|
|
<div class="swiper-slide"><img src="./assets/img/photos/shs2-th.jpg" class="rounded" alt="" /></div>
|
|
<div class="swiper-slide"><img src="./assets/img/photos/shs3-th.jpg" class="rounded" alt="" /></div>
|
|
<div class="swiper-slide"><img src="./assets/img/photos/shs4-th.jpg" class="rounded" alt="" /></div>
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container --></code>
|
|
</pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</section>
|
|
<section id="instructions" class="wrapper py-16">
|
|
<h2 class="mb-5">Instructions</h2>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4>Data Attributes</h4>
|
|
<p>Specifically created for the template to be used on HTML. Apply any attribute to <code class="code">.swiper-container</code> to set swiper options.</p>
|
|
<table class="table mb-10">
|
|
<thead class="text-navy">
|
|
<tr>
|
|
<th scope="col" class="col-3">Attribute</th>
|
|
<th scope="col">Default</th>
|
|
<th scope="col">Options</th>
|
|
<th scope="col" class="col-5">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">data-effect</code></td>
|
|
<td>slide</td>
|
|
<td>slide | fade</td>
|
|
<td>Slide transition effect.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">data-items</code></td>
|
|
<td>3</td>
|
|
<td>number</td>
|
|
<td>Number of items per view in all devices.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">data-items-xs</code></td>
|
|
<td>1</td>
|
|
<td>number</td>
|
|
<td>Number of items on screen width <mark class="doc mt-n1">0 - 575px</mark></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">data-items-sm</code></td>
|
|
<td>items-xs</td>
|
|
<td>number</td>
|
|
<td>Number of items on screen width <mark class="doc mt-n1">576px - 767px</mark></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">data-items-md</code></td>
|
|
<td>items-sm</td>
|
|
<td>number</td>
|
|
<td>Number of items on screen width <mark class="doc mt-n1">768px - 991px</mark></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">data-items-lg</code></td>
|
|
<td>items-md</td>
|
|
<td>number</td>
|
|
<td>Number of items on screen width <mark class="doc mt-n1">992px - 1199px</mark></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">data-items-xl</code></td>
|
|
<td>items-lg</td>
|
|
<td>number</td>
|
|
<td>Number of items on screen width <mark class="doc mt-n1">1200px - 1400px</mark></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">data-items-xxl</code></td>
|
|
<td>items-xl</td>
|
|
<td>number</td>
|
|
<td>Number of items on screen width <mark class="doc mt-n1">1400px and above</mark></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">data-speed</code></td>
|
|
<td>500</td>
|
|
<td>number</td>
|
|
<td>Duration of transition between slides (in ms).</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">data-autoplay</code></td>
|
|
<td>false</td>
|
|
<td>true | false</td>
|
|
<td>Enable/disable autoplay.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">data-autoplaytime</code></td>
|
|
<td>5000</td>
|
|
<td>number</td>
|
|
<td>
|
|
<p>Delay between transitions (in ms).</p>
|
|
<p>If you need to specify different delay for specific slides you can do it by using <code class="code">data-swiper-autoplay</code> (in ms) attribute on slide.</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">data-autoheight</code></td>
|
|
<td>false</td>
|
|
<td>true | false</td>
|
|
<td>Set to true and slider wrapper will adapt its height to the height of the currently active slide.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">data-margin</code></td>
|
|
<td>30</td>
|
|
<td>number</td>
|
|
<td>Distance between slides in px.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">data-loop</code></td>
|
|
<td>false</td>
|
|
<td>true | false</td>
|
|
<td>Set to true to enable continuous loop mode.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">data-nav</code></td>
|
|
<td>false</td>
|
|
<td>true | false</td>
|
|
<td>Enable/disable navigation arrows.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">data-dots</code></td>
|
|
<td>false</td>
|
|
<td>true | false</td>
|
|
<td>Enable/disable pagination bullets.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">data-drag</code></td>
|
|
<td>false</td>
|
|
<td>true | false</td>
|
|
<td>Enable/disable moving with touch.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">data-reverse</code></td>
|
|
<td>false</td>
|
|
<td>true | false</td>
|
|
<td>Enables autoplay in reverse direction</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">data-updateresize</code></td>
|
|
<td>true</td>
|
|
<td>true | false</td>
|
|
<td>Swiper will recalculate slides position on window resize (orientationchange)</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h4>Alternative styles for controls</h4>
|
|
<p>Use the following classes with <code class="code">.swiper-container</code> to change navigation styles.</p>
|
|
<table class="table mb-10">
|
|
<thead class="text-navy">
|
|
<tr>
|
|
<th scope="col" class="col-4">Class</th>
|
|
<th scope="col">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">.swiper-hero</code></td>
|
|
<td>Enables hero slider, ie: <a href="../../demo15.html" class="external mt-n1" target="_blank">Demo 15</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">.swiper-fullscreen</code></td>
|
|
<td>Enables fullscreen slider, ie: <a href="../../demo23.html" class="external mt-n1" target="_blank">Demo 23</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">.nav-dark</code></td>
|
|
<td>Changes arrow background to dark color.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">.nav-color</code></td>
|
|
<td>Changes arrow background to primary color.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">.nav-bottom</code></td>
|
|
<td>Moves arrows below the slider.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">.nav-start</code></td>
|
|
<td>Moves arrows from center to left. Requires <code class="code mt-n1">.nav-bottom</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">.dots-light</code></td>
|
|
<td>Changes bullet colors to white.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">.dots-start</code></td>
|
|
<td>Moves bullets from center to left.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">.dots-over</code></td>
|
|
<td>Moves bullets on the slider.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-0"><code class="code my-0">.dots-closer</code></td>
|
|
<td>Moves bullets closer below the slider.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h4>Full examples</h4>
|
|
<a href="../../docs/blocks/blog.html" class="external" target="_blank">Blog Blocks</a>, <a href="../../docs/blocks/testimonials.html" class="external" target="_blank">Testimonials Blocks</a>, <a href="../../docs/blocks/portfolio.html" class="external" target="_blank">Portfolio Blocks</a>, <a href="../../docs/blocks/clients.html" class="external" target="_blank">Client Blocks</a></p>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</section>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!-- /.content-wrapper -->
|
|
<section class="wrapper bg-dark text-white">
|
|
<div class="container pt-14 pt-md-16 text-center">
|
|
<div class="row">
|
|
<div class="col-md-10 col-lg-9 col-xl-8 col-xxl-7 mx-auto">
|
|
<h2 class="display-3 text-white mt-3 mb-3 px-lg-8">Think unique and be creative. Make a difference with Sandbox.</h2>
|
|
<p class="lead fs-lg mb-6">Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.</p>
|
|
<a href="https://1.envato.market/NKGrx2" target="_blank" class="btn btn-lg btn-white rounded-pill mb-10">Buy Sandbox</a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<img class="img-fluid" src="../../assets/img/demos/f1.png" srcset="../../assets/img/demos/f1@2x.png 2x" alt="" />
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<div class="progress-wrap">
|
|
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
|
|
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
|
|
</svg>
|
|
</div>
|
|
<script src="../../assets/js/plugins.js"></script>
|
|
<script src="../../assets/js/theme.js"></script>
|
|
</body>
|
|
|
|
</html> |