jQuery Content slider Plugins Vertical Split Slider With jQuery And CSS3


bxSlider

Options

+ General

NameDefaultDescription
mode
'horizontal', 'vertical', 'fade'
'horizontal'Type of transition between slides
speed
integer
500Slide transition duration (in ms)
slideMargin
integer
0Margin between each slide
startSlide

integer
0Starting slide index (zero-based)
randomStart
boolean
falseStart slider on a random slide
slideSelector
jQuery selector
''Element to use as slides (ex. ‘div.slide’).
Note: by default, bxSlider will use all immediate children of the slider element
infiniteLoop
boolean
trueIf true, clicking “Next” while on the last slide will transition to the first slide and vice-versa
hideControlOnEnd
boolean
falseIf true, “Prev” and “Next” controls will receive a class disabled when slide is the first or the last
Note: Only used when infiniteLoop: false
easing
if using CSS: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(n,n,n,n)'. If not using CSS: 'swing', 'linear' (see the above file for more options)
nullThe type of “easing” to use during transitions. If using CSS transitions, include a value for the transition-timing-function property. If not using CSS transitions, you may include plugins/jquery.easing.1.3.js for many options.
See http://gsgd.co.uk/sandbox/jquery/easing/ for more info.
captions
boolean
falseInclude image captions. Captions are derived from the image’s title attribute
ticker
boolean
falseUse slider in ticker mode (similar to a news ticker)
tickerHover
boolean
falseTicker will pause when mouse hovers over slider. Note: this functionality does NOT work if using CSS transitions!
adaptiveHeight
boolean
falseDynamically adjust slider height based on each slide’s height
adaptiveHeightSpeed
integer
500Slide height transition duration (in ms). Note: only used if adaptiveHeight: true
video
boolean
falseIf any slides contain video, set this to true. Also, include plugins/jquery.fitvids.js
See http://fitvidsjs.com/ for more info
responsive
boolean
trueEnable or disable auto resize of the slider. Useful if you need to use fixed width sliders.
useCSS
boolean
trueIf true, CSS transitions will be used for horizontal and vertical slide animations (this uses native hardware acceleration). If false, jQuery animate() will be used.
preloadImages
'all', 'visible'
'visible'If ‘all’, preloads all images before starting the slider. If ‘visible’, preloads only images in the initially visible slides before starting the slider (tip: use ‘visible’ if all slides are identical dimensions)
touchEnabled
boolean
trueIf true, slider will allow touch swipe transitions
swipeThreshold
integer
50Amount of pixels a touch swipe needs to exceed in order to execute a slide transition. Note: only used if touchEnabled: true
oneToOneTouch
boolean
trueIf true, non-fade slides follow the finger as it swipes
preventDefaultSwipeX
boolean
trueIf true, touch screen will not move along the x-axis as the finger swipes
preventDefaultSwipeY
boolean
falseIf true, touch screen will not move along the y-axis as the finger swipes
wrapperClass
string
'bx-wrapper'Class to wrap the slider in. Change to prevent from using default bxSlider styles.

+ Pager

NameDefaultDescription
pager
boolean
trueIf true, a pager will be added
pagerType
'full', 'short'
'full'If ‘full’, a pager link will be generated for each slide. If ‘short’, a x / y pager will be used (ex. 1 / 5)
pagerShortSeparator
string
' / 'If pagerType: ‘short’, pager will use this value as the separating character
pagerSelector
jQuery selector
''Element used to populate the populate the pager. By default, the pager is appended to the bx-viewport
pagerCustom
jQuery selector
nullParent element to be used as the pager. Parent element must contain a element for each slide. See example here . Not for use with dynamic carousels.
buildPager
function(slideIndex)
nullIf supplied, function is called on every slide element, and the returned value is used as the pager item markup.
See examples for detailed implementation

+ Controls

NameDefaultDescription
controls
boolean
trueIf true, “Next” / “Prev” controls will be added
nextText
string
'Next'Text to be used for the “Next” control
prevText
string
'Prev'Text to be used for the “Prev” control
nextSelector
jQuery selector
nullElement used to populate the “Next” control
prevSelector
jQuery selector
nullElement used to populate the “Prev” control
autoControls
boolean
falseIf true, “Start” / “Stop” controls will be added
startText
string
'Start'Text to be used for the “Start” control
stopText
string
'Stop'Text to be used for the “Stop” control
autoControlsCombine
boolean
falseWhen slideshow is playing only “Stop” control is displayed and vice-versa
autoControlsSelector
jQuery selector
nullElement used to populate the auto controls
keyboardEnabled
boolean
falseEnable keyboard navigation for visible sliders

+ Auto

