Responsive jQuery Content Slider with Animations - Bxslider

File Size: 3.52 MB
Views Total: 82103
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive jQuery Content Slider with Animations - Bxslider

bxslider is a fully responsive jQuery Slider Plugin that allows you to create a content slider which can contain images, video, or HTML content.

Features:

  • Adapt to any device
  • Horizontal, vertical, and fade modes
  • Advanced touch / swipe support built-in
  • Uses CSS transitions for slide animation (native hardware acceleration!)
  • Full callback API and public methods
  • Small file size, fully themed, simple to implement
  • Tons of configuration

Installation:

# NPM
$ npm install bxslider

# Bower
$ bower install bxslider

Basic Usage:

1. Include necessary files

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

2. Html Markup

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

3. Call the plugin

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

4. Options and defaults.

// GENERAL
mode: 'horizontal',
slideSelector: '',
infiniteLoop: true,
hideControlOnEnd: false,
speed: 500,
easing: null,
slideMargin: 0,
startSlide: 0,
randomStart: false,
captions: false,
ticker: false,
tickerHover: false,
adaptiveHeight: false,
adaptiveHeightSpeed: 500,
video: false,
useCSS: true,
preloadImages: 'visible',
responsive: true,
slideZIndex: 50,
wrapperClass: 'bx-wrapper',

// TOUCH
touchEnabled: true,
swipeThreshold: 50,
oneToOneTouch: true,
preventDefaultSwipeX: true,
preventDefaultSwipeY: false,

// ACCESSIBILITY
ariaLive: true,
ariaHidden: true,

// KEYBOARD
keyboardEnabled: false,

// PAGER
pager: true,
pagerType: 'full',
pagerShortSeparator: ' / ',
pagerSelector: null,
buildPager: null,
pagerCustom: null,

// CONTROLS
controls: true,
nextText: 'Next',
prevText: 'Prev',
nextSelector: null,
prevSelector: null,
autoControls: false,
startText: 'Start',
stopText: 'Stop',
autoControlsCombine: false,
autoControlsSelector: null,

// AUTO
auto: false,
pause: 4000,
autoStart: true,
autoDirection: 'next',
stopAutoOnClick: false,
autoHover: false,
autoDelay: 0,
autoSlideForOnePage: false,

// CAROUSEL
minSlides: 1,
maxSlides: 1,
moveSlides: 0,
slideWidth: 0,
shrinkItems: false,

// CALLBACKS
onSliderLoad: function() { return true; },
onSlideBefore: function() { return true; },
onSlideAfter: function() { return true; },
onSlideNext: function() { return true; },
onSlidePrev: function() { return true; },
onSliderResize: function() { return true; },
onAutoChange: function() { return true; } //calls when auto slides starts and stops

Change Logs:

v4.2.14 (2018-05-01)

  • Fixing flickering (on -webkit) when used background-image to instead of 
  • FIX calling API method stopAuto()
  • InvalidPointerId on Android 6
  • Use jQuery.fn.on instead of jQuery.fn.bind #1126
  • InvalidPointerId on Android 6
  • restore original event target correctly

v4.2.12 (2017-04-05)

  • Fixes auto control theme
  • Fixes merge conflicts
  • Fixed issue with global window handlers
  • Add Callback for when Auto changes

v4.2.8 (2017-02-28)

  • Bumps npm and bower versions

v4.2.5 (2015-06-10)

  • Fix: Vertical carousel minSlides not working 
  • Fix: slider breaks with css animations if settings.speed set to 0
  • Fix: Slider runs into undefined state when reloadSlider is called before initialization was finished

v4.2.4 (2015-06-02)

  • Added data reference.

v4.2.3 (2015-02-11)

  • Minor bug fix

v4.2.2 (2015-02-08)

  • Fix: Remove unused plugin variable 
  • Fix: updateAfterSlideTransition not being called)
  • Fix: Slider stops auto advancing
  • Fix: Refresh page, slider show the last item at the first in mode: 'horizontal'
  • Fix: horizintal ticker stutters on loop
  • Fix: Wrong bx-wrapper bottom margin with controls=true and pager=false
  • Fix: add css tickerHover. 
  • Fix: Slider refusing to scale down, only up 
  • Fix: bxSlider freezes on touch devices
  • Fix: Multiple fixes and improvements for Windows Mobile Devices 
  • Fix: Accessing bxslider's slider object inside its “onSliderLoad” callback returns undefined
  • Fix: infiniteLoop glitch when scrolling from first to last slide 
  • Enhancement: Cancel transitions on callbacks by returning false. 
  • Enhancement: Added Keyboard arrow left and right support 

v4.2.1 (2015-02-04)

  • bugs fixed.

v4.1.3 (2015-01-24)

  • Fix: responsive issue for horizontal mode for issue
  • Fix: extra space on the left when using fade mode.
  • Fix: pager: false bug when used with pagerCustom
  • Fix: wrongly removing custom pager in destroySlider
  • Fix: bug with reloading slider with custom pager
  • Fix: Issue with infinite scroll sometimes returning to 0
  • Fix: When "infiniteLoop" is used, true is not passed to a clone method.
  • Fix: "pagerCustom" won't work when using reloadSlider
  • Fix: Remove vendor prefix for translateZ(0)
  • Fix: give styles on focus for accessibility
  • Fix: Minified Version out of sync.
  • Fix: Remove -5px left
  • Enhancement: Invert order call of appendControls() and appendPager()
  • Enhancement: Various Indentation and typos in docs fixed.
  • Enhancement: Update jsDelivr with update.json for autoupdate of CDN
  • Enhancement: Tag Repo so it can be included in CDNJS
  • Created development branch to work from. Eventually will restructure entire repo to follow best 

This awesome jQuery plugin is developed by stevenwanderski. For more Advanced Usages, please check the demo page or visit the official website.