<script type="text/javascript">
  $(document).ready(function(){
    var first = $('.item').first(),
        last = $('.item').last(),
        itemWidth = first.width(),
        carousel = $('.carousel');

    carousel.prepend(last.clone()).append(first.clone());
    carousel.width(itemWidth * $('.item').length);
    carousel.css({left: -itemWidth});

    $('.prev').on('click', function(e){
      e.preventDefault();
      carousel.animate({left: '+=' + itemWidth},300,function(){
        if(Math.abs(carousel.position().left)<2){
          carousel.css({left: -itemWidth * (carousel.children().length-2)});
        }
      });
      return false;
    });

    $('.next').on('click', function(e){
      e.preventDefault();
      carousel.animate({left: '-=' + itemWidth},300,function(){
        if(Math.abs(carousel.position().left + itemWidth * (carousel.children().length - 1))<2){
          carousel.css({left: -itemWidth});
        }
      });
      return false;
    });
  });
</script>

<style media="screen">

.container{
width : 100%;
}

.carousel-wrapper{
position : relative;
width : 100%;
height : 100%;
overflow : hidden;
}

.carousel{
position : absolute;
}

.carousel li{
display : block;
float : middle;
width : 100%;
height : 100%a;
position : relative;
}

.carousel img{
position : absolute;
z-index : 0;
}

.carousel-nav a{
display : block;
height : 40px;
width : 30px;
font-size : 24px;
line-height : 1.6;
font-weight : 800;
background-color : rgba(255,99,71,0.1);
text-decoration : none;
position : absolute;
top : 50%;
text-align : center;
z-index : 10;
}

.carousel-nav a.prev{
left : 0;
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
}

.carousel-nav a.next{
right : 0;
-webkit-border-top-left-radius:4px;
-webkit-border-bottom-left-radius:4px;
}

</style>

<div class="container">
  <div class="carousel-wrapper">
    <ul class="carousel">
      <li class="item">
        <object>
          <embed src="langs.svg" height="100%" width="100%">
        </object>
      </li>
      <li class="item">
        <object>
          <embed src="mmedia.svg" height="100%" width="100%">
        </object>
      </li>
      <li class="item">
        <object>
          <embed src="langs.svg" height="100%" width="100%">
        </object>
      </li>
      <li class="item">
        <object>
          <embed src="mmedia.svg" height="100%" width="100%">
        </object>
      </li>
    </ul>
    <div class="carousel-nav">
      <a href="" class="prev"><</a>
      <a href="" class="next">></a>
    </div>
    </div>
</div>