NameDefaultDescription
auto
boolean
falseSlides will automatically transition
stopAutoOnClick
boolean
falseAuto will stop on interaction with controls
pause
integer
4000The amount of time (in ms) between each auto transition
autoStart
boolean
trueAuto show starts playing on load. If false, slideshow will start when the “Start” control is clicked
autoDirection
'next', 'prev'
'next'The direction of auto show slide transitions
autoHover
boolean
falseAuto show will pause when mouse hovers over slider
autoDelay
integer
0Time (in ms) auto show should wait before starting

+ Carousel

NameDefaultDescription
minSlides
integer
1The minimum number of slides to be shown. Slides will be sized down if carousel becomes smaller than the original size.
maxSlides
integer
1The maximum number of slides to be shown. Slides will be sized up if carousel becomes larger than the original size.
moveSlides
integer
0The number of slides to move on transition. This value must be >= minSlides, and <= maxSlides. If zero (default), the number of fully-visible slides will be used.
slideWidth
integer
0The width of each slide. This setting is required for all horizontal carousels!
shrinkItems
boolean
falseThe Carousel will only show whole items and shrink the images to fit the viewport based on maxSlides / minSlides.

+ Keyboard

NameDefaultDescription
keyboardEnabled
boolean
falseAllows for keyboard control of visible slider. Keypress ignored if slider not visible.

+ Accessibility

NameDefaultDescription
ariaLive
boolean
trueAdds Aria Live attribute to slider.
ariaHidden
boolean
trueAdds Aria Hidden attribute to any nonvisible slides.

+ Callbacks

NameArgumentsDescription
onSliderLoad
currentIndex:

element index of the current slide

Executes immediately after the slider is fully loaded
onSliderResize
currentIndex:

element index of the current slide

Executes immediately after the slider is resized
onSlideBefore
$slideElement:

jQuery element of the destination element

oldIndex:

element index of the previous slide (before the transition)

newIndex:

element index of the destination slide (after the transition)

Executes immediately before each slide transition.
onSlideAfter
$slideElement:

jQuery element of the destination element

oldIndex:

element index of the previous slide (before the transition)

newIndex:

element index of the destination slide (after the transition)

Executes immediately after each slide transition. Function argument is the current slide element (when transition completes).
onSlideNext
$slideElement:

jQuery element of the destination element

oldIndex:

element index of the previous slide (before the transition)

newIndex:

element index of the destination slide (after the transition)

Executes immediately before each “Next” slide transition. Function argument is the target (next) slide element.
onSlidePrev
$slideElement:

jQuery element of the destination element

oldIndex:

element index of the previous slide (before the transition)

newIndex:

element index of the destination slide (after the transition)

Executes immediately before each “Prev” slide transition. Function argument is the target (prev) slide element.

+ Public Methods

NameDescription
goToSlide
Performs a slide transition to the supplied slide index (zero-based)
goToNextSlide
Performs a “Next” slide transition
goToPrevSlide
Performs a “Prev” slide transition
startAuto
Starts the auto show. Provide an argument false to prevent the auto controls from being updated.
stopAuto
Stops the auto show. Provide an argument false to prevent the auto controls from being updated.
getCurrentSlide
Returns the current active slide
getSlideCount
Returns the total number of slides in the slider
redrawSlider
Redraw the slider. Useful when needing to redraw a hidden slider after it is unhidden.
reloadSlider
Reload the slider. Useful when adding slides on the fly. Accepts an optional settings object.
destroySlider
Destroy the slider. This reverts all slider elements back to their original state (before calling the slider).

Coded with ♥ by
Steven Wanderski Chicago Web Developer
Star
Twitter

20 best jQuery slider/carousel plugin comparison with demo

  • Sandip
  • 26th Aug 2017
  • jQuery

When it’s about reducing the hard-work & increasing the efficiency JQuery plugins have fulfilled the requirement perfectly. The main reason these plugins are earning huge popularity is because of the code reduction for a programmer. Most of the JQuery plugins are freely available on the internet with required tutorials so now you don’t have to write all the codes for a particular task by yourself, as you can relay on these plugins.
JQuery slider plugins are vastly used in different websites and if not in lakhs it should be in thousands, the number of slider plugins available on the internet. Which one to pick ? Another confusing task. Isn’t it? Relax, you don’t have to try all of them. Making your selection easier voidCanvas is providing you the best 20 JQuery slider having various features, advantages & disadvantages. Surely you gonna find the perfect one for you from this list.

