CakePHPでslider-pro-masterが使えなくて困っている

CakePHPでslider-pro-masterを使おうと思い、色々試したのですが上手くいきません。

他のライブラリは$this->Html->scriptを使ってきちんと動作するのですが、slider-pro-masterだけがどうしても出来ないのです。JSファイル一つの簡単なものは動くのですが、フォルダ形式のものになるとダメそうです。
webroot>js内にslider-pro-masterのフォルダは入れています。
画像ファイルもwebroot>img内に入れてます。場所は間違っていないと思います。
まずはlayout.ctpの中だけで試しています。この中に$this->Html->scriptでslider-pro-masterを入れておけば、viewファイルでも問題なく使えますか？
下にslider-pro-masterを使った部分のコードを載せておきます。何が原因なのでしょうか？
ちなみにCakePHPを用いないただのhtmlでは問題なく使えました。念のためhtmlの方も載せておきます。

まとめると質問内容は、
slider-pro-masterを動かしたい、
layoutファイルの中に書いておけば、そのファイルを使うviewファイルでは問題なく使えるか、
唐突ですが$this->fetchってなに？(ちょっとイメージがつかなくて)

完全にお手上げ状態です。申し訳ありませんが、わかりやすい解説どなたかお願いします。

PHP
1<?php
2echo $this->Html->script('slider-pro-master/dist/js/jquery.sliderPro.min.js');
3echo $this->Html->css('slider-pro-master/dist/css/slider-pro.min.css');
4echo $this->fetch('script');
5?>
6<script>
7        $( document ).ready(function( $ ) {
8            $('#wide').sliderPro({
9                width: 900,//横幅
10                arrows: true,//左右の矢印
11                buttons: false,//ナビゲーションボタンを出す
12                slideDistance:30,//スライド同士の距離
13                visibleSize: '100%',//前後のスライドを表示
14            });
15        });
16</script>
17<div id="wide" class="slider-pro">
18    <div class="sp-slides">
19        <figure class="sp-slide">
20	    <?php echo $this->Html->image('topimage.jpg', array('class' => "sp-image"));?>
21        </figure>
22        <figure class="sp-slide">
23	    <?php echo $this->Html->image('ginkakuji.jpg', array('class' => "sp-image"));?>
24        </figure>
25        <figure class="sp-slide">
26	    <?php echo $this->Html->image('togetsukyo.jpg', array('class' => "sp-image"));?>
27        </figure>
28    
29    <!--/ sp-slides--></div>
30<!--/ wide--></div>

html
1<head>
2<link rel="stylesheet" href="slider-pro-master/dist/css/slider-pro.min.css"/>
3    
4    <script src="slider-pro-master/dist/js/jquery.sliderPro.min.js"></script>
5    
6    <script>
7        $( document ).ready(function( $ ) {
8            $('#wide').sliderPro({
9                width: 900,//横幅
10                arrows: true,//左右の矢印
11                buttons: false,//ナビゲーションボタンを出す
12                slideDistance:30,//スライド同士の距離
13                visibleSize: '100%',//前後のスライドを表示
14            });
15        });
16    </script>
17</head>
18<body>
19<div id="wide" class="slider-pro">
20            <div class="sp-slides">
21                <figure class="sp-slide">
22                    <img class="sp-image" src="common/topimage.jpg">
23                </figure>
24                <figure class="sp-slide">
25                    <img class="sp-image" src="common/ginkakuji.jpg">
26                </figure>
27                <figure class="sp-slide">
28                    <img class="sp-image" src="common/togetsukyo.jpg">
29                </figure>
30    
31            <!--/ sp-slides--></div>
32        <!--/ wide--></div>
33</body>