为什么我的jquery幻灯片放映能在除IE 11之外的所有浏览器中工作？

Question

我正在使用一个简单的jquery幻灯片演示，该幻灯片是我从下面链接的网站下载的。它有3张幻灯片，显示了一些篮球运动员。幻灯片显示在Chrome和Edge中正确显示，但是在IE 11中（准确地说是11.76），我收到一条错误消息“对象不支持属性或方法'flexslider'。”有什么方法可以使此幻灯片在IE 11中正常工作？我想要的是让用户单击页面底部的“公牛锚链接测试”链接后，直接进入幻灯片的“公牛”幻灯片。

http://flexslider.woothemes.com/asnavfor-rtl.html

我已经在其他浏览器上对此进行了测试，当我单击页面底部的团队定位链接时，页面加载时会将我带到相应团队的幻灯片。但是在IE 11中，我看到所有3张幻灯片都卡在3张幻灯片的幻灯片的第一张幻灯片中，另外2张幻灯片则保持空白。

<script src="https://code.jquery.com/jquery-1.9.0.min.js" integrity="sha256-f6DVw/U4x2+HjgEqw5BZf67Kq/5vudRZuRkljnbF344=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://louisville.edu/artsandsciences/styles/experimental/flexslider.css" type="text/css" media="screen" />
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/jquery.flexslider.js"></script>
<script defer src="https://gist.githubusercontent.com/bergantine/3868451/raw/a67f7e7989068013bfd0341cd523b843105c6d8d/gistfile1.js"></script> <!--referred to as modernizr.js in the flexslider package-->


<script type="text/javascript">


    $(window).load(function() {

      $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 230,
        itemMargin: 5,
        asNavFor: '#slider'
      });

      $('#slider').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        sync: "#carousel"
      });   

        /*when this page loads, one of the teams will be pre-selected based on the anchor link in the URL*/
        if(window.location.hash == "#Celtics") {TeamTransition('2', "https://d1si3tbndbzwz9.cloudfront.net/basketball/team/1/logo.png");}
        else if(window.location.hash == "#Bulls") {TeamTransition('3', "http://www.logospng.com/images/80/chicago-watercolor-skyline-silhouette-vector-download-80974.png");}
        else {TeamTransition('1', "https://d1si3tbndbzwz9.cloudfront.net/basketball/team/18/logo.png");}

    });


    $(document).ready(function() {

        $("#carousel span").click(function(){
            $("#carousel span").css("background-color","#e0e0e0");
            $("#carousel span").css("color","#0D3347");
            $(this).css("background","#3d758c");
            $(this).css("color","white");   
            var TeamButtonText = $(this).text();    
            var TeamLogoLink = "https://d1si3tbndbzwz9.cloudfront.net/basketball/team/18/logo.png";
            if(TeamButtonText == "Celtics"){TeamLogoLink = "https://d1si3tbndbzwz9.cloudfront.net/basketball/team/1/logo.png"}
            else if(TeamButtonText == "Bulls"){TeamLogoLink = "http://www.logospng.com/images/80/chicago-watercolor-skyline-silhouette-vector-download-80974.png"}
            else{TeamButtonText == "https://d1si3tbndbzwz9.cloudfront.net/basketball/team/18/logo.png"}
            $("#banner_studio_logo_pic").animate({height:0},300,function() {
                $('#banner_studio_logo_pic').attr("src", TeamLogoLink);
                $("#banner_studio_logo_pic").animate({height:75},300);
             });
        });     
    });

    function TeamTransition(slideNumber, studioIconLink) {
        $('#carousel .flex-viewport .slides li:nth-child(' + slideNumber + ') a span').click();
    }


</script>

<style>

    #topBanner{background: #368dd4; height: 120px;}

    #topBanner span{
        display: inline-block; 
        margin-left: 16px; 
        color: white; 
        margin-top: 35px; 
        font-size: 37px !important;
    }

    #topBanner #banner_studio_logo_pic{
        margin-left: 50px;
        height: 75px;
        vertical-align: middle;
        margin-bottom: 14px;
    }

    #ContentContainer{height: 500px; background-color: #c5c5c5;}
    .flexslider{border: none !important;}
    #carousel{background-color: transparent;}
    #carousel li{text-align: center;}

    #carousel span{
        color: #0D3347; 
        font-size: 20px;
        line-height: 37px;
        text-align: center;
        display: inline-block;
        padding: 0px 10px 0px 10px;
        background-color: #e0e0e0;
    }

    #carousel .slides{margin-top: 16px;}    
    #slider{background: none; width: 737px !important;}
    #slider .flex-nav-prev a, #slider .flex-nav-next a{display: none;}   /*hide the left and right arrows of the slide show body*/
    .Team_Container{width: 737px; text-align: center;}
    .grid_cell{display: inline; margin-right: 33px;}

</style>


<div id="topBanner">
    <span>Teams</span>
    <img id="banner_studio_logo_pic" src="https://d1si3tbndbzwz9.cloudfront.net/basketball/team/18/logo.png">
</div>

<div id="ContentContainer">


    <div id="carousel" class="flexslider">
      <ul class="slides">
        <li><a href="#"><span style="background: rgba(22, 93, 122, 0.5); color: white;">Lakers</span></a></li>
        <li><a href="#"><span>Celtics</span></a></li>
        <li><a href="#"><span>Bulls</span></a></li>
      </ul>
    </div>  

    <div id="slider" class="flexslider">
      <ul class="slides">

        <li id="slide1">
            <div class="Team_Container">    
                <div class="grid_cell"><span>Magic Johnson</span></div>         
                <div class="grid_cell"><span>James Worthy</span></div>          
            </div>          
        </li>  

        <li id="slide2">
            <div class="Team_Container">    
                <div class="grid_cell"><span>Larry Bird</span></div>
                <div class="grid_cell"><span>Kevin McHale</span></div>
            </div>          
        </li>

        <li id="slide3">
            <div class="Team_Container">
                <div class="grid_cell"><span>Michael Jordan</span></div>
                <div class="grid_cell"><span>Scottie Pippen</span></div>    
            </div>  
        </li>
      </ul>
    </div>

</div>

<p><a href="#Lakers" onclick="location.hash='Lakers'; location.reload();">Lakers anchor link test</a></p>
<p><a href="#Celtics" onclick="location.hash='Celtics'; location.reload();">Celtics anchor link test</a></p>
<p><a href="#Bulls" onclick="location.hash='Bulls'; location.reload();">Bulls anchor link test</a></p>

当我查看IE控制台时，收到消息“对象不支持属性或方法'flexslider'”。