bxSlider显示所有幻灯片而不是一个

时间:2013-11-23 18:07:35

标签: javascript jquery html css bxslider

请帮帮我。我在我正在构建的网站上使用bx-slider,当我加载页面时,幻灯片是页面顶部的小缩略图,但是当我调整窗口大小时,它们会立即适应它们。这同样适用于移动设备屏幕,如果我旋转屏幕,则幻灯片100%适合它们。

我已经尝试删除“响应式”选项,认为这是问题但是没有用。

这是javascript的一部分(我没有添加任何自定义代码):

;(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() {}
}

和CSS(我在列表项中添加了一些样式):

        .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;
        }

这是JS小提琴:http://jsfiddle.net/Yq3RM/417/

以下是效果的屏幕截图:bx slider effect

谢谢

1 个答案:

答案 0 :(得分:0)

slideWidth对于您的配置是必需的

“ slideWidth-每张幻灯片的宽度。此设置对于所有水平轮播都是必需的!”

在“轮播”下 https://bxslider.com/options/