How to setup this Slider ?
Add the slider to your html with the following way (add "id" to your slider)
<div id="my-slider">
<div class="items">
<div class="item"><!-- Item Content --></div>
<div class="item"><!-- Item Content --></div>
<!-- ... -->
</div>
<div class="nav">
<button class="prev"><!-- Prev --></button>
<button class="next"><!-- next --></button>
</div>
<div class="thumbs">
<span></span>
<span></span>
<!-- ... -->
</div>
<div class="points">
<i></i><i></i><i></i>
</div>
</div>
Include the file "PISliderJS.min.js" in your HTML using <script>
<script src="path/to/piSliderJS.min.js"></script>
In your JS file build the Slider using the function "PISliderJS" with the options
var target = document.getElementById("my-slider");
var slider = new PISliderJS({
target: target.children[0],
prev: target.children[1].children[0],
next: target.children[1].children[1],
thumbs: target.children[2],
points: target.children[3],
// ... //
});
Or if you using jQuery
$("#my-slider").each(function () {
var $this = $(this);
$this.find(".items").PISliderJS({
thumbs: $this.find(".thumbs"),
points: $this.find(".points"),
prev: $this.find(".nav .prev"),
next: $this.find(".nav .next"),
// ... //
});
});
Open your HTML page in your browser and add your styles of CSS like you want :)
Options
"target"
Type
Element
Description
Element that contains the items of slider.
Examples
target: document.getElementById("target")
"prev"
Type
Element or Array of Elements
Default
Description
Button that go to previous in slider.
Examples
prev: document.getElementById("prev")
prev: [document.getElementById("prev"), ..]
"next"
Type
Element or Array of Elements
Default
Description
Button that go to next in slider.
Examples
next: document.getElementById("next")
next: [document.getElementById("next"), ..]
"points"
Type
Element or Array of Elements
Default
Description
Element that contains the buttons to navigate slider.
Examples
points: document.getElementById("points")
points: [document.getElementById("points"), ..]
"thumbs"
Type
Element or Array of Elements
Default
Description
Element that contains the buttons to navigate slider (button to item),
number of buttons should be the same as number of items.
Examples
thumbs: document.getElementById("thumbs")
thumbs: [document.getElementById("thumbs"), ..]
"fade"
Type
Boolean
Default
Description
Make slider fade.
Examples
"loop"
Type
Boolean
Default
Description
Make slider wraps.
Examples
"center"
Type
Boolean
Default
Description
Make slider centred.
Examples
"drag"
Type
Boolean
Default
Description
Make slider draggable.
Examples
"rtl"
Type
Boolean
Default
Description
Make items from right to left.
Examples
"vertical"
Type
Boolean
Default
Description
Make slider vertical
Examples
"merge"
Type
Boolean or String
Default
Description
Make Items with different widths,
add attribute "data-merge" (or the attribute you write in "merge") to item that contain number of columns should have this item.
Examples
merge: true
merge: "myattr"
"defaultMerge"
Type
Number
Default
Description
Default merge for items not have attribute of merge.
Examples
"gutter"
Type
Number or String
Default
Description
Margin between items.
Units: px, %, vw, vh, vmin, vmax
Examples
gutter: 20
gutter: "10px"
gutter: "1vw + 2%"
gutter: "2vmax"
"columns"
Type
Number
Default
Description
Number of items in view.
Examples
"shadow"
Type
Boolean or Color
Default
Description
Color of shadow in edges of slider,
not working with loop, center and fade.
Examples
shadow: true
shadow: "rgba(0,0,0,0.5)"
shadow: "#f00"
"autoPlay"
Type
Boolean or Number
Default
Description
Make slider auto move.
Unit: ms
Examples
autoPlay: false
autoPlay: 3000
"autoHeight"
Type
Boolean or String
Default
Description
Make slider auto height as items in view.
Examples
autoHeight: true
autoHeight: "max"
autoHeight: "min"
"duration"
Type
Number
Default
Description
Duration of move animation
Unit: ms
Examples
duration: 2000
duration: 10000
"timing"
Type
String or Function
Default
"ease"
Description
Timing function of move animation.
Values: "ease", "ease-in-out", "ease-out", "ease-in", "linear", "elastic"
Examples
timing: "linear"
timing: function (x) {return Math.sin(x * Math.PI / 2); }
"responsive"
Type
Object
Default
Description
Responsive options on resize (like media query).
Examples
responsive: {0: { ... }, 768: { ... }}
"responsiveBase"
Type
Element
Default
Description
Responsive base element.
Examples
responsiveBase: document.getElementById("target")
responsiveBase: window
"responsiveBaseVertical"
Type
Element
Default
Description
Make responsive by height of base element.
Examples
responsiveBaseVertical: true
"activeClass" "draggedClass" "clonedClass" "itemsClass" "itemClass" "stageClass"
Type
String
Default
"active" "dragged" "cloned" "items" "item" "stage"
Description
Class names used in slider
Examples
activeClass: "my-active-class"
draggedClass: "my-dragged-class"
itemClass: "my-item-class"
Methods
Setup of slider return object of slider
var slider = new PISliderJS({
// ... //
});
slider.init();
this function to init slider if you destroy it.
slider.destroy();
this function to destroy slider if it is init.
slider.currentIndex();
this function return current index of slider (start from 0).
slider.minIndex();
this function return min index of slider (always return 0).
slider.maxIndex();
this function return max index of slider.
slider.to(index);
this function go to index in argument.
slider.toPrev();
this function go to previous index.
slider.toNext();
this function go to next index.
slider.disableResponsive();
this function disabled responsive options.
slider.getOptions();
this function return options of slider.
slider.setOptions(options);
this function to set options of slider (may be need to disable responsive).
slider.updateClones();
this function to cloning items content if you change it (work with loop).