Slide NameSize(Kb)[Js+Css]Auto SlideResponsiveBrowserImages/ContentsDocumentationComplexityGitHub Stars
Slick 43AllImages & ContentsGoodMid19,230+
Owl Carousel2 46Not TotallyAllImages & ContentsGoodLow4660+
BxSlider 27AllImages & ContentsGoodLow3780+
Light Slider 55AllImages & ContentsPoorLow1450+
Nivo 15XAllImages OnlyPoorLow1170+
Wallop 8AllImages & ContentsMidLow1000+
Slider Pro 108AllImages & ContentsGoodLow610+
Item Slide 12XAllImages & ContentsMidLow600+
Kwicks 86AllImages & ContentsGoodlow320+
Pgw Slider 16AllImages OnlyGoodLow150+
Scattered Polaroids Gallery 16XModernImages & ContentsVery PoorMid150+
Pgw SlideShow 19AllImages OnlyGoodLow80+
Carousel 3D 12ModernImages & ContentsVery PoorMid80
Expandable Image Gallery 20XAllImages mainlyVery PoorMidNot Available
Sequence 48ModernImages & ContentsGoodMidNot Available
WOW Slider 2AllImages & ContentsMidNot Available
Fraction Slider 16AllImages/TextsGoodNot Available
Vertical News Slider 5AllImages & ContentspoorLess58
Thumbelina 10AllImages & Contentspoorless50+
Amazing Carousel 25AllImages & ContentsMidMidNot Available

Slick

slick jQuery slider

One of the most popular JQuery content slider plugin with more than 19,000 github stars.

Features

  • Fully responsive. scales with its container.
  • Separate settings per breakpoint.
  • Uses CSS3 if available. (Fully functional even if not).
  • Desktop Mouse Dragging.
  • Swipe can be enable or disable according to your preference.
  • Add, Remove, Filter, Unfilter slides.
  • Auto play, calls, Next-Prev button available.
  • Heterogeneous file type can be added in a single slide list.
  • Various attractive sliding styles & modes are available.
  • Desktop dragging improves the look.

    Demo Download

Owl Carousel 2

The 2nd version of owl carousel is touch enable that lets you create a beautiful responsive carousel.

Features

  • Free & upgradable.
  • Simple & Responsive JQuery slider.
  • Touch & drag supportable.
  • Auto play, moving buttons available.
  • Different animation options available.
  • Stylish Touch. Makes your website look attractive.
  • Different sliding methods available.

Demo Download

BxSlider

bxslider jquery slider

Free responsive JQuery content slider.

Features

  • Responsive Design- Adaptable to any device.
  • Videos, Images, HTML content can be used for sliding.
  • Adjustable Size.
  • Uses CSS transition.
  • Full callback API & public method.
  • Multiple Sliders Can Be Included.
  • Horizontal, Vertical & Fade modes available.
  • Auto Sliding, Slide Controllers, Touch/Swipe facility available.
  • Vertical & Horizontal sliding facility available.
  • Do not change content’s actual height/width proportion.
  • Carousel Available.
  • Custom easing available.
  • Next-Previous Button Available.
  • Caption can be included.
  • Ticker mood available.

    Demo Download

Light Slider

lightslider jquery slider

JQuery lightslider is another popular (having almost 1500 git star) light weighted responsive content slider with carousel thumbnails navigation.

Features

  • Fully responsive- can adapt to any device.
  • Separate settings per break point.
  • Gallery mood to create an image slideshow with thumbnails.
  • Swipe & Mouse drag enable. Keyboard, arrows & dots navigation.
  • Small file size, fully themed & simple to implement.
  • Auto play play available.
  • Slides & Fade effect available.
  • Can add or remove slides dynamically.
  • CSS traditions with JQuery fallback.
  • Full call back API & Public method.
  • Multiple instance on one page.
  • Simply slide anything (Youtube content, vimeo, google map etc.)

    Demo Download

Nivo Slider

nivo jquery slider

Widely used JQuery image slider. It is free to use and released under the MIT license.

Features

  • Requires JQuery v1.7+
  • Multiple slider type.
  • Can keep the original photo size.
  • Automatic image cropping available.
  • Easy to implement.
  • 4 different themes available.
  • Various content sliding animation available.

    Demo Download

Wallop

wallop jquery slider

An amazing responsive free content slider. Popular in the market.

Features

  • Responsive slider layout.
  • Mobile ready.
  • Minimal JS code.
  • Loads faster.
  • Dependency free.

    Demo Download

Slider Pro

slider pro jquery slider

A modular, responsive and touch-enabled jQuery slider plugin for creating professional & elegant looking sliders.

Features

  • Modular architecture & responsive.
  • Touch-swipe.
  • CSS transition.
  • Animated layers (and static).
  • Carousal layout.
  • Infinite scrolling.
  • Lazy loading, Deep linking, Thumbnail, Retina-enabled.
  • Different sliding options.
  • conditional images (different images for different screen sizes).
  • JS breakpoint.

Demo Download

Item Slide.js

itemslide jquery slider

A beautiful touch carousel.

