Monacaでのbxslider

前提・実現したいこと

Monacaという開発環境でbxsliderを使おうと思っていますが、画像同士が横並びに配置されるだけでスライダーのようになりません。
ソースがおかしいであったりしっかりJqueryが読み込まれてないのかを確認するためにMonacaではなく一般的なhtmlに記載してwebで試した所bxslider本来のようにスライドして動きました。
下記にコードを記載させて頂きます。
何かおかしい点やこのままではMonacaでは動かない等ご存じの方いらっしゃいましたら指摘頂ければと思います。

該当のソースコード

html
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/angular/angular.min.js"></script>
9  <script src="lib/onsenui/js/onsenui.min.js"></script>
10  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
11  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
12        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
13        <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
14
15  <link rel="stylesheet" href="components/loader.css">
16  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
17  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
18  <link rel="stylesheet" href="css/style.css">
19
20  <script>
21    ons.bootstrap()
22      .controller('AppController', function() {
23      });
24    ons.ready(function() {
25        console.log("Onsen UI is ready!");
26    });
27
28
29    $(function() {
30        $('.bxslider').bxSlider();
31    });
32
33  </script>
34</head>
35<body>
36  <ons-page ng-controller="AppController as app">
37    <ons-toolbar>
38      <div class="center">My App - {{app.title}}</div>
39    </ons-toolbar>
40
41    <ons-tabbar position="auto">
42      <ons-tab page="page1.html" label="Page 1" icon="square" active></ons-tab>
43      <ons-tab page="page2.html" label="Page 2" icon="square"></ons-tab>
44    </ons-tabbar>
45  </ons-page>
46
47  <ons-template id="page1.html">
48    <ons-page ons-show="app.title = 'Page 1'">
49      <div class="content" style="text-align: center">
50        <div class="shop_images" >
51            <ul class="bxslider" >
52                <li><img src="images/****.png" alt=""  style="float:left;"></li>
53                <li><img src="images/****.png" alt=""  style="float:left;"></li>
54            </ul>
55        </div>
56      </div>
57    </ons-page>
58  </ons-template>
59
60  <ons-template id="page2.html">
61    <ons-page ons-show="app.title = 'Page 2'">
62      <div class="content" style="text-align: center">
63        <p>Page 2 content</p>
64      </div>
65    </ons-page>
66  </ons-template>
67
68</body>
69</html>

m.ts10806

2018/06/06 00:51

「うまく動作しない」「うまくいかない」では何が起きているか伝わりません。「○○のようになるはずなのに××となってしまう」のような形で「ゴール」と「現象（エラーメッセージなども含む）」を明確にしてください。https://teratail.com/help/question-tips#questionTips3-4-1