Example analysis of jquery plug in bxslider usage

This article illustrates the use of the jquery plug-in, bxslider. Share with you for your reference. The specific usage is as follows:

First, the corresponding js file is called:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.js"></script>

jQuery code section:

$(function(){ 
 $('#marquee').bxSlider({ 
  mode:'vertical', // The default is horizontal  
  displaySlideQty:1,// According to li The number of  
  moveSlideQty: 1,// mobile li The number of   
  captions: true,// The automatic control  
  auto: true, 
  controls: false// Hide left and right buttons  
 }); 
});

The structure of HTML is as follows:

<div style="width:450px; height:296px; float:left; 
overflow:hidden; margin-left:200px;">
 <ul id="marquee">
  <li>
  <img src="img/1.jpg" alt="banner_ beauty " 
  style="width:450px; height:296px;">
  </li>
  <li>
  <img src="img/2.jpg" alt="banner_ beauty "
  style="width:450px; height:296px;">
  </li>
 </ul>
</div>

CSS defines left and right button styles:

.bx-prev{ 
width:12px; height:26px; 
background:#f00;text-indent: -999999px;z-index: 999; 
position: absolute; float:left; left:455px; top:110px;
}
.bx-next{ 
width:12px; height:26px; 
background:#f00; text-indent: -999999px;
z-index: 999; 
position: absolute; top:110px;left:-15px;
}

Parameter description:

bxSlider configuration parameters:
bxSlider has a number of configuration parameters that allow you to create a wide variety of slider effects:

mode: 'horizontal', // 'horizontal', 'vertical', 'fade' define the direction of slider scrolling, with 3 values to choose from
infiniteLoop: true, // true, false-display first slide after last infinite loop
hideControlOnEnd: false, // true, false-if true, will hide 'next' control on 'on' control on first if true is set, next 'next' control

control

prev
controls: true, // true, false-previous and next controls whether to display the "previous" and "next" buttons
speed: 500, // integer-in ms, duration of time slide will will occupy speed in milliseconds
easing: 'swing', // used with jquery.easing.1.3.js - see http://gsgd.co.uk/sandbox/jquery/easing/ for available options
pager: true, // true / false - display a pager
pagerSelector: null, // jQuery selector - element to contain the pager. ex: '#pager'
pagerType: 'full', // 'full', 'short' - if 'full' pager displays 1,2,3... if 'short' pager displays 1/4 if full is set, 1, 2, 3... , if short is set, 1/4 will be displayed.
pagerLocation: 'bottom', // 'bottom', 'top' - location of pager page number location
pagerShortSeparator: '/', // string-ex: 'of' pager would display 1 of 4 page separator
pagerActiveClass: 'pager-active ', // string-attached to the active pager link className of the current page number
nextText: 'next', // string-text displayed for 'next' control text on the next page
nextImage: ', // string-filepath image used for next control. ex: 'images/ next. jpg' can be set to the next page as a picture
nextSelector: null, // jQuery selector - element to contain the next control. ex: '#next'
prevText: 'prev', // string-text displayed for 'previous' control
prevImage: ", // string-filepath of image used for previous control ex: 'images/ prev.jpg ', page 1
prevSelector: null, // jQuery selector - element to contain the previous control. ex: '#next'
captions: false, // true, false-display image captions (reads the image 'title' tag) whether to display the title of the image, read the content of the title property of the image.

captionsSelector: null, // jQuery selector - element to contain the captions. ex: '#captions'
auto: false, // true, false-make slideshow change automatically slides automatically scroll
autoDirection: 'next', // 'next', 'prev' - direction in which auto show will traverse automatic scrolling order
autoControls: false, // true, false-show 'start' stop' controls 'for auto show
autoControlsSelector: null, // jQuery selector - element to contain the auto controls. ex: '#auto-controls'
autoStart: true, // true, false - if false show will wait for 'start' control to activate
autoHover: false, // true, false-if true show pause on mouseover setting mouseover pause pause pause on mouseover
autoDelay: 0, // integer - in ms, the amount of time before starting the auto show
pause: 3000, // integer-in ms, the duration between each slide transition transition time
startText: 'start', // string-text displayed for start control start button text
startImage: ", // string-filepath of used start control. ex: 'images/ start. jpg' start button image
stopText: 'stop', // string-text displayed for 'stop' control stop button text
stopImage: ', // string-filepath of image used for 'stop' control. ex: 'images/ stop. jpg' picture of the stop button
ticker: false, // true, false - continuous motion ticker mode (think news ticker)
// note: autoControls and autoControlsSelector apply to ticker!
tickerSpeed: 5000, // integer - has an inverse effect on speed. therefore, a value of 10000 will
// scroll very slowly while a value of 50 will scroll very quickly.
tickerDirection: 'next', // 'next', 'prev' - direction in which ticker show will traverse
tickerHover: false, // true, false - if true ticker will pause on mouseover
wrapperClass: 'bx-wrapper', // string - classname attached to the slider wraper
startingSlide: 0, // integer - show will start on specified slide. note: slides are zero based!
displaySlideQty: 1, // integer - number of slides to display at once
moveSlideQty: 1, // integer - number of slides to move at once
randomStart: false, // true, false - if true show will start on a random slide

I hope this article has helped you with your jQuery programming.