John Smith John Smith - 3 months ago 27
CSS Question

Why does working this slider?

I have this sample:


$(document).ready(function() {
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=""></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>

Unfortunately this carousel does not work. I Receive this error

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

You can help me fix this error please?
Thank you in advance


You need to put jQuery.js before bootstrap.js

should come before:

just click on the setting button (left to JS):

enter image description here

and then change the order of the 'includes':

enter image description here

Please note that you should proive the jpg files as well, but the carusel issue was solved.