bxSlider slide show (slider) - application, settings, examples

For some sites, you have to use a slider to flip through banners (images), you have to add a certain setting for the slider so that it works as needed. In order to configure below you can see the possible properties for the slider.

bxSlider - a little problematic in terms of the initial display of the page load, possible bugs and twitching:

• 1. A bug found in IE. The image is enlarged or shifted in the non-closed area of the block (overflow: hidden - it is not hidden), for this solution apply the style position: relative; and the banner will not be visible beyond the area of the lot with overflow: hidden
• 2. If the content jerks during the initial page load, it is possible that the slider has not loaded yet and up to this point the images were displayed one column down making the page content larger. To solve this case, try to lay out the block so that before loading the slide it would be the same as after loading the slider
• 3. There are bugs with the transfer of a block from one place to another, and when transferring the slider already does not work well (more precisely, it does not work) for this, I described the line below using $('#myslide').bxSlider().reloadSlider({...}), apply after you transfer and remove the old slider so as not to load

To create the first slide:

$('#myslide').bxSlider({ /*meaning*/ });

To create the second slide or N number:

$('#myslide').bxSlider().reloadSlider({ /*meaning*/ });

- Slide transition type:

{
    mode: 'horizontal'
}

- Length of transition between slides:

{
    speed: 500
}

- margin between each slide:

{
    slideMargin : 0
}

- Starting slide index (from scratch):

{
    startSlide : 0
}

- Slide starts in random order:

{
    randomStart : false
}

- Element to use as a slider (ex. '.Slide'). Note: by default, bxSlider will use all immediate children of the slider:

{
    slideSelector : ''
}

- If this is true, then clicking on the "Next" button on the last slide will go to the first slide and vice versa:

{
    infiniteLoop : true
}

- If true, the button "Next" control will be hidden on the last slide and vice versa Note: only used when infiniteLoop false:

{
    hideControlOnEnd : false
}

- Subscription obtained from image title attribute:

{
    captions : false
}

- Use the slide in timer mode (by analogy with a creeping line) set the timer to speed:

{
    ticker : false
}

- The code will stop when the mouse pointer is on the slider. Note: This feature does not work if the animation is done with CSS!:

{
    tickerHover : false
}

- Dynamically adjusts slide height based on picture height:

{
    adaptiveHeight : false
}

- The slide height transitions automatically. Note: only used if adaptiveHeightSpeed: true:

{
    adaptiveHeightSpeed : 500
}

- If any slides contain video, set this parameter to true. Also include plugins / jquery.fitvids.js See http://fitvidsjs.com/ for more information:

{
    video : false
}

- Enable or disable automatic slide resizing. Useful if you need to use a fixed slide width.:

{
    responsive : true
}

- If true, the slider will enable touch transitions across slides:

{
    touchEnabled : true
}

- The number of px must be passed by the bear in order to perform the transition between slides Note: used only if touchEnabled: true:

{
    swipeThreshold : 50
}

Pager

- A pager will be added:

{
    pager : true
}

- If "full", a pager link will be generated for each slide. If "short", a pager will be used (e.g. 1/5):

{
    pagerType : 'full'
}

- Если pagerType: "short", the pager will use this value as the separator character:

{
    pagerShortSeparator : ' / '
}

- The element is used to fill the pager. By default, the pager is added to bx-viewport:

{
    pagerSelector : ''
}

Controls

- If true, will be added "NEXT" / "PREV" management:

{
    controls : true
}

- The text will be used for control "Next":

{
    nextText : 'Next'
}

- The text will be used for control "Prev":

{
    prevText : 'Prev'
}

Auto

- Slides automatically transitions:

{
    auto : false
}

- Amount of time (in ms) between automatic transition:

{
    pause : 4000
}

- If true, will be added "Start" / "Stop" management:

{
    autoControls : false
}

- The text will be used for control "start":

{
    startText : 'Start'
}

- The text will be used for control "stop":

{
    stopText : 'Stop'
}

- When slideshow only play is displayed control "Stop" and vice versa:

{
    autoControlsCombine : false
}

- Direction of auto slide show transitions:

{
    autoDirection : 'next'
}

- The slideshow will pause when the mouse is over the slider:

{
    autoHover : false
}

- Time (in ms) before the start of the slideshow:

{
    autoDelay : 0
}

Carousel

- The minimum number of slides to be shown in the picture. Slides will be compressed to if the carousel gets smaller than the original size:

{
    minSlides : 1
}

- The maximum number of slides to be shown in the picture. Slides will be sized if the carousel gets larger than the original size:

{
    maxSlides : 1
}

- Number of slides to switch to transition. This value must be >= minSlides, and <= maxSlides. If it is zero (default), then the number of fully visible slides will be used:

{
    moveSlides : 0
}

- The width of each slide. This parameter is required for all horizontal carousels!:

{
    slideWidth : false
}