bookblock内でのswiper使用（リサイズしないと動作しない原因について）

前提・実現したいこと

bookblock内でswiperを使用したい
なぜリサイズすることで正しく動作するのかが知りたい

発生している問題・エラーメッセージ

bookblock内でswiperが正しく動作しない。
１、ページネーションが消えている
２、スライドが結合し、一続きの長いスライドになっている(ドラッグでスライドさせることは可能)
３、swiperのnext,prevボタンが動作しない
４、ウィンドウをリサイズすると１・２・３が解消し正しく表示される。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/common.css" type="text/css" />
	<link rel="stylesheet" type="text/css" href="css/bookblock.css" />

	<title>test</title>
</head>
	
	
<body>	
	<div id="wrapper">	  
	  <div id="bb-bookblock" class="bb-bookblock">
		
		  <div class="bb-item">		   
<!---------------------------- Swiper START ------------------------------>
			<div class="swiper-container">
			  <div class="swiper-wrapper">
				
				<div class="swiper-slide">
				  <div class="s-right2-wrap">
					<span class="s-right2-text">aaaaaaaaaaa</span>
				  </div>
				</div>

				<div class="swiper-slide">
				  <div class="s-right2-wrap">
					<span class="s-right2-text">bbbbbbbbbbbb</span>
				  </div>
				</div>
			  </div><!-- /swiper-wrapper-->

			  <div class="swiper-button-prev"></div>
			  <div class="swiper-button-next"></div>
			  <div class="swiper-pagination"></div>
			</div> <!-- /#swiper-container--> 
<!----------------------------- Swiper END ---------------------------> 		   
		   </div><!--bb-item end-->	
		
		 <div class="bb-item">
			<p>vvvvvvvvvvvvvvvvvvv</p>
		  </div><!--bb-item end-->
	 </div><!--bb block end-->
		
			<nav class="navigationbutton">
				<a id="bb-nav-first" href="#">最初へ</a>
				<a id="bb-nav-prev" href="#">戻る</a>
				<a id="bb-nav-next" href="#">進む</a>
				<a id="bb-nav-last" href="#">最後へ</a>
			  </nav>

</div><!-- /#wrapper -->
	


<!---------------------------- /script -------------------------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/jquerypp.custom.js"></script>
<script src="js/jquery.bookblock.js"></script>
<script src="js/swiper.js"></script>
	
<script>
$(function() {
$( '#bb-bookblock' ).bookblock();
           
$( '#bb-nav-next' ).on( 'click', function() {
  $( '#bb-bookblock' ).bookblock( 'next' );
  return false;
});
 
$( '#bb-nav-prev' ).on( 'click', function() {
  $( '#bb-bookblock' ).bookblock( 'prev' );
  return false;
});
 
$( '#bb-nav-first' ).on( 'click', function() {
  $( '#bb-bookblock' ).bookblock( 'first' );
  return false;
});
 
$( '#bb-nav-last' ).on( 'click', function() {
  $( '#bb-bookblock' ).bookblock( 'last' );
  return false;
});
 
});
</script>
	
<script>
	
	var mySwiper = new Swiper('.swiper-container',{
		
		navigation: {
    	nextEl: '.swiper-button-next',
    	prevEl: '.swiper-button-prev'
	},
		pagination: {
		el: '.swiper-pagination',
		clickable: true,
		type:"bullets",
		loop:true
    }	
});
	</script>
</body>
</html>