滑块在某些浏览器中不起作用

Question

我有一个滑块，只在屏幕有一定宽度时显示，我在不同的浏览器上测试它。它只适用于Firefox而不是其他浏览器，如谷歌浏览器，IE和Safari。

这是我的HTML

<div class="row max-width portfolio-container">
    <div class="col-lg-12 col-md-12 col-sm-12">
        <a class="port-left-arrow port-nav">
            <img src="images/left-arrow.png">
        </a>
        <div class="portfolioBanner-wrapper" style="">
            <div class="portfolio_wrapper port-inactive_portfolio" style="left: 100%;">
                <img class="bgheight" src="http://localhost:8888/My-site/portfolio_images/vertical-image.jpg" style="display: block; left: 50%; margin-left: -130.5px; opacity: 1;">
            </div>  

            <div class="portfolio_wrapper port-inactive_portfolio" style="left: -100%;">
                <img class="bgheight" src="http://localhost:8888/My-site/portfolio_images/omd-6.jpg" style="left: 50%; margin-left: -260.5px;">
            </div>

            <div class="portfolio_wrapper port-active_portfolio" style="left: 0%;">
                <img class="bgheight" src="http://localhost:8888/My-site/portfolio_images/omd-5.jpg" style="left: 50%; margin-left: -260.5px;">
            </div>

            <div class="portfolio_wrapper port-inactive_portfolio" style="left: 100%;">
                <img class="bgheight" src="http://localhost:8888/My-site/portfolio_images/omd-4.jpg" style="left: 50%; margin-left: -260.5px;">
            </div>

            <div class="portfolio_wrapper port-inactive_portfolio" style="left: 100%;">
                <img class="bgheight" src="http://localhost:8888/My-site/portfolio_images/omd-3.jpg" style="left: 50%; margin-left: -260.5px;">
            </div>

            <div class="portfolio_wrapper port-inactive_portfolio" style="left: 100%;">
                <img class="bgheight" src="http://localhost:8888/My-site/portfolio_images/omd-2.jpg" style="left: 50%; margin-left: -260.5px;">
            </div>

            <div class="portfolio_wrapper port-inactive_portfolio" style="left: 100%;">
                <img class="bgheight" src="http://localhost:8888/My-site/portfolio_images/omd-1.jpg" style="left: 50%; margin-left: -260.5px;">
            </div>
        </div>
        <a class="port-right-arrow port-nav">
            <img src="images/right-arrow.png">
        </a>
    </div>
</div>

这是我的jquery

$(".port-nav").click(function(){
    if($(".port-active_portfolio").css("left") != "0px") return false;
    $direction = ($(this).hasClass("port-left-arrow") ? "left" : "right");

    var activeBanner = 100;
    if($direction == "right"){
        $(".port-inactive_portfolio").css("left","100%");
        activeBanner = -100;
        if($(".port-active_portfolio").next().length < 1){
            $(".portfolio_wrapper").eq(0).animate({"left":0+"%"}, 500,function(){
                $(this).addClass("port-active_portfolio").removeClass("port-inactive_portfolio");
            });
        }else{
            $(".port-active_portfolio").next().animate({"left":0+"%"}, 500,function(){
                $(this).addClass("port-active_portfolio").removeClass("port-inactive_portfolio");
            });
        }
    }else{
        $(".port-inactive_portfolio").css("left","-100%");
        if($(".port-active_portfolio").prev().length < 1){
            $(".portfolio_wrapper").eq($(".portfolio_wrapper").length-1).animate({"left":0+"%"}, 500,function(){
                $(this).addClass("port-active_portfolio").removeClass("port-inactive_portfolio");
            });
        }else{
            $(".port-active_portfolio").prev().animate({"left":0+"%"}, 500,function(){
                $(this).addClass("port-active_portfolio").removeClass("port-inactive_portfolio");
            });
        }
    }

    $(".port-active_portfolio").animate({"left":activeBanner+"%"}, 500,function(){
        $(this).addClass("port-inactive_portfolio").removeClass("port-active_portfolio");
    });

}); 

这是我的css

.portfolioBanner-wrapper {
    display: block;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 80%;
    padding:0 0 50% 0;
}

.portfolio_wrapper{
    height: 100%;
    margin: 0;
    min-height: 100%;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.portfolio_wrapper img {
    position: absolute;
    top: 0;
}

.port-inactive_portfolio{
    left: -100%;
}
.portfolio_wrapper .relative{
    width: 100%;
    height: 100%;
    position: relative;
}

.port-right-arrow {
    position: absolute;
    right: 30px !important;
    top: 29.7%;
    z-index: 1000;
    display: block;
}

.port-right-arrow img {
    width: 30px;
}

.port-left-arrow {
    background: none repeat scroll 0 0 pink;
    left: 9px;
    position: absolute;
    width: 67px;
    top: 29.7%;
    display: block;
}

.port-left-arrow img {
    width: 30px;
}

.office-images {
    margin-top: 71px;
}

.content-inner {
    margin-left: 24px;
    width: 67%;
}

.bg-home {
    height: 553px;
}