javascript - Nav-slider using buttons and jQuery code wont work in Safari or IE -

i created slider displays different content, customer reviews. used jquery , css add , remove classes. when next or prev button clicked reviews change. code works in chrome, not in other browsers. can't figure out why is. please help. below display html, css, , jquery code relates this.

var main = function() {   "use strict";    $('.arrow-next').click(function() {  	        var currentslide = $('.active-slide');      var nextslide = currentslide.next();        var currentdot = $('.active-dot');      var nextdot = currentdot.next();        if(nextslide.length === 0) {        nextslide = $('.slide').first();        nextdot = $('.dot').first();      }            currentslide.fadeout(600).removeclass('active-slide');      nextslide.fadein(600).addclass('active-slide');  	      currentdot.removeclass('active-dot');      nextdot.addclass('active-dot');  	    });        $('.arrow-prev').click(function() {      var currentslide = $('.active-slide');      var prevslide = currentslide.prev();        var currentdot = $('.active-dot');      var prevdot = currentdot.prev();        if(prevslide.length === 0) {        prevslide = $('.slide').last();        prevdot = $('.dot').last();      }            currentslide.fadeout(600).removeclass('active-slide');      prevslide.fadein(600).addclass('active-slide');        currentdot.removeclass('active-dot');      prevdot.addclass('active-dot');    });    };      $(document).ready(main);

.nav-toggle {    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;    text-decoration: none;    text-indent: -300px;    position: relative;    overflow: hidden;    width: 60px;    height: 55px;    float: right;  }    .nav-toggle:before {    color: #fff; /* edit change icon color */    font: normal 28px/55px "responsivenav"; /* edit font-size (28px) change icon size */    text-transform: none;    text-align: center;    position: absolute;    content: "\2261"; /* hamburger icon */    text-indent: 0;    speak: none;    width: 100%;    left: 0;    top: 0;  }  .nav-toggle.active:before {    font-size: 24px;    content: "\78"; /* close icon */  }

<section id="reviews">        <h1 class="purple sliding-middle-out3">reviews</h1>        <h4 class="grey">checkout others saying beary!</h4>                <div class="wrapper2">        <div class="slider">         <div class="slide active-slide">          <div class="container">          <div class="slide-copy ">          <p id="quote1">                  studio has changed life better.  every week excited going next dance class.  i've never had fun losing weight , getting shape before!! </p>                  <h4 class="grey">- jane s.</h4>          </div><!--close of slide-copy div-->          </div><!--close of container div-->      </div><!--close of slide div -->            <div class="slide">  	<div class="container">  	<div class="slide-copy ">  	<p id="quote2">          	thanks beary got ass off streets , inside studio.  i've learn challenge anger positive instead of taking out against others.  studio has made me better person.  love beary!</p>              <h4 class="grey">- terry g.</h4>  	</div><!--close of slide-copy div-->  	</div><!--close of container div-->  </div><!--close of slide div -->        <div class="slide">          <div class="container">          <div class="slide-copy ">          <p id="quote3">              experience has helped me clean life.  no longer feel need use drugs through day.  think new dance moves , how can't wait learn more.  </p>                  <h4 class="grey">- jamie r.</h4>          </div><!--close of slide-copy div-->          </div><!--close of container div-->      </div><!--close of slide div -->            <div class="slide">  	<div class="container">  	<div class="slide-copy ">  	<p id="quote4">          	beary knows how push people next level.  never before have i've gone place keeps me motivated after leave.  highly recommend dance studio friends.  great place meet new friends! </p>              <h4 class="grey">- jamie l.</h4>  	</div><!--close of slide-copy div-->  	</div><!--close of container div-->  </div><!--close of slide div -->    </div><!--close of slider div-->      </div><!-- end of wrapper div-->      <!--opening of slider review controls -->   <div class="slider-nav">   	<button><p class="arrow-prev">prev</p></button>      <ul class="slider-dots">      	<li class="dot active-dot">&bull;</li>          <li class="dot">&bull;</li>          <li class="dot">&bull;</li>          <li class="dot">&bull;</li>      </ul>          <button><p class="arrow-next">next</p></button>   </div><!--closing of slider review controls -->              </section>