爲什麼使用這個滑塊？

$(document).ready(function() { 
 
    $('.carousel').carousel({ 
 
    interval: 7000 
 
    }); 
 
});

.carousel { 
 
    z-index: -99; 
 
} 
 
/* keeps this behind all content */ 
 

 
.carousel .item { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    -webkit-transition: opacity 1s; 
 
    -moz-transition: opacity 1s; 
 
    -ms-transition: opacity 1s; 
 
    -o-transition: opacity 1s; 
 
    transition: opacity 1s; 
 
} 
 
.carousel .one { 
 
    background: url(assets/img/slide3blur.jpg); 
 
    background-size: cover; 
 
    -moz-background-size: cover; 
 
} 
 
.carousel .two { 
 
    background: url(assets/img/slide2blur.jpg); 
 
    background-size: cover; 
 
    -moz-background-size: cover; 
 
} 
 
.carousel .three { 
 
    background: url(assets/img/slide1blur.jpg); 
 
    background-size: cover; 
 
    -moz-background-size: cover; 
 
} 
 
.carousel .active.left { 
 
    left: 0; 
 
    opacity: 0; 
 
    z-index: 2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="myCarousel" class="carousel container slide"> 
 
    <div class="carousel-inner"> 
 
    <div class="active item one"></div> 
 
    <div class="item two"></div> 
 
    <div class="item three"></div> 
 
    </div> 
 
</div>

不幸的是這輪播不起作用。我收到此錯誤

Uncaught TypeError: $(...).carousel is not a function

你可以幫我解決這個錯誤嗎？預先感謝您

來源

2016-09-22 John Smith

如果您包含carousel.js或不包含，請檢查您的html。 – San

您必須在您的中包含輪播，js。這就是你得到這個錯誤的原因。 –

你正在使用哪個傳送帶插件，並檢查它是否包含在內 –

您需要bootstrap.js之前投入的jquery.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js

應該來之前：

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

只需點擊設置按鈕（左JS）：

，然後更改順序的「包括」：

請注意，您應該proive的JPG文件爲好，但carusel問題得到了解決。

來源

2016-09-22 06:57:47 ItayB

你能否給我鏈接到codepen？我試圖添加，但不去 –

@JohnSmith這是我所做的叉的鏈接：http://codepen.io/anon/pen/pEREpV – ItayB

@JohnSmith我已經更新了我的答案.. – ItayB

您不包括輪播插件。請將此行添加到您的頭標記

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

這些是引導程序傳送帶的三行，它將運行正常。

來源

2016-09-22 06:58:57 bala

你能給我鏈接到codepen嗎？我試圖添加但不去 –

@bala觀看我的答案，他確實包含這些文件 - 查看codepen設置..他只是按錯誤的順序 – ItayB

爲什麼使用這個滑塊？

回答

相關問題