jQueryのbxsliderで左右の矢印ボタンや画像下部の白丸をクリックしてもスライドが1枚目にしかいかない。正しく前後にスライドを移動できるようにしたい

いつもお世話になっております。今回はHPでお手軽にスライドショーを実現できるjQueryのbxsliderで行き詰っていて
どなたかわかる方にご教授お願いしたいと思い投稿しました。

ちゃんと左右へのスライドが動いている顧客の別サイトからヤフートリプルに同様なスライドショーを実現したく
JS，CSSを持ってきて下記のソースを書きました。

ちゃんとスライドショーに自動で切り替わっていくのですが、両端の　＜　＞　ボタンを押すと左右に遷移せず1枚目になぜか遷移してしまいます

調査・調べた事
bxsliderで色々検索して、bxslider自身をいじらなければいけないとかあったものも対応しようとソースを見たら対応済みでした。

実現したい事
＜　＞　の左右ボタンでちゃんとスライドが前後に代わるようにしたいです。

追記
jQuery bxSlider プラグイン https://bxslider.com/

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui">
<title>靴・履物</title>
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="all" href="../css/style.css">
<link rel="stylesheet" type="text/css" media="all" href="../css/hamburger.css">
<link rel="stylesheet" type="text/css" media="all" href="../css/accordion.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/hamburger.js"></script>
<script type="text/javascript">
	// スマホアコーディオン
	jQuery(function(){
		jQuery(".accordionbox dt").on("click", function() {
			jQuery(this).next().slideToggle();
			// activeが存在する場合
			if (jQuery(this).children(".accordion_icon").hasClass('active')) {
				// activeを削除
				jQuery(this).children(".accordion_icon").removeClass('active');
			}
			else {
				// activeを追加
				jQuery(this).children(".accordion_icon").addClass('active');
			}
		});
	});
</script>
<script src="../js/jquery.bxslider.js"></script>
<link rel="stylesheet" href="../css/jquery.bxslider.css">
<script>
jQuery(document).ready(function(){
    jQuery('.bxslider').bxSlider({
        mode: 'fade',
		touchEnabled:false,
		auto:true
    });
});
</script>
<script type="text/javascript">
jQuery(function() {
    var navi = jQuery('.navi-pc');
    var naviHeight = navi.offset().top;
    jQuery(window).scroll(function () {
        var here = jQuery(this).scrollTop();
        if (here >= naviHeight) {
            navi.addClass('fix-navi-pc')
        } else if (here <= naviHeight) {
            navi.removeClass('fix-navi-pc')
        }
    });
});
</script>
</head>
<body>
<header id="backtotop">
	<div class="yahoo_site_title">靴屋商店</div>
	<h1>
		<a href="https://shopping.geocities.jp/kutuya/made-in-japan/top.html">
			<img src="../img/logo_kutuya_yahoo.jpg" class="logo_kutuyashoten">
		</a>
	</h1>
</header>
<section>
<div class="top_main">
	<ul class="big_main_slide bxslider">
		<li>
			<a href="https://store.shopping.yahoo.co.jp/kutuya/sneaker.html">
				<div class="text"><img src="../img/top_catch016.png" class="left_top"></div>
				<div class="black">&nbsp;</div>
				<div class="bg"><img src="../img/top_011.jpg" ></div>
			</a>
		</li>
		<li>
			<a href="about/how-its-made.html">
				<div class="text"><img src="../img/top_catch003.png" class="right_top"> </div>
				<div class="black">&nbsp;</div>
				<div class="bg"><img src="../img/top_main003.jpg"></div>
			</a>
		</li>
		<li>
			<a href="https://store.shopping.yahoo.co.jp/kutuya/high-heel.html">
				<div class="text"><img src="../img/top_catch014.png" class="right_top"></div>
				<div class="black">&nbsp;</div>
				<div class="bg"><img src="../img/top_009.jpg"></div>
			</a>
		</li>
		<li>
			<a href="https://store.shopping.yahoo.co.jp/kutuya/pumps.html">
				<div class="text"><img src="../img/top_catch002.png"></div>
				<div class="black">&nbsp;</div>
				<div class="bg"><img src="../img/top_main002.jpg"></div>
			</a>
		</li>
	</ul>
</div>
</section>