Javascript 未捕获的TypeError:$（…）。carousel不是使用bootstrap 3 jquery-1.11.1的函数

您好，我找到了一个

carousel

并尝试将其应用到我的laravel项目中，但遗憾的是它给了我

未捕获的TypeError:$（…）。carousel不是一个函数

知道我有

bootstrap3

和

jquery-1.11.1

details.blade.php

<div class="container">
    <div id="main_area">
        <!-- Slider -->
        <div class="row">
            <div class="col-sm-6" id="slider-thumbs">
                <!-- Bottom switcher of slider -->
                <ul class="hide-bullets">
                    <li class="col-sm-3">
                        <a class="thumbnail" id="carousel-selector-16">
                            <img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/Thumb/falko_gallery_accessories16.jpg">
                        </a>
                    </li>

                    <li class="col-sm-3">
                        <a class="thumbnail" id="carousel-selector-1"><img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/Thumb/falko_gallery_accessories01.jpg"></a>
                    </li>

                    <li class="col-sm-3">
                        <a class="thumbnail" id="carousel-selector-2"><img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/Thumb/falko_gallery_accessories02.jpg"></a>
                    </li>
                </ul>
            </div>
            <div class="col-sm-6">
                <div class="col-xs-12" id="slider">
                    <!-- Top part of the slider -->
                    <div class="row">
                        <div class="col-sm-12" id="carousel-bounding-box">
                            <div class="carousel slide" id="myCarousel">
                                <!-- Carousel items -->
                                <div class="carousel-inner">
                                    <div class="active item" data-slide-number="16">
                                        <img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/falko_gallery_accessories16.jpg">
                                    </div>
                                    <div class="item" data-slide-number="1">
                                        <img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/falko_gallery_accessories01.jpg">
                                    </div>
                                    <div class="item" data-slide-number="2">
                                        <img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/falko_gallery_accessories02.jpg">
                                    </div>
                                </div>
                                <!-- Carousel nav -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/Slider-->
        </div>

    </div>
</div>

jQuery

<script type="text/javascript">
      jQuery(document).ready(function($) {
 
        $('#myCarousel').carousel({
                interval: 2000
        });
 
        //Handles the carousel thumbnails
        $('[id^=carousel-selector-]').click(function () {
        var id_selector = $(this).attr("id");
        try {
            var id = /-(\d+)$/.exec(id_selector)[1];
            console.log(id_selector, id);
            jQuery('#myCarousel').carousel(parseInt(id));
        } catch (e) {
            console.log('Regex failed!', e);
        }
    });
        // When the carousel slides, auto update the text
        $('#myCarousel').on('slid.bs.carousel', function (e) {
                 var id = $('.item.active').data('slide-number');
                $('#carousel-text').html($('#slide-content-'+id).html());
        });
});
</script>

jQuery（文档）.ready（函数（$）{
$（'myCarousel'）。carousel({
间隔时间：2000年
});
//处理旋转木马缩略图
$（'[id^=carousel selector-]'）。单击（函数（）{
var id_selector=$（this.attr（“id”）；
试一试{
变量id=/-（\d+）$/.exec（id_选择器）[1]；
控制台日志（id_选择器，id）；
jQuery（'#myCarousel'）.carousel（parseInt（id））；
}捕获（e）{
log（'Regex failed！'，e）；
}
});
//旋转木马滑动时，自动更新文本
$（'#myCarousel'）.on（'slided.bs.carousel'，函数（e）{
变量id=$（'.item.active'）。数据（'slide-number'）；
$（'#carousel text'）.html（$（'#幻灯片内容-'+id）.html（））；
});
});

css

<style type="text/css">
    .hide-bullets {
    list-style:none;
    margin-left: -40px;
    margin-top:20px;
}
.thumbnail {
    padding: 0;
}
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
    width: 100%;
}
.col-sm-3 a {
    border: 1px solid transparent;
    border-radius: 0;
    transition: all 3s ease;
}
.col-sm-3 a:hover {
    border: 1px solid #ff4647;
    border-radius: 100% 60% / 30% 10%;
    background: linear-gradient(rgba(56,123,131,0.7),rgba(56,123,131,0.7));
}
</style>  

.隐藏子弹{
列表样式：无；
左边距：-40px；
边缘顶部：20px；
}
.缩略图{
填充：0；
}
.carousel-inner>.item>img、.carousel-inner>.item>a>img{
宽度：100%；
}
.col-sm-3 a{
边框：1px实心透明；
边界半径：0；
过渡：所有3s轻松；
}
.col-sm-3 a:悬停{
边框：1px实心#ff4647；
边界半径：100%60%/30%10%；
背景：线性梯度（rgba（56123131,0.7），rgba（56123131,0.7））；
}

是否添加了引导js。请在jquery之后添加引导js