@@include('global/_head.html',{ "headTitle": "Vendor plugin", "swiper": "true", "prism": "true" }) @@include('docs/_sidebar.html', {"page": "plugins"})
@@include('global/_page-header.html', {"PageHeader": "sticky-top"} )
  1. Home
  2. Docs
  3. Vendor
  4. Swiper

Swiper

How it works

Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity. swiperjs.com

Basic Example
<link rel="stylesheet" href="assets/bundles/swiper.min.css" />
<script src="assets/vendor/prismjs/prism.js"></script>

<div class="spring-slider">
	<div class="swiper mySwiper mb-3">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><img class="img-fluid rounded" src="@@webRoot/assets/img/gallery/1.jpg" alt=""></div>
			<div class="swiper-slide"><img class="img-fluid rounded" src="@@webRoot/assets/img/gallery/2.jpg" alt=""></div>
			<div class="swiper-slide"><img class="img-fluid rounded" src="@@webRoot/assets/img/gallery/3.jpg" alt=""></div>
		</div>
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
	<div class="swiper-pagination"></div>
</div>
Get started with Bootstrap @@include('docs/_quick-url.html')
@@include('global/_page-footer.html', {"PageFooter": ""} )
@@include('global/_full-screen-menu.html', {"divClass": ""} ) @@include('global/_need-help.html', {"divClass": "offcanvas-start"} ) @@include('global/_quick-access.html', {"divClass": "offcanvas-end"} ) @@include('global/_theme-setting.html', {"divClass": "offcanvas-end"} ) @@include('global/_site-map.html', {"divClass": "offcanvas-start sm"} ) @@include('global/_body-hero-img-2.html', {"bodyBgClass": "body-bg"} ) @@include('global/_plugin-script.html', { "swiper": "true", "prism": "true", })