如何解决Uncaught TypeError：$...carousel不是使用bootstrap 3 jquery jquery-1.11.1的函数
嗨，我找到了一个carousel并尝试将其应用到我的laravel项目中，但是很可惜，它让我Uncaught TypeError: $ (...). carousel is not a function知道我有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>
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,0.7));
}
</style>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。