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

</strong></p>

<p><link href="<a href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.css"" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.css"</a> rel="stylesheet"/>

<script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.js"></script></a>

<script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></a>

<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;

}</p>

<p></style></p>

<p>

<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></p>

<p><strong>