bxSlider 框架比内容宽

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 框架比内容宽

bxSlider frame wider than content

html

javascript

css

jquery

bxslider