스와이퍼 스라이드 옆에 살짝 보이게 할려는데 도움이 필요합니다

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
(function($){
  $(document).ready(function(){
    var swiper= new Swiper('.swiper', {
      //effect: 'coverflow',
      //grabCursor: true,
      draggable : false, 
      slidesPerView: 1,
      loop: false ,
      slidesPerGroup : 2,
      slidesPerView: 1,
    loopFillGroupWithBlank : false ,
      navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
      spaceBetween: 10,
    
    })
  });
})(jQuery);
</script>
<style>
.container {
  width: 100%;
  height: 500px;
  padding: 20px 10px;
  background-color: lightgrey;
  overflow: hidden;
  margin: 0 auto;
  box-sizing: border-box;
}
.swiper {
  width:400px;
  height: 100%;
}
.swiper-slide {
  background: white;
width:500px;
}

</style>


<div class="container">  
  <div class="swiper">    
    <div class="swiper-wrapper">      
      <div class="swiper-slide">1</div>      
      <div class="swiper-slide">2</div>      
      <div class="swiper-slide">3</div>      
      <div class="swiper-slide">4</div>      
      <div class="swiper-slide">5</div>    
    </div>  
  </div>
 <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>