Owl carousel not working, maybe I linked something incorrectly?
The problem is you need to specify "item" as 1 to work in response,
Here is the working code
$(".owl-carousel").owlCarousel({
autoPlay: 3000,
items : 1, // THIS IS IMPORTANT
responsive : {
480 : { items : 1 }, // from zero to 480 screen width 4 items
768 : { items : 2 }, // from 480 screen widthto 768 6 items
1024 : { items : 3 // from 768 screen width to 1024 8 items
}
},
});
Okay, I've fixed the snippet.
Things I fixed:
- Added jquery script
- Added owlcarousel script and css after jquery
- Closed JS brackets properly.
Suggestion:
Use the browser's console. f12 should open it and then it's easy to find the error.
Your code will rarely "just work", you need to know how to debug it (which is really easy in web development)
$(document).ready(function() {
$("#owl-demo").owlCarousel({
autoPlay: 3000, //Set AutoPlay to 3 seconds
items: 4,
itemsDesktop: [1199, 3],
itemsDesktopSmall: [979, 3]
});
}); // Notice there need to be two sets of closing brackets! One for the .ready and one for the carousel..grayscale {
border: 0px solid black;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
/* For Webkit browsers */
filter: gray;
/* For IE 6 - 9 */
-webkit-transition: all .6s ease;
/* Transition for Webkit browsers */
}
.grayscale:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: none;
}
#owl-demo .owl-item {
margin: 3px;
}
#owl-demo .owl-item img {
display: block;
width: 100%;
height: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.js"></script>
<div id="owl-demo">
<div class="owl-item grayscale" style="width: 293px;">
<img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
</div>
<div class="owl-item grayscale" style="width: 293px;">
<img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
</div>
<div class="owl-item grayscale" style="width: 293px;">
<img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
</div>
<div class="owl-item grayscale" style="width: 293px;">
<img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
</div>
<div class="owl-item grayscale" style="width: 293px;">
<img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
</div>
<div class="owl-item grayscale" style="width: 293px;">
<img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
</div>
<div class="owl-item grayscale" style="width: 293px;">
<img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
</div>
<div class="owl-item grayscale" style="width: 293px;">
<img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
</div>
</div>
<script>
</script>If you want to use a local copy of jquery, then replace
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
with
<script src="/pathtolocalcopy/jquery.min.js""></script>
in addition if you are planning to do restricting the items number as per responsive screen sizes you can use
responsive : {
480 : { items : 4 }, // from zero to 480 screen width 4 items
768 : { items : 6 }, // from 480 screen widthto 768 6 items
1024 : { items : 8 // from 768 screen width to 1024 8 items
}
},