Question

这里只是javascript和jquery的新手。我对图像的外观有点麻烦。框架没有缩小以适合图像。有什么建议吗？

www.helencrolls.com

HTML

<!--  Calling the bxSlider functionality -->
<!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  -->
<script>
    $(document).ready(function(){
        $('.bxslider').bxSlider({
            <!-- slideWidth: 600-->
        });
    });
</script>

Javascript默认

var defaults = {

    // GENERAL
    mode: 'fade', 
    slideSelector: '',
    infiniteLoop: true,
    hideControlOnEnd: false,
    speed: 500,
    easing: null,
    slideMargin: 0,
    startSlide: 0,
    randomStart: false,
    captions: true,
    ticker: false,
    tickerHover: false,
    adaptiveHeight: true,
    adaptiveHeightSpeed: 500,
    video: false,
    useCSS: true,
    preloadImages: 'visible',
    responsive: false,
    slideZIndex: 50,
    wrapperClass: 'bx-wrapper',

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

    // 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: 2500,
    autoStart: true,
    autoDirection: 'next',
    autoHover: false,
    autoDelay: 0,
    autoSlideForOnePage: false,

    // CAROUSEL
    minSlides: 1,
    maxSlides: 1,
    moveSlides: 0,
    slideWidth: 0,

    // CALLBACKS
    onSliderLoad: function() {},
    onSlideBefore: function() {},
    onSlideAfter: function() {},
    onSlideNext: function() {},
    onSlidePrev: function() {},
    onSliderResize: function() {}
}

Answer 1

而不是max-with尝试以下操作，让我知道它是否满足您的需求：

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

bxSlider框架比内容更宽

1 个答案: