CarouFredSel窗口调整大小

Question

我对此非常陌生（所以你必须为我愚蠢）并且我试图了解如何让我的CarouFredsel Slider缩小并在浏览器大小改变时保持比例。图像被切断并向右移动，滑块宽度改变，但不是高度。感谢您的帮助。

下面是一个链接：https://brandon-mciver.squarespace.com 这是我的所有代码。

<script type="text/javascript"> 
$(function() {
$('#slider').carouFredSel({
    width: '100%',
    align: false,
    items: 3,
    items: {
        width: $('#wrapper').width() * 0.15,
        height: 400,
        visible: 1,
        minimum: 1
    },
    scroll: {
        items: 1,
        timeoutDuration : 6000,
        onBefore: function(data) {
            //  find current and next slide
            var currentSlide = $('.slide.active', this),
                nextSlide = data.items.visible,
                _width = $('#wrapper').width();

            //  resize currentslide to small version
            currentSlide.stop().animate({
                width: _width * 0.15
            });     
            currentSlide.removeClass( 'active' );

            //  hide current block
            data.items.old.add( data.items.visible ).find( '.slide-block'  ).stop().fadeOut();                  

            //  animate clicked slide to large size
            nextSlide.addClass( 'active' );
            nextSlide.stop().animate({
                width: _width * 0.7
            });                     
        },
        onAfter: function(data) {
            //  show active slide block
            data.items.visible.last().find( '.slide-block'     ).stop().fadeIn();
        }
    },
    onCreate: function(data){

        //  clone images for better sliding and insert them dynamacly in  slider
        var newitems = $('.slide',this).clone( true ),
            _width = $('#wrapper').width();

        $(this).trigger( 'insertItem', [newitems, newitems.length, false] );

        //  show images 
        $('.slide', this).fadeIn();
        $('.slide:first-child', this).addClass( 'active' );
        $('.slide', this).width( _width * 0.15 );

        //  enlarge first slide
        $('.slide:first-child', this).animate({
            width: _width * 0.7
        });

        //  show first title block and hide the rest
        $(this).find( '.slide-block' ).hide();
        $(this).find( '.slide.active .slide-block' ).stop().fadeIn();
    }
});

//  Handle click events
$('#slider').children().click(function() {
    $('#slider').trigger( 'slideTo', [this] );
});

  //    Enable code below if you want to support browser resizing
$(window).resize(function(){

    var slider = $('#slider'),
        _width = $('#wrapper').width();

    //  show images
    slider.find( '.slide' ).width( _width * 0.15 );

    //  enlarge first slide
    slider.find( '.slide.active' ).width( _width * 0.7 );

    //  update item width config
    slider.trigger( 'configuration', ['items.width', _width * 0.15] );
});

})
</script>


<style type="text/css" media="all">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background: #f9f9f3;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #222;
line-height: 20px;
}

#wrapper {
max-height: 100%;
max-width: 100%;
padding-top: none;
border: 0px solid #fff;
background-color: #fff;
}
#slider {
margin: 75px 0 0 0;
height: 100%;
overflow: hidden;
background: url(https://brandon-mciver.squarespace.com/s/ajax-loader.gif) center center     no-repeat;
}

#slider .slide {
position: relative;
display: none;
height: 400px;
float: left;
background-position: center right;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
border-left: 1px solid #fff;
}

#slider .slide:first-child {
border: none;
}

#slider .slide.active {
cursor: default;
}

#slider .slide-block {
position: absolute;
left: 40px;
bottom: 75px;
display: inline-block;
width: 435px;
background-color: #fff;
background-color: rgba(255,255,255, 0.8);   
padding: 20px;
font-size: 14px;
color: #134B94;
border: 1px solid #fff;
overflow: hidden;
border-radius: 4px;
}

#slider .slide-block h4 {
font-size: 36px;
font-weight: bold;
margin: 0 0 10px 0;
line-height: 1;
}
#slider .slide-block p {
margin: 0;
}

</style>

<div id="wrapper">
<div id="slider">

    <div class="slide" style="background-image: url(https://brandon-    mciver.squarespace.com/s/Rotator_TryChurch_3-1-a0wb.jpg);">
        <div class="slide-block">
            <h4>Title</h4>
            <p>Text</p>
        </div>
    </div>

    <div class="slide" style="background-image: url(https://brandon-mciver.squarespace.com/s/Rotator_TryChurch_3-1-a0wb.jpg);">
        <div class="slide-block">
            <h4>Title</h4>
            <p>Text</p>
        </div>
    </div>

    <div class="slide" style="background-image: url(https://brandon-mciver.squarespace.com/s/Rotator_TryChurch_3-1-a0wb.jpg);">
        <div class="slide-block">
            <h4>Title</h4>
            <p>Text</p>
        </div>
    </div>

</div>
</div>