Getting started
Introduction
Download
Contents
Browsers and devices
Components
Navbar
Slider
Alert
Collapse
Button
Forms
Modals
Ajax
Toasts
ScrollTo
Charts
Add-ons
Magazine - Slider
Magazine - Display Article
Magazine - Newsletter
Magazine - Footer
Magazine - Button
Background Moving With A Mouse
Effect Title
Slider with Swiper JS
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css">
<link href="https://laarmwork.arnaudjacques.fr/res/css/button.css" rel="stylesheet">
<script src="https://laarmwork.arnaudjacques.fr/res/js/laarmwork.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image: url(https://source.unsplash.com/random?sig=24);">
<h2>Image 1</h2>
</div>
<div class="swiper-slide" style="background-image: url(https://source.unsplash.com/random?sig=53);">
<h2>Image 2</h2>
</div>
<div class="swiper-slide" style="background-image: url(https://source.unsplash.com/random?sig=52);">
<h2>Image 3</h2>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
<script>
var Swipes = new Swiper('.swiper-container', {
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
});
</script>