Image slide left not working

I want to slide my image to left when click on the right arrow of the image slider. I cant apply the slide left animation.When click right arrow current image hide and next image is showing but not slide animation is happening

$('#image-content img:first').addClass('active');
        //ON CLICK ON RIGHT ARROW DISPLAY NEXT
        currentIndex = $('#image-content img').index(this) + 1;
        
        $('.right-arrow').on('click', function() {
        if($('#image-content img.active').index() < ($('#image-content img').length - 1)){
        currentIndex++;
        $('#image-content img.active').animate({width: 'toggle'}).removeClass('active').next('#image-content img').addClass('active');     
        }
        else {
        currentIndex = 1;
        $("#image-content img").removeClass("active");
        $('#image-content img').eq(currentIndex - 1).addClass('active');          
        }
        });
        //ON CLICK LEFT ARROW DISPLAY PREVIOUS IMAGE
    
       $('.left-arrow').on('click', function() {
        if ($('#image-content img.active').index() > 0) {
        currentIndex--;
        $('#image-content img.active').removeClass('active').prev('#image-content img').addClass('active');
        } else {
        currentIndex = $('#image-content img').length;
        $("#image-content img").removeClass("active");
        $('#image-content img').eq(currentIndex - 1).addClass('active')
        }
        });

#image-content{
    height: 400px;
    width: 100%;
}
#image-content img{
    position: absolute;
    height: auto;
    width: auto;
    max-height: 380px;
    max-width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: none
}
#image-content img.active{
    display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
                <div class="col-1 text-right nav-direction">
                   <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/136304-200.png" class="img-fluid left-arrow" alt="">
                </div> 
                  <div class="col-9 text-center">
                    <!-- Main Images -->  
                    <div id="image-content"> 
                     <!--(start foreach)-->
                       <img src="http://letssunday.com/assets/upload/product/5aa63613ea17a107011.jpg" class="img-fluid"> 
                       <img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dc88ad258479.jpeg" class="img-fluid"> 
                       <img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97d45e75220450.jpeg" class="img-fluid"> 
                       <img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dcf94f110046.jpeg" class="img-fluid"> 
                       <img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97e6268c505542.jpeg" class="img-fluid"> 
                     <!-- (end foreach)-->
                    </div> 
                    <!-- End main Images-->  
  
                  </div>   
                   <div class="col-1 text-left nav-direction">
                   <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png" class="img-fluid right-arrow" alt="">
                </div> 
              </div>

I just want to slide it to left side.Currently working fine except animation.Help Please

Solution

There's another way for it. Use bootstrap:

div#myCarousel, div#myCarousel > div.carousel-inner, div#myCarousel > div.carousel-inner > div.item{
 /* selector to edit divs */
}
div#myCarousel > div.carousel-inner > div.item > img{
 /* selector to edit images */
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Carousel Example</h2>  
  <div class="row">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img class="img-responsive col-xs-12" src="http://letssunday.com/assets/upload/productImageGallary/5a5da97d45e75220450.jpeg" alt="Los Angeles" style="width:100%;">
      </div>
      <div class="item">
        <img class="img-responsive col-xs-12" src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dcf94f110046.jpeg" alt="Chicago" style="width:100%;">
      </div>
      <div class="item">
        <img class="img-responsive col-xs-12" src="http://letssunday.com/assets/upload/productImageGallary/5a5da97e6268c505542.jpeg" alt="New york" style="width:100%;">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
</div>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

it's working like a charm