I realized that when i added the carousel slider, my navbar does not stick to the top when scrolling. When I remove the javascript for the carousel, the navbar will stick to the top, but the carousel slider will not show up?
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Fonts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
<!-- Plugin Css -->
<link href="css/owl.carousel.css" rel="stylesheet" type='text/css'>
<link rel="stylesheet" href="css/owl.theme.default.css">
<link href="css/owl.transitions.css" rel="stylesheet">
<link rel="stylesheet" href="css/animate.min.css" type="text/css">
<section id="app" class="section-padding">
<!-- carousel -->
<div class="row">
<div class="col-sm- text-center">
<h2>Contact Us</h2>
</div>
<div id="owl-slider" class="owl-carousel owl-theme">
<img src="img/browsemovie.png">
<img src="img/groups.png">
<img src="img/popularSpot.png">
<img src="img/chats.png">
</div>
<div class="owl-controls">
<div class="owl-nav">
<div class="owl-prev"></div>
<div class="owl-next"></div>
</div>
<div class="owl-dots">
<div class="owl-dot active"></div>
<div class="owl-dot"></div>
<div class="owl-dot"></div>
</div>
</div>
</div>
<!-- end carousel -->
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script>
$(document).ready(function() {
$("#owl-slider").owlCarousel({
autoplay: true,
autoplayHoverPause: true,
autoplayTimeout: 5500,
items: 1,
loop: true,
})
})
</script>
// sticky navbar
/*jslint browser: true*/
/*global $, jQuery*/
$(document).ready(function () {
$(".navbar").sticky({
topSpacing: 0
});
});
// smooth scroll
$(document).ready(function () {
$('.scrollto a[href*=#]:not([href=#])').click(function () {
if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 50
}, 1000);
return false;
}
}
});
});
// scroll to top
$(document).ready(function () {
//Check to see if the window is top if not then display button
$(window).scroll(function () {
if ($(this).scrollTop() > 800) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function () {
$('html, body').animate({
scrollTop: 0
}, 800);
return false;
});
});
// parallax
$(document).ready(function () {
$.stellar();
});
// main flex slider
$(window).load(function () {
$('.main-flex-slider').flexslider({
slideshowSpeed: 5000,
directionNav: false,
animation: "fade",
controlNav: false
});
});
// owl carousel
$(document).ready(function () {
$("#testi-carousel").owlCarousel({
items: 1,
loop: true,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true
});
});
// counter up
jQuery(document).ready(function ($) {
$('.counter').counterUp({
delay: 100,
time: 800
});
});
// magnific popup
jQuery(document).ready(function ($) {
$('.show-image').magnificPopup({
type: 'image'
});
});
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5
});
});
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
rewindNav : false,
pagination : false,
items : 4
});
// Custom Navigation Events
$(".next").click(function(){
owl.trigger('owl.next');
})
$(".prev").click(function(){
owl.trigger('owl.prev');
})
});
afterAction: function(){
if ( this.itemsAmount > this.visibleItems.length ) {
$('.next').show();
$('.prev').show();
$('.next').removeClass('disabled');
$('.prev').removeClass('disabled');
if ( this.currentItem == 0 ) {
$('.prev').addClass('disabled');
}
if ( this.currentItem == this.maximumItem ) {
$('.next').addClass('disabled');
}
} else {
$('.next').hide();
$('.prev').hide();
}
}