Search code examples
javascriptjqueryhtmlcssbxslider

bxSlider displaying all slides instead of just one

Please help me. I'm using bx-slider on a website I'm building and when I load the page the slides are tiny thumbnails at the top of the page but when I resize the window they immediately fit like they should. The same applies on a mobile device screen, if I rotate the screen the slides fit 100% like they should.

I've tried removing the "responsive" option thinking it was the problem but that didn't work.

Here's a portion of the javascript (I haven't added any custom code):

;(function($){

var plugin = {};

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: true,
    adaptiveHeightSpeed: 500,
    video: false,
    useCSS: true,
    preloadImages: 'visible',
    responsive: true,

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

    // PAGER
    pager: false,
    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() {}
}

and the CSS (I've added some styling to the list items):

        .bx-wrapper {
            position: relative;
            margin: 0 auto;
            padding: 0;
            *zoom: 1;
        }

        .bx-wrapper img {
            width: 100%;
            display: block;
        }

        /** THEME
        ===================================*/

        .bx-wrapper .bx-viewport {
            background: #fff;
            height:100% !important;
        }

        .bx-wrapper {
            height:100% !important;
        }

        .bx-wrapper .bx-viewport ul > li
        {
        height:100% !important;
        overflow:hidden !important;
        }
        .bx-wrapper .bx-pager,
        .bx-wrapper .bx-controls-auto {
            position: absolute;
            bottom: -30px;
            width: 100%;
        }

        /* LOADER */

        .bx-wrapper .bx-loading {
            min-height: 50px;
            background: url(images/bx_loader.gif) center center no-repeat #fff;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2000;
        }

        /* PAGER */

        .bx-wrapper .bx-pager {
            text-align: center;
            font-size: .85em;
            font-family: Arial;
            font-weight: bold;
            color: #666;
            padding-top: 20px;
        }

        .bx-wrapper .bx-pager .bx-pager-item,
        .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
            display: inline-block;
            *zoom: 1;
            *display: inline;
        }

        .bx-wrapper .bx-pager.bx-default-pager a {
            background: #666;
            text-indent: -9999px;
            display: block;
            width: 10px;
            height: 10px;
            margin: 0 5px;
            outline: 0;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
        }

        .bx-wrapper .bx-pager.bx-default-pager a:hover,
        .bx-wrapper .bx-pager.bx-default-pager a.active {
            background: #000;
        }

        /* DIRECTION CONTROLS (NEXT / PREV) */

        .bx-wrapper .bx-prev {
            left: 10px;
            background: url(../images/controls.png) no-repeat 0 -32px;
        }

        .bx-wrapper .bx-next {
            right: 10px;
            background: url(../images/controls.png) no-repeat -43px -32px;
        }

        .bx-wrapper .bx-prev:hover {
            background-position: 0 0;
        }

        .bx-wrapper .bx-next:hover {
            background-position: -43px 0;
        }

        .bx-wrapper .bx-controls-direction a {
            position: absolute;
            top: 50%;
            margin-top: -16px;
            outline: 0;
            width: 32px;
            height: 32px;
            text-indent: -9999px;
            z-index: 9999;
        }

        .bx-wrapper .bx-controls-direction a.disabled {
            display: none;
        }

        /* AUTO CONTROLS (START / STOP) */

        .bx-wrapper .bx-controls-auto {
            text-align: center;
        }

        .bx-wrapper .bx-controls-auto .bx-start {
            display: block;
            text-indent: -9999px;
            width: 10px;
            height: 11px;
            outline: 0;
            background: url(images/controls.png) -86px -11px no-repeat;
            margin: 0 3px;
        }

        .bx-wrapper .bx-controls-auto .bx-start:hover,
        .bx-wrapper .bx-controls-auto .bx-start.active {
            background-position: -86px 0;
        }

        .bx-wrapper .bx-controls-auto .bx-stop {
            display: block;
            text-indent: -9999px;
            width: 9px;
            height: 11px;
            outline: 0;
            background: url(images/controls.png) -86px -44px no-repeat;
            margin: 0 3px;
        }

        .bx-wrapper .bx-controls-auto .bx-stop:hover,
        .bx-wrapper .bx-controls-auto .bx-stop.active {
            background-position: -86px -33px;
        }

        /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

        .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
            text-align: left;
            width: 80%;
        }

        .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
            right: 0;
            width: 35px;
        }

        /* IMAGE CAPTIONS */

        .bx-wrapper .bx-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            background: #666\9;
            background: rgba(80, 80, 80, 0.75);
            width: 100%;
        }

        .bx-wrapper .bx-caption span {
            color: #fff;
            font-family: Arial;
            display: block;
            font-size: .85em;
            padding: 10px;
        }

Here's the JS Fiddle: http://jsfiddle.net/Yq3RM/417/

Here's a screenshot of the effect: bx slider effect

Thank you

Solution

  • slideWidth is necessary for your configuration

    "slideWidth - The width of each slide. This setting is required for all horizontal carousels!"

    Under 'carousel' https://bxslider.com/options/