jQueryプラグインでのbxsliderで次へ、前へボタンでの移動が上手くいきません。

###前提・実現したいこと

jQueryのbxsliderを使用してスライドショーを作っています。

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

そのままだと（時間で自動的に動く）大丈夫のですが、次へ、前へボタンを押すとエラーがおきます。
エラー内容
次へボタン：6個のコンテンツでスライドショーを行なっているのですが、ボタンを押すと1→2→3→4→6のように一部コンテンツを飛ばして実行されてしまいます。
前へボタン：前へボタンを5回くらい連続して押すとスライドが動かなくなります。

###該当のソースコード
bxslider実装テストソースコード(Gigafile)

・ファイル階層
css/
bxslider.css・・・bxsliderのcss
test.css・・・元ページのcss
images/
index/
next-arrow.png・・・次へボタン（画像）
prev-arrow.png・・・前へボタン（画像）
js/
index.js・・・bxsliderの編集ファイル
plugin/
bxslider.js・・・bxsliderの元ファイル
scss/
test.scss・・・元ページのscss
test.html・・・実装html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<meta http-equiv="X-UA-Compatible" content="ie=edge">
7	<title>bxslider</title>
8	<!--共通js-->
9	<script type="text/javascript" src="./js/import.js"></script>
10	<!--ページ専用js-->
11	<script type="text/javascript" src="./js/plugin/bxslider.js"></script>
12	<script type="text/javascript" src="./js/index.js"></script>
13	<!--ページ専用css-->
14	<link type="text/css" rel="stylesheet" href="./css/bxslider.css">
15	<link type="text/css" rel="stylesheet" href="./css/test.css">
16</head>
17<body>
18	<div id="menu">
19		<div class="menu-image">
20			<ul class="bxslider">
21		<li></li>
22		<li></li>
23		<li></li>
24		<li></li>
25		<li></li>
26		<li></li>
27		</ul>
28		</div>
29	</div>
30</body>
31</html>
32

css
1#menu { width: 100%; min-width: 1020px; overflow: hidden; }
2#menu .menu-image { position: relative; width: 700px; margin: 0 auto; }
3#menu .menu-image ul { position: absolute; height: 250px; overflow: hidden; margin: 0 auto; }
4#menu .menu-image ul li { width: 700px; height: 250px; background: #fff; margin: 0 auto; padding: 20px; border: 2px solid #0e2544; box-sizing: border-box; }
5#menu .menu-image ul li .image-area { margin: 0 30px 0 0; }
6#menu .menu-image ul li .text-area h3 { font-size: 20px; margin: 25px 0; }
7#menu .menu-image ul li .text-area .text { font-size: 16px; line-height: 1.3; width: 320px; }
8#menu .menu-image ul li .text-area .more { position: relative; text-align: center; width: 150px; height: 30px; margin: 40px auto; font-size: 14px; font-weight: bold; line-height: 30px; border: 2px solid #0e2544; }
9#menu .menu-image ul li .text-area .more a { display: block; width: 100%; height: 100%; color: #0e2544; }
10#menu .menu-image ul li .text-area .more a span { position: absolute; right: 15px; }
11#menu .bx-controls-direction { position: relative; }
12#menu .bx-controls-direction a { position: absolute; top: 47px; }
13#menu .bx-controls-direction a.bx-prev { left: 200px; }
14#menu .bx-controls-direction a.bx-next { right: 180px; }
15#menu .bx-pager .bx-pager-item { width: 20px; height: 20px; margin: 10px 10px 0; }
16#menu .bx-pager .bx-pager-item a { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1px solid #0e2544; box-sizing: border-box; }
17#menu .bx-pager .bx-pager-item a:hover { background: #04090f; opacity: 1; }
18#menu .bx-pager .bx-pager-item a.active { background: #0e2544 !important; }
19

javascript
1$(function(){
2    //メニューのスライド
3    $('.bxslider').bxSlider({
4    	auto: true,
5      pause:4000,
6      autoHover: true,
7      slideMargin: 50
8    });
9});
10