无法控制地响应滑动

Question

我从头开始创建了一个响应式图像滑块。 html和css是我自己的代码，但我的js来自codepen。我的所有包装div和图像的宽度都是100％。我的问题是

标签需要有固定的宽度。我为

标签尝试了100％的宽度，但是里面的图像是宽的。我还希望滑块滑动和淡入。我是javascript的新手。

这是我的HTML代码

<div class="banner_slider_wrapper">
    <div class="slider_arrow_wrapper">
        <img id="arrow_left" class="control_prev" src="<?= IMAGEPATH ?>front_page/phinfo/left button.png">
        <img id="arrow_right" class="control_next" src="<?= IMAGEPATH ?>front_page/phinfo/right button.png">
    </div>
    <div id="slider">       
        <ul>
            <li class="slide">
                <div class="slide_wrapper">
                    <img class="banner_img" src="<?= IMAGEPATH ?>front_page/phinfo/resto banner.jpg">
                    <a href="http://www.tripadvisor.com.ph/Restaurants" target="_blank"><img id="banner_btn_1" src="<?= IMAGEPATH ?>front_page/phinfo/resto button.png"></a>
            </div>
            </li>
            <li class="slide">
                <div class="slide_wrapper">
                <img class="banner_img" src="<?= IMAGEPATH ?>front_page/phinfo/plane banner.jpg">.
                    <div><a href="http://www.airasia.com/ph/en/home.page" target="_blank"><img id="banner_btn_2" class="air_btn" src="<?= IMAGEPATH ?>front_page/phinfo/airport - airasial button.png"></a></div>               
                    <div><a href="https://www.cebupacificair.com/" target="_blank"><img id="banner_btn_3" class="air_btn" src="<?= IMAGEPATH ?>front_page/phinfo/airport - cebul button.png"></a></div>
                    <div><a href="http://www.philippineairlines.com/" target="_blank"><img id="banner_btn_4" class="air_btn" src="<?= IMAGEPATH ?>front_page/phinfo/airport - pal button.png">    </a></div>
                </div>
            </li>
            <li class="slide">
                <div class="slide_wrapper">
                    <img class="banner_img" src="<?= IMAGEPATH ?>front_page/phinfo/hotel banner.jpg">
                    <a href="http://www.hotelclub.com/Philippines/" target="_blank"><img     id="banner_btn_5" src="<?= IMAGEPATH ?>front_page/phinfo/hotel button.png"></a>
                </div>
            </li>
        </ul>

    </div>
</div>

这是我的css代码

/* START OF SLIDER CSS */
.slider_arrow_wrapper{
    position: absolute;
    width: 84%;
    margin: 9% 0 0 0;
    }
    .slider_arrow_wrapper img:hover{
        cursor: pointer;
        opacity: .7;
    }
    #arrow_left {
        float: left;
    }
    #arrow_right{
        float: right;
    }
.banner_slider_wrapper{
    width: 100%;
    height: 45%;
    overflow: hidden;
    }
    #slider{
        width: 100%;
        display: block;
        }
        #slider .ul_wrapper .li_wrapper{
            float: left;
            padding: 0;
            margin: 0;
            width: 100%;
        }
        .slide_wrapper{
            width: 100%;
        }
        .banner_img{
            width: 100%;
        }
        .air_btn{
        width: 22%;
        }
        #banner_btn_1{
            width: 32%;
            margin: -10% 0 0 4%;
        }
        #banner_btn_2{
            margin: -14% 0 0 4%;
        }
        #banner_btn_3{
            margin: -11%0 0 3.5%;
        }
        #banner_btn_4{
            margin: -8% 0 0 3.8%;
        }
        #banner_btn_5{
            margin: -10% 0 0 4%;
            width: 25%
        }

/* END OF SLIDER CSS */

这是我的js代码

jQuery(document).ready(function ($) {

    setInterval(function () {
        moveRight();
    }, 5000);

    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({ width: slideWidth, height: slideHeight });

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');

        });
    };

    $('.control_prev').click(function () {
    moveLeft();
    });

    $('.control_next').click(function () {
    moveRight();
    });

});

谢谢！