Sangar Slider
Modern jQuery slider for your project. Available as jQuery plugin and WordPress plugin.
Sangar slider is responsive and mobile ready with touch support.
Feature :
- Responsive and touch ready
- Full width slider
- Content Slider
- Multiple pagination type : bullet, text, and image
- Vertical slide
- Caurosel slide
- Javascript API to control the slide using external component
- 35+ options
- and many more awesomeness :)
You can try the slideshow here :
License
Sangar slider is available under dual license : GPLv2 and Tonjoo License
External Library
Sangar slider use external library:
- jQuery v1.11.0
- imagesLoaded PACKAGED v3.1.8
- touchSwipe
And if you have enabled the animateContent
option, you must include:
- velocity.js
- velocityui.js
Installation
Initialize style
<link rel="stylesheet" href="css/sangarSlider.css" type="text/css">
<link rel="stylesheet" href="css/sangar-skin-default.css" type="text/css">
Initialize jQuery
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="js/imagesloaded.min.js"></script>
<script type="text/javascript" src="js/jquery.sangarSlider.js"></script>
Initialize plugin
jQuery(document).ready(function($) {
$('.sangar-example').sangarSlider({
width : 850,
height : 500,
themeClass : 'default'
});
})
HTML structure
<div class='sangar-example'>
<div class='sangar-content'>
<img src='images/slide-1.jpg' />
<a href='http://google.com' target="_blank"></a>
</div>
<div class='sangar-content'>
<img src='images/slide-2.jpg' />
<a href='http://github.com'></a>
</div>
<div class='sangar-content'>
<img src='images/slide-3.jpg' />
</div>
<div class='sangar-content'>
<img src='images/slide-4.jpg' />
</div>
</div>
Options
Name | Default Value | Accepted Values | Description |
---|---|---|---|
animation | 'horizontal-slide' |
[horizontal-slide, vertical-slide, fade] | Slide Animations |
animationSpeed | 700 |
number | How fast animtions are |
continousSliding | true |
boolean | Keep sliding without rollback |
carousel | false |
boolean | Carousel mode |
carouselWidth | 60 |
number | Width in percent |
carouselOpacity | 0.3 |
float (0 to 1) | Opacity for non-active slide |
timer | false |
boolean | Use the timer to autoplay |
advanceSpeed | 6000 |
number | If timer is enabled, time between transitions |
pauseOnHover | true |
boolean | If you hover pauses the slider |
startClockOnMouseOut | true |
boolean | If clock should start on MouseOut |
startClockOnMouseOutAfter | 800 |
number | How long after MouseOut should the timer start again |
directionalNav | 'autohide' |
[autohide, show, none] | Directional Navigation |
directionalNavShowOpacity | 0.9 |
float (0 to 1) | |
directionalNavHideOpacity | 0.1 |
float (0 to 1) | |
directionalNavNextClass | 'exNext' |
string | External link ( a ) next class |
directionalNavPrevClass | 'exPrev' |
string | External link ( a ) prev class |
pagination | 'bullet' |
[bullet, content-horizontal, content-vertical, none] | Slideshow pagination type |
paginationBulletNumber | false |
boolean | if true, bullet pagination will contain a slide number |
paginationContent | ["1","2","3"] |
array string | Can be text, image url, or something |
paginationContentType | 'text' |
[text, image] | |
paginationContentOpacity | 0.8 |
float (0 to 1) | Pagination content opacity. working only on horizontal content pagination |
paginationContentWidth | 120 |
number | Pagination content width in pixel |
paginationImageHeight | 90 |
number | Pagination image height |
paginationImageAttr | ["", "", ""] |
array string | Optional attribute for each image pagination |
paginationContentFullWidth | true |
boolean | Scale width to 100% if the container larger than total width |
paginationExternalClass | 'exPagination' |
string | If you use your own list (li) for pagination |
html5VideoNextOnEnded | false |
boolean | Force go to next slide if HTML5 video is ended, if false, do looping |
textboxOutside | false |
boolean | Put the textbox to bottom outside |
themeClass | 'default' |
string | sangar slider theme |
width | 850 |
number | Slideshow base width |
height | 500 |
number | Slideshow base height |
fullWidth | false |
boolean | Slideshow width (and height) will scale to the container size |
fullHeight | false |
boolean | Slideshow height will resize to browser height |
minHeight | 300 |
number | Slideshow min height |
maxHeight | 0 |
number | Slideshow max height, set to '0' (zero) to make it unlimited |
scaleImage | true |
boolean | Images will scale to the slider size |
background | '#222222' |
string (color code) | Container background color, leave blank will set to transparent |
imageVerticalAlign | 'middle' |
top, middle, bottom | Working only while scaleImage |
disableLoading | false |
boolean | Disable loading animation |
forceSize | false |
boolean | Make slideshow to force use width and height option, no responsive |
animateContent | false |
boolean | Animated the content (textbox). This option require velocity.js and velocityui.js to work |
jsOnly | false |
boolean | Use jQuery only, disable CSS3 |
onInit |
function() { }
|
function | Run function on init |
onReset |
function(width,height) { }
|
function | Run function on first loading and resize slide |
beforeLoading |
function() { }
|
function | Run function before loading |
afterLoading |
function() { }
|
function | Run function after loading |
beforeChange |
function(activeSlide) { }
|
function | Run function before slide change |
afterChange |
function(activeSlide) { }
|
function | Run function after slide change |