uix-kit
Version:
A free web kits for fast web design and development, compatible with Bootstrap v5.
1,122 lines • 50.2 kB
HTML
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Swiper - Uix Kit</title>
<!-- Compatibility Settings
============================================= -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Compatibility Settings end -->
<!-- Web Fonts
============================================= -->
<!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700,800" rel="stylesheet"> -->
<!-- Web Fonts end -->
<!-- Core & Theme CSS
============================================= -->
<!-- Basic -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css?ver=5.2.3" media="all"/>
<link rel="stylesheet" href="assets/css/video.min.css?ver=7.4.1" media="all"/>
<!-- Icons -->
<link rel="stylesheet" href="assets/fonts/fontawesome/css/all.min.css?ver=5.7.0">
<link rel="stylesheet" href="assets/fonts/fontawesome/css/v4-shims.min.css?ver=5.7.0">
<!-- Theme -->
<link rel="stylesheet" href="../dist/css/uix-kit.min.css?ver=oBL6UJILNcsxGifiirVQ"/>
<!--[if lt IE 10]>
<link rel="stylesheet" href="assets/css/IE.css?ver=oBL6UJILNcsxGifiirVQ" />
<![endif]-->
<!-- Core & Theme CSS end -->
<!-- Vendor
============================================= -->
<script src="assets/js/min/jquery.min.js?ver=3.6.1"></script>
<script src="assets/js/min/modernizr.min.js?ver=3.5.0"></script>
<!-- Vendor end -->
<!-- Break free from CSS prefix hell!
============================================= -->
<script src="assets/js/min/prefixfree.min.js?ver=1.0.7"></script>
<!-- SEO
============================================= -->
<meta name="description" content="A free web kits for fast web design and development, compatible with Bootstrap v5.">
<meta name="generator" content="Uix Kit" />
<meta name="author" content="UIUX Lab">
<!-- SEO end -->
<!-- Favicons
============================================= -->
<link rel="icon" href="assets/images/favicon/favicon-32x32.png" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/favicon/favicon-32x32.png" sizes="32x32">
<link rel="apple-touch-icon" href="assets/images/favicon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/images/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/images/favicon/apple-touch-icon-114x114.png">
<!-- Favicons end -->
</head>
<body class="page">
<!-- Loader
============================================= -->
<div class="uix-loader">
<!--[if lt IE 10]>
<span>Loading...</span>
<![endif]-->
<svg class="uix-loader__spinner is-hide-IE" viewBox="0 0 52 52">
<path d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"></path>
</svg>
</div>
<div class="uix-loader-progress" data-txt="{progress}%"><span>0%</span></div>
<div class="uix-loader-progress__line"></div>
<!-- .uix-loader end -->
<!-- Mobile Menu Toggle Trigger
============================================= -->
<div class="uix-menu-mobile__toggle">
<span></span>
<span></span>
<span></span>
</div>
<div class="uix-menu-mobile__mask"></div>
<!-- .uix-menu-mobile__toggle end -->
<div class="uix-wrapper">
<!-- Header Area
============================================= -->
<header class="uix-header__container">
<div class="uix-header">
<div class="container">
<div class="uix-brand">
<a href="index.html"><img src="assets/images/logo.png" alt="Uix Kit"></a>
</div>
<!-- .uix-brand end -->
<!-- Navigation Start-->
<nav class="uix-menu__container">
<div class="uix-menu__inner">
<span class="uix-brand--mobile"><img src="assets/images/logo-colorful.png" alt="Uix Kit"></span>
<ul class="uix-menu">
<li class="multi-column current-menu-item is-active"><a href="index.html">Components</a>
<ul class="sub-menu">
<li>
<span class="multi-column-title">Web Elements (Basic)</span>
<ul class="sub-menu">
<li><a href="helper-classes.html">Helper Classes</a></li>
<li><a href="uix-grid.html">Uix Grid</a></li>
<li><a href="bootstrap-grid.html">Bootstrap Grid</a></li>
<li><a href="bootstrap-24-grid.html">Bootstrap 24 Grid</a></li>
<li><a href="blended-grid-layout.html">Blended Grid</a></li>
<li><a href="gallery-grid-layout.html">Gallery Grid</a></li>
<li><a href="spacing.html">Spacing</a></li>
<li><a href="material-container.html">Material Container</a></li>
<li><a href="striking.html">Striking</a></li>
<li><a href="button.html">Buttons</a></li>
<li><a href="overlay.html">Overlay</a></li>
<li><a href="video.html">Video</a></li>
<li><a href="video-background.html">Video BG</a></li>
<li><a href="heading.html">Heading</a></li>
<li><a href="dividing-line.html">Dividing Line</a></li>
<li><a href="images.html">Images</a></li>
<li><a href="responsive-images.html">Responsive Images</a></li>
<li><a href="background-interaction.html">Background</a></li>
<li><a href="parallax.html">Parallax</a></li>
<li><a href="parallax2.html">Parallax 2</a></li>
<li><a href="vertical-centering.html">Vertical Centering</a></li>
<li><a href="equal-width-columns.html">Equal-width Columns</a></li>
<li><a href="equal-height-columns.html">Equal-height Columns</a></li>
<li><a href="align-wide-and-full-element.html">Align Wide/Full Element</a><span class="uix-bubble">new</span></li>
</ul>
<!-- .sub-menu end -->
</li>
<li>
<span class="multi-column-title">Web Elements (Part 1)</span>
<ul class="sub-menu">
<li><a href="toast.html">Toast</a><span class="uix-bubble">new</span></li>
<li><a href="navs.html">Navs</a></li>
<li><a href="breadcrumbs.html">Breadcrumbs</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="modal-dialog.html">Modal Dialog</a></li>
<li><a href="modal-dialog-auto.html">Modal Dialog Auto-open</a></li>
<li><a href="social-meida-icons.html">Social Media Icons</a></li>
<li><a href="form.html">Form Elements</a></li>
<li><a href="form2.html">Form Elements 2</a></li>
<li><a href="form-layout.html">Form Layout</a></li>
<li><a href="form-progress.html">Form Progress</a></li>
<li><a href="counter.html">Counter</a></li>
<li><a href="progress-bar.html">Progress Bar</a></li>
<li><a href="progress-line.html">Progress Line</a></li>
<li><a href="vertical-text.html">Vertical Text</a></li>
<li><a href="circle-text.html">Circle Text</a></li>
<li><a href="coach-mark.html">Coach Mark</a></li>
<li><a href="separator-of-rule-with-text.html">Separator of Rule With Text</a></li>
<li><a href="wave-background.html">Wave Background</a></li>
<li><a href="shape-animation.html">Shape Animation</a></li>
<li><a href="image-animation.html">Image Animation</a></li>
<li><a href="svg-map.html">SVG Map</a></li>
<li><a href="floating-side-element.html">Floating Side Element</a></li>
<li><a href="infinite-scrolling-element.html">Infinite Scrolling Element</a></li>
</ul>
<!-- .sub-menu end -->
</li>
<li>
<span class="multi-column-title">Web Elements (Part 2)</span>
<ul class="sub-menu">
<li><a href="tooltip.html">Tooltip</a></li>
<li><a href="ribbon.html">Ribbon</a></li>
<li><a href="footer-templates.html">Footer Templates</a></li>
<li><a href="login-templates.html">Login Templates</a><span class="uix-bubble">new</span></li>
<li><a href="pagination.html">Pagination</a></li>
<li><a href="badges.html">Badges</a></li>
<li><a href="mouse-animation-scroll.html">Mouse Animation Scroll</a></li>
<li><a href="periodical-scroll.html">Periodical Scroll</a></li>
<li><a href="image-shapes.html">Image Shapes</a></li>
<li><a href="rotating-elements.html">Rotating Elements</a></li>
<li><a href="dotted-line.html">Dotted Line</a></li>
<li><a href="swiper.html">Swiper<small style="font-size: 10px;background: #51B801; color:#fff; border-radius: 5px;padding: 2px 3px;display: inline-block;margin-left: 3px;">Third-party plugin</small></a></li>
<li><a href="advanced-slider.html">Advanced Slider (Basic)</a></li>
<li><a href="advanced-slider-brightness.html">Advanced Slider Brightness</a></li>
<li><a href="advanced-slider-liquid.html">Advanced Slider Liquid</a></li>
<li><a href="advanced-slider-liquid2.html">Advanced Slider Liquid 2</a></li>
<li><a href="advanced-slider-liquid3.html">Advanced Slider Liquid 3</a></li>
<li><a href="advanced-slider-parallax.html">Advanced Slider Parallax</a></li>
<li><a href="hybrid-content-slider.html">Hybrid Content Slider</a><span class="uix-bubble">new</span></li>
<li><a href="svg-mask-slider.html">SVG Mask Slider</a><span class="uix-bubble">new</span></li>
<li><a href="3D-explosive-particle-slider.html">3D Explosive Particle Slider</a></li>
<li><a href="3D-liquid-scrollspy-slider.html">3D Liquid Scrollspy Slider</a><span class="uix-bubble">new</span></li>
</ul>
<!-- .sub-menu end -->
</li>
<li>
<span class="multi-column-title">Contents (Part 1)</span>
<ul class="sub-menu">
<li><a href="content-placeholder-animated.html">Content Placeholder Animated</a></li>
<li><a href="list-posts.html">Posts List</a></li>
<li><a href="fullwidth-column-to-edge.html">Full Width Column to Edge</a><span class="uix-bubble">new</span></li>
<li><a href="list-side-by-side.html">Side by Side List</a></li>
<li><a href="list-side-by-side-img.html">Side by Side List With Photo</a></li>
<li><a href="list-bulleted.html">Bulleted List</a></li>
<li><a href="list-brands.html">Brands List</a></li>
<li><a href="list-maintain-aspect-ratio.html">Maintain Aspect Ratio List</a></li>
<li><a href="single-post.html">Single Post</a></li>
<li><a href="sidebar.html">Sidebar</a></li>
<li><a href="contact.html">Contact Form With Map</a></li>
<li><a href="features.html">Features</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="tabs.html">Tabs</a></li>
<li><a href="accordion.html">Accordion</a></li>
<li><a href="accordion-img.html">Accordion Background Images</a></li>
<li><a href="gallery.html">Gallery Normal</a></li>
<li><a href="gallery-filter.html">Gallery Filterable</a></li>
<li><a href="gallery-masonry.html">Gallery Masonry</a></li>
<li><a href="gallery-masonry-ajax.html">Gallery Masonry With Ajax</a><span class="uix-bubble">new</span></li>
</ul>
<!-- .sub-menu end -->
</li>
<li>
<span class="multi-column-title">Contents (Part 2)</span>
<ul class="sub-menu">
<li><a href="card.html">Cards</a></li>
<li><a href="table-series.html">Table</a></li>
<li><a href="table-sorter.html">Table Sorter</a></li>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="multi-items-carousel.html">Multiple Items Carousel</a></li>
<li><a href="team-fullwidth.html">Team Fullwidth</a></li>
<li><a href="team-grid.html">Team Grid</a></li>
<li><a href="team-focus.html">Team Focus</a></li>
<li><a href="circle-layout.html">Circle Layout</a></li>
<li><a href="3D-carousel.html">3D Carousel</a></li>
<li><a href="3D-gallery.html">3D Gallery (threejs)</a></li>
<li><a href="cascading-dropdown-list.html">Cascading DropDown List</a><span class="uix-bubble">new</span></li>
</ul>
<!-- .sub-menu end -->
</li>
<li>
<span class="multi-column-title">Interaction (Part 1)</span>
<ul class="sub-menu">
<li><a href="sticky-elements.html">Sticky Elements</a></li>
<li><a href="scroll-reveal.html">Scroll Reveal</a></li>
<li><a href="scrollspy-animate.html">Scrollspy Animate</a><span class="uix-bubble">new</span></li>
<li><a href="skew-on-scroll.html">Skew on Scroll</a><span class="uix-bubble">new</span></li>
<li><a href="text-effect.html">Text Effect</a><span class="uix-bubble">new</span></li>
<li><a href="smooth-scrolling-page.html">Smooth Scrolling Page</a></li>
<li><a href="list-posts-with-ajax.html">Ajax Load Posts</a></li>
<li><a href="list-posts-with-ajax2.html">Ajax Load Posts 2</a></li>
<li><a href="list-posts-with-ajax-infinitescroll.html">Infinite Scroll Posts</a></li>
<li><a href="show-more-less.html">Show More Less</a></li>
<li><a href="mousewheel-interaction.html">Mousewheel Interaction</a></li>
<li><a href="hover-delay-interaction.html">Hover Delay Interaction</a></li>
<li><a href="one-page.html">Full Page/One Page</a></li>
<li><a href="one-page2.html">Full Page/One Page 2</a></li>
<li><a href="ajax-page-loader.html">Ajax Page Loader</a></li>
<li><a href="ajax-push-content.html">Ajax Push Content</a></li>
<li><a href="3D-background.html">3D Background</a></li>
<li><a href="3D-specular.html">3D Specular (threejs)</a><span class="uix-bubble">new</span></li>
<li><a href="3D-background-three.html">3D Background 1 (threejs)</a></li>
<li><a href="3D-background-three2.html">3D Background 2 (threejs)</a></li>
<li><a href="3D-background-three3.html">3D Background 3 (threejs)</a></li>
<li><a href="3D-simulate-html-layout.html">Simulate HTML Layout (threejs)</a></li>
</ul>
<!-- .sub-menu end -->
</li>
<li>
<span class="multi-column-title">Interaction (Part 2)</span>
<ul class="sub-menu">
<li><a href="3D-pages.html">3D Pages</a></li>
<li><a href="3D-particle-effect.html">3D Particle Effect</a></li>
<li><a href="3D-sphere-three.html">3D Sphere Rotation</a></li>
<li><a href="3D-obj-anim-interaction.html">3D Object Anim Interaction</a></li>
<li><a href="3D-image-transition.html">3D Image Transition (threejs)</a></li>
<li><a href="3D-mouse-interaction.html">3D Mouse Interaction (threejs)</a></li>
<li><a href="3D-mouse-interaction2.html">3D Mouse Interaction2 (threejs)</a></li>
<li><a href="3D-model.html">3D Model</a></li>
<li><a href="3D-filmic-effects.html">3D Filmic Effects</a><span class="uix-bubble">new</span></li>
</ul>
<!-- .sub-menu end -->
</li>
</ul>
</li>
<li><a href="#">Menu</a>
<ul class="sub-menu">
<li><a href="mega-menu.html">Mega Menu</a></li>
<li><a href="mega-menu-rtl.html">Mega Menu(RTL)</a></li>
<li><a href="dropdown-menu.html">Dropdown Menu</a></li>
<li><a href="dropdown-menu2.html">Dropdown Menu 2(Multi-level)</a></li>
<li><a href="vertical-menu.html" target="_blank">Vertical Menu</a></li>
<li><a href="lava-lamp-style-menu.html">Lava-Lamp Style Menu</a><span class="uix-bubble">new</span></li>
</ul>
<!-- .sub-menu end -->
</li>
<li><a href="typography.html">Typography</a>
<ul class="sub-menu">
<li><a href="typography.html">LTR</a></li>
<li><a href="typography-rtl.html">RTL</a></li>
<li><a href="typography-cn.html">中文</a></li>
</ul>
</li>
<li><a href="sample-page-1.html">Sample Pages</a>
<ul class="sub-menu">
<li><a href="sample-page-1.html">Sample Page 1</a></li>
<li><a href="sample-page-2.html">Sample Page 2</a></li>
</ul>
</li>
</ul>
<div class="uix-menu__right-box">
<a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin uix-social-btn--white" title="Follow us on Twitter" href="https://twitter.com/uiux_lab" target="_blank">
<i class="fa fa-twitter"></i>
</a>
<a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin uix-social-btn--white" title="Follow us on Facebook" href="https://www.facebook.com/uiuxlabhome" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin uix-social-btn--white" title="Fork on Github" href="https://github.com/xizon/uix-kit" target="_blank">
<i class="fa fa-github"></i>
</a>
</div>
</div><!-- /.uix-menu__inner -->
</nav>
<!-- .uix-menu__container end -->
</div>
<!-- .container end -->
<div class="uix-clearfix"></div>
</div>
</header>
<div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div>
<main id="uix-maincontent">
<section>
<div class="container">
<div class="row">
<div class="col-12">
<div class="uix-swiper">
<!-- Title
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Synchronize multiple objects</h3>
<p>For different responsive breakpoints (screen sizes) and custom buttons.</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Slideshow
====================================================== -->
<div role="slider" class="swiper-container" id="app-slider1">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide One 1</div>
<div class="swiper-slide">Slide One 2</div>
<div class="swiper-slide">Slide One 3</div>
<div class="swiper-slide">Slide One 4</div>
<div class="swiper-slide">Slide One 5</div>
<div class="swiper-slide">Slide One 6</div>
<div class="swiper-slide">Slide One 7</div>
<div class="swiper-slide">Slide One 8</div>
<div class="swiper-slide">Slide One 9</div>
<div class="swiper-slide">Slide One 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-prev">
<svg viewBox="0 0 448 512"><path d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"/></svg>
</div>
<div class="swiper-button-next">
<svg viewBox="0 0 448 512"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"/></svg>
</div>
</div>
<!-- /.swiper-container -->
<div role="slider" class="swiper-container" id="app-slider2" style="margin-top: 30px;">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide Two 1</div>
<div class="swiper-slide">Slide Two 2</div>
<div class="swiper-slide">Slide Two 3</div>
<div class="swiper-slide">Slide Two 4</div>
<div class="swiper-slide">Slide Two 5</div>
<div class="swiper-slide">Slide Two 6</div>
<div class="swiper-slide">Slide Two 7</div>
<div class="swiper-slide">Slide Two 8</div>
<div class="swiper-slide">Slide Two 9</div>
<div class="swiper-slide">Slide Two 10</div>
</div>
</div>
<!-- /.swiper-container -->
<!-- Title
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Parallax Effect + Video</h3>
<p>Custom slides transform effect and custom buttons..</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Slideshow
====================================================== -->
<div role="slider" class="swiper-container" id="app-slider3" style="margin-top: 30px;">
<div class="swiper-wrapper">
<!-- Image -->
<div class="swiper-slide">
<span>Slide Three 1</span>
<div class="slide-inner" style="background-image:url(assets/images/demo/slide-1.jpg)"></div>
</div>
<!-- Image -->
<div class="swiper-slide">
<span>Slide Three 2</span>
<div class="slide-inner" style="background-image:url(assets/images/demo/slide-2.jpg)"></div>
</div>
<!-- Image -->
<div class="swiper-slide">
<span>Slide Three 3</span>
<div class="slide-inner" style="background-image:url(assets/images/demo/slide-3.jpg)"></div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-prev">
<svg viewBox="0 0 448 512"><path d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"/></svg>
</div>
<div class="swiper-button-next">
<svg viewBox="0 0 448 512"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"/></svg>
</div>
</div>
<!-- /.swiper-container -->
<!-- Title
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Video</h3>
<p>Embed the video player.</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Slideshow
====================================================== -->
<div role="slider" class="swiper-container" id="app-slider3_2" style="margin-top: 30px;">
<div class="swiper-wrapper">
<!-- Image -->
<div class="swiper-slide">
<img src="assets/images/demo/slide-1.jpg" alt="null">
</div>
<!-- Image -->
<div class="swiper-slide">
<img src="assets/images/demo/slide-2.jpg" alt="null">
</div>
<!-- Video -->
<div class="swiper-slide">
<div
class="slide-inner__video-container ratio ratio-16x9"
data-embed-video-width="auto"
data-embed-video-height="auto"
data-embed-video-controls="false"
data-embed-video-autoplay="true"
data-embed-video-loop="false"
>
<video
poster="assets/videos/480x270/demo.jpg"
autoPlay
muted
loop
playsInline
preload="auto"
webkit-playsinline
>
<source src="assets/videos/480x270/demo.mp4" type="video/mp4">
<source src="assets/videos/480x270/demo.webm" type="video/webm">
</video>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-prev">
<svg viewBox="0 0 448 512"><path d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"/></svg>
</div>
<div class="swiper-button-next">
<svg viewBox="0 0 448 512"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"/></svg>
</div>
</div>
<!-- /.swiper-container -->
<!-- Title
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Scale Effect without left/right swipe</h3>
<p>Custom slides transform effect and custom buttons..</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Slideshow
====================================================== -->
<div role="slider" class="swiper-container" id="app-slider4" style="margin-top: 30px;">
<div class="swiper-wrapper">
<div class="swiper-slide"><span>Slide Three 1</span><div class="slide-inner" style="background-image:url(assets/images/demo/slide-1.jpg)"></div></div>
<div class="swiper-slide"><span>Slide Three 2</span><div class="slide-inner" style="background-image:url(assets/images/demo/slide-2.jpg)"></div></div>
<div class="swiper-slide"><span>Slide Three 3</span><div class="slide-inner" style="background-image:url(assets/images/demo/slide-3.jpg)"></div></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-prev">
<svg viewBox="0 0 448 512"><path d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"/></svg>
</div>
<div class="swiper-button-next">
<svg viewBox="0 0 448 512"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"/></svg>
</div>
</div>
<!-- /.swiper-container -->
<!-- Title
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Centered Slides</h3>
<p>Allow this option if you want to have your active slide in the center, instead of snapped to the left side of Swiper view.</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Slideshow
====================================================== -->
<div role="slider" class="swiper-container" id="app-slider5">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide One 1</div>
<div class="swiper-slide">Slide One 2</div>
<div class="swiper-slide">Slide One 3</div>
<div class="swiper-slide">Slide One 4</div>
<div class="swiper-slide">Slide One 5</div>
<div class="swiper-slide">Slide One 6</div>
<div class="swiper-slide">Slide One 7</div>
<div class="swiper-slide">Slide One 8</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-prev">
<svg viewBox="0 0 448 512"><path d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"/></svg>
</div>
<div class="swiper-button-next">
<svg viewBox="0 0 448 512"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"/></svg>
</div>
</div>
<!-- /.swiper-container -->
<!-- Title
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Display half on both sides</h3>
<p>Set up CSS to achieve only half of the entries on both sides.</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Slideshow
====================================================== -->
<div role="slider" class="swiper-container" id="app-slider6">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide One 1</div>
<div class="swiper-slide">Slide One 2</div>
<div class="swiper-slide">Slide One 3</div>
<div class="swiper-slide">Slide One 4</div>
<div class="swiper-slide">Slide One 5</div>
<div class="swiper-slide">Slide One 6</div>
<div class="swiper-slide">Slide One 7</div>
<div class="swiper-slide">Slide One 8</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-prev">
<svg viewBox="0 0 448 512"><path d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"/></svg>
</div>
<div class="swiper-button-next">
<svg viewBox="0 0 448 512"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"/></svg>
</div>
</div>
<!-- /.swiper-container -->
<!-- Title
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Custom Progress Bar</h3>
<p>Demonstrate how to add a slide progress bar to Swiper.</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Slideshow
====================================================== -->
<div role="slider" class="swiper-container" id="app-slider7">
<div id="app-slider7__progress"></div>
<div id="app-slider7__progress2"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">Slide One 1</div>
<div class="swiper-slide">Slide One 2</div>
<div class="swiper-slide">Slide One 3</div>
<div class="swiper-slide">Slide One 4</div>
<div class="swiper-slide">Slide One 5</div>
<div class="swiper-slide">Slide One 6</div>
<div class="swiper-slide">Slide One 7</div>
<div class="swiper-slide">Slide One 8</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-prev">
<svg viewBox="0 0 448 512"><path d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"/></svg>
</div>
<div class="swiper-button-next">
<svg viewBox="0 0 448 512"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"/></svg>
</div>
</div>
<!-- /.swiper-container -->
<!-- Title
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Gallery with center thumbs automatically</h3>
<p>Using the Swiper API that enables you to add custom thumbnails and link them to your Swiper instance automatically.</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Slideshow
====================================================== -->
<div style="max-width: 600px;">
<div role="slider" class="swiper-container" id="app-slider8">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="assets/images/placeholder/320x345.jpg" alt="null"></div>
<div class="swiper-slide"><img src="assets/images/placeholder/400x279.jpg" alt="null"></div>
<div class="swiper-slide"><img src="assets/images/placeholder/400x320.jpg" alt="null"></div>
<div class="swiper-slide"><img src="assets/images/placeholder/400x320.jpg" alt="null"></div>
<div class="swiper-slide"><img src="assets/images/placeholder/400x400.jpg" alt="null"></div>
<div class="swiper-slide"><img src="assets/images/placeholder/450x338.jpg" alt="null"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-prev">
<svg viewBox="0 0 448 512"><path d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"/></svg>
</div>
<div class="swiper-button-next">
<svg viewBox="0 0 448 512"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"/></svg>
</div>
</div>
<!-- /.swiper-container -->
<!-- //// thumbs /// -->
<div role="slider" class="swiper-container" id="app-slider8-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="assets/images/placeholder/320x345.jpg" alt="null"></div>
<div class="swiper-slide"><img src="assets/images/placeholder/400x279.jpg" alt="null"></div>
<div class="swiper-slide"><img src="assets/images/placeholder/400x320.jpg" alt="null"></div>
<div class="swiper-slide"><img src="assets/images/placeholder/400x320.jpg" alt="null"></div>
<div class="swiper-slide"><img src="assets/images/placeholder/400x400.jpg" alt="null"></div>
<div class="swiper-slide"><img src="assets/images/placeholder/450x338.jpg" alt="null"></div>
</div>
</div>
<!-- /#app-slider8-thumbs -->
</div>
<!-- Title
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Gallery with manual triggers</h3>
<p>Customize the thumbnail/trigger and link it to your Swiper instance manually.</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Slideshow
====================================================== -->
<div style="max-width: 600px;">
<div role="slider" class="swiper-container" id="app-slider9">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="assets/images/placeholder/320x345.jpg" alt="null"></div>
<div class="swiper-slide"><img src="assets/images/placeholder/400x279.jpg" alt="null"></div>
<div class="swiper-slide"><img src="assets/images/placeholder/400x320.jpg" alt="null"></div>
<div class="swiper-slide"><img src="assets/images/placeholder/400x320.jpg" alt="null"></div>
<div class="swiper-slide"><img src="assets/images/placeholder/400x400.jpg" alt="null"></div>
<div class="swiper-slide"><img src="assets/images/placeholder/450x338.jpg" alt="null"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-prev">
<svg viewBox="0 0 448 512"><path d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"/></svg>
</div>
<div class="swiper-button-next">
<svg viewBox="0 0 448 512"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"/></svg>
</div>
</div>
<!-- /.swiper-container -->
<!-- //// triggers /// -->
<div id="app-slider9-triggers">
<div><img src="assets/images/placeholder/320x345.jpg" alt="null"></div>
<div><img src="assets/images/placeholder/400x279.jpg" alt="null"></div>
<div><img src="assets/images/placeholder/400x320.jpg" alt="null"></div>
<div><img src="assets/images/placeholder/400x320.jpg" alt="null"></div>
<div><img src="assets/images/placeholder/400x400.jpg" alt="null"></div>
<div><img src="assets/images/placeholder/450x338.jpg" alt="null"></div>
</div>
<!-- /#app-slider9-triggers -->
</div>
</div>
<!-- /.uix-swiper -->
</div>
</div>
</div>
</section>
</main>
<!-- Footer
============================================= -->
<footer class="uix-footer__container">
<div class="uix-footer">
<div class="container">
<hr>
<div class="row">
<div class="col-lg-6 col-md-6 uix-t-l uix-t-c--md">
Copyright © Uix Kit 2022. | All rights reserved. Created by <a href="https://uiux.cc">UIUX Lab</a>.
</div>
<div class="col-lg-6 col-md-6 uix-t-r uix-t-c--md">
<div class="uix-footer__menu">
<ul>
<li>
<a href="https://uiux.cc" target="_blank">
UIUX Lab
</a>
</li>
<li>
<a href="https://opensource.org/licenses/MIT" target="_blank">
Licenses
</a>
</li>
<li>
<a href="https://github.com/xizon/uix-kit" target="_blank">
Download
</a>
</li>
<li>
<a href="https://github.com/xizon/uix-kit/wiki/Getting-Started" target="_blank">
Documentation
</a>
</li>
</ul>
</div>
</div>
</div>
</div><!-- .container end -->
</div>
</footer>
</div>
<!-- .uix-wrapper end -->
<!-- Vendor -->
<script defer src="assets/js/min/axios.min.js?ver=0.19.2"></script>
<script defer src="assets/js/min/jquery.waitforimages.min.js?ver=1.0"></script>
<script defer src="assets/js/min/video.min.js?ver=7.5.3"></script>
<script defer src="assets/js/min/TweenMax.min.js?ver=2.0.2"></script>
<script defer src="assets/js/min/pixi.min.js?ver=5.2.0"></script>
<script defer src="assets/js/min/three.min.js?ver=r175"></script>
<script defer src="assets/js/min/anime.min.js?ver=3.1"></script>
<script defer src="assets/js/min/hammer.min.js?ver=2.0.8"></script>
<!-- Your Plugins & Theme Scripts
============================================= -->
<script>
/*
* Some global vars. DO NOT change these variables names.
* These variables are being used in `uix-kit.min.js`.
*
*/
var REVISION = "5.4.3",
APP_ROOTPATH = {
"templateUrl" : "", //If the file is in the root directory, you can leave it empty. If in another directory, you can write: "/blog"
"homeUrl" : "", //Eg. https://uiux.cc
"ajaxUrl" : "" //Eg. https://uiux.cc/wp-admin/admin-ajax.php
};
/*
* Fixed a bug that Cannot read property 'fn' of undefined for jQuery 1.xx.x.
*
*/
window.$ = window.jQuery;
</script>
<script defer src="../dist/js/uix-kit.min.js?ver=oBL6UJILNcsxGifiirVQ"></script>
<!-- Your Plugins & Theme Scripts end -->
<script>
/* Google analytics */
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.defer=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-70658525-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>