$(function(){ 
 
    $('#carousel').each(function(){ 
 
     var slideTime = 200; 
 
     var delayTime = 2000; 
 

 
     var carouselWidth = $(this).width(); 
 
     var carouselHeight = $(this).height(); 
 
     $(this).append('
'); 
 
     $(this).children('ul').wrapAll('
'); 
 

 
     $('#carousel_wrap').css({ 
 
      width: (carouselWidth), 
 
      height: (carouselHeight), 
 
      position: 'relative', 
 
      overflow: 'hidden' 
 
     }); 
 

 
     var listWidth = parseInt($('#carousel_move').children('ul').children('li').css('width')); 
 
     var listCount = $('#carousel_move').children('ul').children('li').length; 
 

 
     var ulWidth = (listWidth)*(listCount); 
 

 
     $('#carousel_move').css({ 
 
      top: '0', 
 
      left: -(ulWidth), 
 
      width: ((ulWidth)*3), 
 
      height: (carouselHeight), 
 
      position: 'absolute' 
 
     }); 
 

 
     $('#carousel_wrap ul').css({ 
 
      width: (ulWidth), 
 
      float: 'left' 
 
     }); 
 
     $('#carousel_wrap ul').each(function(){ 
 
      $(this).clone().prependTo('#carousel_move'); 
 
      $(this).clone().appendTo('#carousel_move'); 
 
     }); 
 

 
     carouselPosition(); 
 

 
     $('#carousel_prev').click(function(){ 
 
      clearInterval(setTimer); 
 
      $('#carousel_move:not(:animated)').animate({left: '+=' + (listWidth)},slideTime,function(){ 
 
       carouselPosition(); 
 
      }); 
 
      timer(); 
 
     }); 
 

 
     $('#carousel_next').click(function(){ 
 
      clearInterval(setTimer); 
 
      $('#carousel_move:not(:animated)').animate({left: '-=' + (listWidth)},slideTime,function(){ 
 
       carouselPosition(); 
 
      }); 
 
      timer(); 
 
     }); 
 

 
     function carouselPosition(){ 
 
      var ulLeft = parseInt($('#carousel_move').css('left')); 
 
      var maskWidth = (carouselWidth) - ((listWidth)*(listCount)); 
 
      if(ulLeft == ((-(ulWidth))*2) || ulLeft == ((-(ulWidth))*2)+1) { 
 
       $('#carousel_move').css({left:-(ulWidth)}); 
 
      } else if(ulLeft == 0) { 
 
       $('#carousel_move').css({left:-(ulWidth)}); 
 
      }; 
 
     }; 
 

 
     timer(); 
 

 
     function timer() { 
 
      setTimer = setInterval(function(){ 
 
       $('#carousel_next').click(); 
 
      },delayTime); 
 
     }; 
 

 
    }); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.menu { 
 
    background-color: gray; 
 
    width: 500px; 
 
    height: 100%; 
 
    float: left; 
 
} 
 

 
.title { 
 
    color: white; 
 
    font-size: 30px; 
 
    margin: 0px 5px; 
 
    margin-left: 40px; 
 
    text-align: center; 
 
} 
 

 
.first { 
 
    padding-top: 30px; 
 
} 
 

 
html, 
 
body, 
 
.menu { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
.relative { 
 
    position: relative; 
 
} 
 

 
li { 
 
    list-style: none; 
 
} 
 

 
li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 20px; 
 
} 
 

 
li a img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.float-right { 
 
    width: calc(100% - 500px); 
 
    overflow: hidden; 
 
    float: right; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.main-container { 
 
    width: 100%; 
 
    float: left; 
 
} 
 

 
.header { 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
.imgArea { 
 
    float: left; 
 
    width: 75%; 
 
    height: 100%; 
 
}

<link rel="stylesheet" href="home.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">script> 
 
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">script> 
 
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">script> 
 
<script src="https://code.jquery.com/jquery-1.11.0.min.js">script> 
 

 
<div class="menu" id="menu"> 
 
    <h2 class="title first">SITEh2> 
 
    <ul class=""> 
 
    <li><a class="home" href="">Homea>li> 
 
    <li><a class="profile" href="">Detaila>li> 
 
    ul> 
 
div> 
 
<div class="imgArea float-right" id="carousel"> 
 
    <ul> 
 
    <li><a href="#"><img src="photo1.jpg" alt="">a>li> 
 
    <li><a href="#"><img src="photo2.jpg" alt="">a>li> 
 
    ul> 
 
div> 
 

 
<script src="carousel.js">script>