Features

  • Touch sweeping.
  • Mouse wheel scrolling.
  • Ability to “swipe out” slides.
  • Centered carousel or left sided (default is centered).
  • Mobile friendly
  • Tested on devices like iPhone 6, iPad Mini, Nexus 4 & LG G3

Demo Download

Kwicks

kwicks jquery slider

Kwicks is a plugin providing sexy sliding panels with an emphasis on navigational interaction.

Features

  • Responsive.
  • Comes with different sliding options.
  • Proper demos and documentation available.

Demo Download

Pgw Slider

pgwslider jquery slider

Free JQuery very light weight responsive image slider. Developed to showcase image slides only, nothing else.

Features

  • Adaptable to any device- Fully responsive.
  • Simple light weighted image slider. 4KB in size, helping it load very fast.
  • Full customization enable.
  • SEO complaint.
  • Easy auto slide enable, next-prev button available too.
  • Easy captioning process.
  • Perfect as a simple & light weighted slider.

    Demo Download

Scattered Polaroids Gallery

scattred p.g jquery slider

Very stylish and beautiful polaroid gallery where all the items scattered randomly in a container and the clicked one appear in the middle.

Features

  • Very Attractive.
  • Optionally, the initial state of the gallery can have an overlay.
  • The current image moves to the middle and the resting items will make way and move to the sides.
  • If there is a backside, we can flip the Polaroid by clicking on the navigation dot for a second time.

Demo Download

Pgw Slideshow

pgwslideshow jquery slider

Another useful version of pgw. Newer & better. Little different style from Pgw Slider.

Features

  • Responsive design.
  • Single purpose developed.
  • Light weighted, less then 4KB.
  • SEO complaint.
  • Easy auto slide enable, next-prev button available too.
  • Easy captioning process.
  • Developed for totally professional purpose.

Demo Download

Carousel-3D

3d carousel jquery slider

A simple and easy to apply 3d slider for you.

Features

  • Supports all major browsers including IE 8,9 with best effort. Full 3D effect requires css transform support browsers.
  • Children item can be any Html elements, not only image.
  • Gives your website a pretty good 3d looks.

    Demo Download

Expandable Image Gallery

expandable img gallery jquery slider

An attractive gallery plugin with on click expanding facility.

Features

  • Full screen Preview.
  • Responsive Design.
  • Fluid Animation.
  • Expands on clicking.

Demo Download

Sequence

sequence jquery slider

Comes with 4 cool and attractive themes. Take a look you surely gonna like the style.

Features

  • Three great free themes.
  • Sliding Horizontal Parallax.
  • Apple Style.
  • Responsive slider skin.
  • Touch supported & easily modifiable.

Demo Download

WOW Slider

wow jquery slider

If you want fantastic visual effects & beautifully designed themes WOW slider can be an amazing & perfect option. This free slider provides you the largest number of visual effects (Domino, Rotate, Page, Blur, Flip, Blast, Fly, Blinds, Squares, Ken Burns, Slices, Basic, Fade, Stack,Stack vertical, Basic linear, Cube and Seven).

Features

  • Totally responsive.
  • Comes with a GUI wizard to create sliders without coding and image editing.
  • Supports in all browsers.
  • Touch and swipe support.
  • Search engine(SEO) friendly.
  • Easy wordpress setup.
  • Clean & valid markup.

Demo Download

Fraction Slider

fraction slider jquery slider

FractionSlider is a jQuery plugin for image/text-sliders allowing you to animate multiple elements per slide.

Features

  • Responsive support for letter-spacing css property.
  • You can animate multiple elements per slide.
  • Images without width/height get calculated correctly.
  • The slider has now the pause on hover functionality.
  • Attractive animation effects.
  • Background animation available, that gives it an extra good looks.

Demo Download

Vertical News Slider

vertical img jquery slider

A responsive jQuery-based vertical news slider. jQuery and CSS-based slider module that displays news headlines on the left along with a preview image and brief description on the right.

Features

  • Responsive Design.
  • Mainly developed for news sharing in sliding manner.
  • Simple and good looking.
  • Coding documentation isn’t available.

Demo Download

Thumbelina

thumbelina jquery slider

Thumbelina is a very lightweight content slider specifically designed for use with galleries of thumbnail images.

Features

  • Works both in horizontal & vertical moods.
  • 100% stylable with css.
  • Smooth movement.

    Demo Download

Amazing Carousel

amazing carousal jquery slider

Responsive jQuery Carousel content slider.

Features

  • Responsive design.
  • PC, iPhone, iPad, Android supportable.
  • Ready for dreamwaver, frontpage, wordpress, joomla & drupal.
  • Horizontal and vertical.

Demo Download

Share This Post:

Tags: jquery , jquery slider

About This Author

Exploring the web. In love with javascript & frontend development.

Creative & Poorophobic.