The beautiful photos are take from Unsplash
Dependencies
To start using Miniswiper, you will need the following:
- miniswiper.css
- miniswiper.js
HTML Document
Let's start with the basic markup:
<div class="miniswiper-container" id="MiniswiperId">
<div class="miniswiper-content">
<div class="miniswiper-slide">
<!-- item content -->
</div>
<!-- more... -->
</div>
</div>Example 1
new Miniswiper('MiniswiperId');Example 2
new Miniswiper('MiniswiperId', {
direction: 'vertical',
indicator: true
});Example 3
new Miniswiper('MiniswiperId', {
direction: 'horizontal',
indicator: 'circle',
circular: true,
autoplay: true
});Example 4
new Miniswiper('MiniswiperId', {
effect: 'fade',
indicator: true,
circular: true,
autoplay: {interval: 5000, duration: 1000}
});Example 5
new Miniswiper('MiniswiperId', {
direction: 'horizontal',
circular: true,
autoplay: {interval: 3500, duration: 500},
special: {maxScale: 0.9, minScale: 0.85, minOpacity: 0.5}
});Example 6
new Miniswiper('MiniswiperId', {
direction: 'horizontal',
arrow: true,
circular: true
});