I've made several attempts but still can't figure out where my error lies. Why doesn't it work for me? It's the "OWL CAROUSEL CUSTOM". I've tried different types of owl carousels and none of them seem to run on my computer. I really need this to work, please. Here is the code I'm currently using in HTML and CSS. I have all the files in place in the head of the HTML. I know it should be easy to get right, but I just can't do it.
#owl-demo .item{
background: #3fbf79;
padding: 30px 0px;
margin: 10px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
.customNavigation{
text-align: center;
}
//use styles below to disable ugly selection
.customNavigation a{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Document</title>
<link rel="stylesheet" href="css/estilo.css">
<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="css/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="css/owl.theme.css">
<!-- jQuery 1.7+ -->
<script src="js/jquery-1.9.1.min.js"></script>
<!-- Include js plugin -->
<script src="js/owl.carousel.js"></script>
<script src-"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
items : 10, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
// Custom Navigation Events
$(".next").click(function(){
owl.trigger('owl.next');
})
$(".prev").click(function(){
owl.trigger('owl.prev');
})
$(".play").click(function(){
owl.trigger('owl.play',1000); //owl.play event accept autoPlay speed as second parameter
})
$(".stop").click(function(){
owl.trigger('owl.stop');
})
});
</script>
</head>
</body>
</html>