##bxslider plugin for Wordpress
#A Responsive Slider plugin for Wordpress
forked from wandoledzep/bxslider-4
bxslider is a responsive slider plugin built using:
It uses jquery to get the job done. Yeah I know, sorry, your probably using it anyway right?
##Important source files
js/plugins/jquery.fitvids.js
js/jquery.bxslider.js
css/jquery.bxslider.css
css/images/bxloader.gif
css/images/controls.png
bxslider.php
##Usage
- Create a new category for assigning posts e.g.
front-page-slider
- Create a few posts and assign them to that category
- If you wish to hide those posts from the search and main loop I sugest you install a plugin such as Simply Exclude to remove them from the main loop.
- Install and activate the plugin
- Include
<?php echo bxslider( 'front-page-slider' ); ?>
in your template by editing the template file and pasting in the code, be sure to changefront-page-slider
to your chosen category, if you leave it asbxslider( 'front-page-slider' )
it will retrieve all posts.
E.g. Go to the backend of Wordpress Appearance / Editor
and edit your templates Header header.php
file to include the slider on all pages that include header.php
.
Your slide posts just need to include an image that you upload through the Add Media
button in the post editor.
The slider will accept and render:
- Images
- Text
- HTML
- Video (yeah fitvids)
- iframes
Just create a bunch of slider images that are of the same dimensions e.g. 600x400 and stick each one in a post with the category you have selected. Video will just fill the space available so just paste in the iframe from vimeo or youtube and it'll just work.
##Customization
The main plugin file bxslider.php
uses Wordpress get_posts function to pull posts from the category passed through from the template hook.
$bx_args = array(
'category_name' => $cat,
'orderby' => $orderby,
'order' => $order,
'post_type' => $post_type,
'post_status' => $post_status,
'suppress_filters' => true
);
bxslider does not require any arguments passed through but you can pass in the above variables, comma separated in that order.
bxslider has many more options.
var 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,
touchEnabled: true,
swipeThreshold: 50,
video: false,
useCSS: true,
// 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',
autoHover: false,
autoDelay: 0,
// CAROUSEL
minSlides: 1,
maxSlides: 1,
moveSlides: 0,
slideWidth: 0,
// CALLBACKS
onSliderLoad: function() {},
onSlideBefore: function() {},
onSlideAfter: function() {},
onSlideNext: function() {},
onSlidePrev: function() {}
}