前端 轮播
Modern jQuery slider for your project. Available as jQuery plugin and WordPress plugin.

Sangar Slider

Join the chat at https://gitter.im/tonjoo/jQuery-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 :

Example Page


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


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($) {
        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 class='sangar-content'>
        <img src='images/slide-2.jpg' />
        <a href='http://github.com'></a>
    <div class='sangar-content'>
        <img src='images/slide-3.jpg' />
    <div class='sangar-content'>
        <img src='images/slide-4.jpg' />


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
jQuery-Sangar-Slider 相关推荐