スライダーのカルーセルの透過が途中で切れてしまいます。

bxsliderを使用して下記の条件のスライドを作成したいです。
・画像は960px×360px。
・カーセルで3つに並べる。
・両端の画像は幅が途中で切れる。
・両端の画像は透過される。
・ページャーとコントローラーを表示させたい。

実際作成してみたところ、透過部分が途中で切れてしまいます。
また、ページャーとコントローラーも表示されません。
360pxの高さを指定しても変化がなく困っています。

書いたコードは以下の通りです。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title></title>
6<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
7<link rel="stylesheet" href="style.css">
8<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
9<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
10<script>
11$(function(){
12    var slide = $('#slider ul').bxSlider({
13　　　　pager : true,
14        controls : true,
15        slideWidth  : 1000,
16        slideMargin : 20,
17        controls    : true,
18        auto        : true,
19        minSlides   : 3,
20        maxSlides   : 3,
21        moveSlides  : 1,
22        speed       : 1000,
23        pause       : 5000,
24        onSlideAfter: function(){
25            slide.startAuto();
26        }
27    });
28});
29</script>
30</head>
31<body>
32<div id="slider">
33<div id="sliderInner">
34<ul>
35<li><a href="index.html"><img src="https://placehold.jp/960x360.png" alt=""></a></li>
36<li><a href="index.html"><img src="https://placehold.jp/960x360.png" alt=""></li>
37<li><a href="index.html"><img src="https://placehold.jp/960x360.png" alt=""></li>
38<li><a href="index.html"><img src="https://placehold.jp/960x360.png" alt=""></a></li>
39<li><a href="index.html"><img src="https://placehold.jp/960x360.png" alt=""></a></li>
40</ul>
41<div id="slideFilterL"></div>
42<div id="slideFilterR"></div>
43</div><</div>
44</body>
45</html>

CSS
1@charset "UTF-8";
2
3/************************
4共通CSS ドロワーメニュー
5(bxslider使用)
6*************************/
7/*bxsliderで勝手に設定されるclass*/
8.bx-wrapper{
9	border: none;		/*枠線を外す*/
10	box-shadow: none;		/*枠線シャドウを外す*/
11}
12
13
14
15/* スライドショー */
16#slider {
17    overflow:hidden;
18    position:relative;
19    width:100%;
20}
21#slider ul{
22	height:360px;
23}
24
25/*カルーセル用*/
26#sliderInner {
27    position:relative;
28    left:50%;
29    width:1000x;
30    margin-left:-1520px;
31}
32#sliderInner ul {
33    width:960px;
34}
35
36#slideFilterL, #slideFilterR {
37    position:relative;
38    top:10000;
39		bottom:0;
40    width:960px;
41    height:360px;
42    opacity:0.8;
43    filter:alpha(opacity=80);
44    -ms-filter:"alpha( opacity=80 )";
45    background:#fff;
46}
47#slideFilterL {
48    left:0;
49		height:360px;
50}
51#slideFilterR {
52    right:0;
53		height:360px;
54}
55
56.bx-wrapper {
57    margin:0 auto;
58    position:relative;
59}
60
61.bx-wrapper .bx-pager {
62    margin:0 auto;
63    width:960px;
64    background:#fff;
65}
66
67.bx-wrapper .bx-prev:hover {
68    background-position:0 0;
69}
70
71.bx-wrapper .bx-next:hover {
72    background-position:-43px 0;
73}
74
75.bx-wrapper .bx-controls-direction a {
76    position:absolute;
77    top:109px;
78    outline:0;
79    width:32px;
80    height:32px;
81    text-indent:-9999px;
82    z-index:9999;
83}
84
85/* ページャー */
86.bx-wrapper .bx-pager {
87    padding-top:20px;
88    text-align:center;
89    font-size:.85em;
90    font-family:Arial;
91    font-weight:bold;
92    color:#666;
93}
94
95.bx-wrapper .bx-pager .bx-pager-item,
96.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
97    display:inline-block;
98    *zoom:1;
99    *display:inline;
100}
101
102.bx-wrapper .bx-pager.bx-default-pager a {
103    display:block;
104    width:10px;
105    height:10px;
106    margin:0 5px;
107    outline:0;
108    text-indent:-9999px;
109    -moz-border-radius:50%;
110    -webkit-border-radius:50%;
111    border-radius:50%;;
112    background:#666;
113}
114
115.bx-wrapper .bx-pager.bx-default-pager a:hover,
116.bx-wrapper .bx-pager.bx-default-pager a.active {
117    background:#000;
118}
119