I am working on a page with picture that need to be displayed in a grid starting with 3 columns. But every time the page loads, the pictures all load as one column going straight down the left side of the page.
It is only once you stretch the browser that the photo realign.
I want it already in a grid of 3 columns as soon as page loads.
any ideas?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="{{site.baseurl}}/js/scrollspy.js"></script>
<script src="swipebox/lib/jquery-1.9.0.js"></script>
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script src="swipebox/lib/ios-orientationchange-fix.js"></script>
<script src="swipebox/lib/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
//When the DOM document is loaded in the browser
$(document).ready(function () {
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script type="text/javascript">
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
$("#menu-toggle").show("active");
$("#menu-close").hide("active");
});
// Opens the sidebar menu
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
$("#menu-close").show("active");
$("#menu-toggle").hide("active");
});
// Closes the sidebar menu
$("#menu-close2").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper2").toggleClass("active")//slideUp(50);
});
// Opens the sidebar menu
$("#menu-toggle2").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper2").toggleClass("active")//slideDown(50);
});
/* Basic Gallery */
</script>
<script type="text/javascript">
// Scrolls to the selected menu item on the page
$(function() {
$('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
}, 1000);
return false;
}
}
});
});
</script>
<script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/agency.js"></script>
<script src="lib/ios-orientationchange-fix.js"></script>
<script src="lib/jquery-2.1.0.min.js"></script>
<script src="js/jquery.swipebox.js"></script>
<!-- <script type="text/javascript" src="js/SmoothScroll.js"></script>
--> <script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript">
jQuery(function($) {
$(".swipebox").swipebox();
});
</script>
<!--
<script type="text/javascript">
$( document ).ready(function() {
/* Basic Gallery */
$( '.swipebox' ).swipebox();
/* Video */
$( '.swipebox-video' ).swipebox();
/* Dynamic Gallery */
$( '#gallery' ).click( function( e ) {
e.preventDefault();
$.swipebox( [
{ href : 'http://swipebox.csag.co/mages/image-1.jpg', title : 'My Caption' },
{ href : 'http://swipebox.csag.co/images/image-2.jpg', title : 'My Second Caption' }
] );
} );
});
</script>
-->
<!-- <script type="text/javascript" src="js/main.js"></script> -->
<script src="js/owl.carousel.js"></script>
<!-- <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
--><script src='http://npmcdn.com/isotope-layout#3/dist/isotope.pkgd.js'></script>
<script src="js/index.js"></script>
<link href="font-awesome/fonts/plugin.css" rel="stylesheet" type="text/css">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/plugin.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="demo/normalize.css">
<link rel="stylesheet" href="demo/bagpakk.min.css">
<link rel="stylesheet" href="src/css/swipebox.css">
<link rel="stylesheet" href="css/stylish-portfolio.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="swipebox/src/css/swipebox.css">
<link rel="stylesheet" href="swipebox/src/css/swipebox.min.css">
<link rel="stylesheet" href="swipebox/demo/normalize.css">
<link rel="stylesheet" href="swipebox/demo/bagpakk.min.css">
<link rel="stylesheet" href="swipebox/demo/style.css">
<link rel="stylesheet" href="css/owl.carousel.css" media="screen">
<link rel="stylesheet" href="css/owl.theme.css"media="screen">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<section id="portfolio" class="portfolio" style="display: none;" >
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 text-center">
<h2><font style="text-transform: uppercase;"face="Helvetica" >Portfolio</font></h2>
<hr class="large">
</div>
</div>
<div class="button-group filters-button-group">
<button class="button is-checked" data-filter="*">show all</button>
<button class="button" data-filter=".ling">Lingeria</button>
<button class="button" data-filter=".men">Men</button>
<button class="button" data-filter=".women">Women</button>
</div>
<div class="grid">
<div class="element-item men " data-category="men">
<img class="img-portfolio img-responsive" src="img/1.jpg" style="width: 300px; height: 300px;">
</div>
<div class="element-item ling" data-category="ling">
<img class="img-portfolio img-responsive" src="img/2.jpg" style="width: 300px; height: 300px;">
</div>
<div class="element-item men" data-category="men">
<img class="img-portfolio img-responsive" src="img/3.jpg" style="width: 300px; height: 300px;">
</div>
<div class="element-item women" data-category="women">
<img class="img-portfolio img-responsive" src="img/4.jpg" style="width: 300px; height: 300px;">
</div>
<div class="element-item ling " data-category="ling">
<img class="img-portfolio img-responsive" src="img/5.jpg" style="width: 300px; height: 300px;">
</div>
</div>
</div>
</section>
Add this to end of Document.ready() :
$( window ).resize()
I think that should work, it calls the resize event on the browser which should trigger the change.
Ps: I'd suggest getting rid of all the different versions of Jquery you have loaded on your page.
Related
For slider we use slick
https://kenwheeler.github.io/slick/
variable width
var disqus_shortname = 'slickcarousel';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css" />
<link rel="stylesheet" type="text/css" href=https://kenwheeler.github.io/slick/slick/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/css/style.css">
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/css/prism.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js" type="text/javascript"></script>
<script src="https://kenwheeler.github.io/slick/js/native.js" type="text/javascript"></script>
<div class="slider variable-width">
<div style="width: 200px;background-color:red;">
<p>200</p>
</div>
<div style="width: 200px;background-color:red;">
<p>175</p>
</div>
<div style="width: 200px;background-color:red;">
<p>150</p>
</div>
<div style="width: 200px;background-color:red;">
<p>300</p>
</div>
<div style="width: 200px;background-color:red;">
<p>225</p>
</div>
<div style="width: 200px;background-color:red;">
<p>125</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<script type="text/javascript" src="https://kenwheeler.github.io/slick/js/scripts.js"></script>
<script type="text/javascript" src="https://kenwheeler.github.io/slick/js/prism.js"></script>
currently output is:
how to set always first item start with the same width at start content?
except result:
You should have JS code similar to this:
<script>
$('.variable-width').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
</script>
Here are some live examples. These examples may vary slightly from your uploaded files on Disqus, but the comparisons should help.
codepen examples
I have a modal using custombox that works using a button :
<html>
<head>
<link href="assets/plugins/custombox/dist/custombox.min.css" rel="stylesheet">
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/core.css" rel="stylesheet" type="text/css" />
<link href="assets/css/components.css" rel="stylesheet" type="text/css" />
<link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
<link href="assets/css/pages.css" rel="stylesheet" type="text/css" />
<link href="assets/css/menu.css" rel="stylesheet" type="text/css" />
<link href="assets/css/responsive.css" rel="stylesheet" type="text/css" />
<script src="assets/js/modernizr.min.js"></script>
</head>
<body>
<div id="accordion-modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content p-0">
<div class="panel-group panel-group-joined" id="accordion-test">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-test" href="#collapseOne" class="collapsed">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
test
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button data-toggle="modal" data-target="#accordion-modal">Accordion in Modal</button>
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/detect.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/jquery.blockUI.js"></script>
<script src="assets/js/waves.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<!-- Modal-Effect -->
<script src="assets/plugins/custombox/dist/custombox.min.js"></script>
<script src="assets/plugins/custombox/dist/legacy.min.js"></script>
<!-- App js -->
<script src="assets/js/jquery.core.js"></script>
<script src="assets/js/jquery.app.js"></script>
</body>
</html>
I am trying to initiate this modal inside jquery, inside a datatables button with no luck.
This is the part of the code in my function :
buttons: [
{
text: 'My accordion Button',
className: "btn-sm",
action: function ( e, dt, node, config ) {
Custombox.open({
target: '#accordion-modal',
effect: 'fadein'
});
e.preventDefault();
}
}
]
The code above works to open other simple modals but not this one. This has to do I guess with the
data-toggle="modal" data-target="#accordion-modal"
that is contained in the button. From what I understand the data-target is replaced by "target" in js, but the data-toggle is not triggered anywhere. How do I trigger it properly? I attempted to initiate it with $('#accordion-modal').modal('show') but I am not sure where exactly I should put this. If I put it in the beginning it just flashes for a second
Looks like I only needed :
{
text: 'My accordion Button',
className: "btn-sm",
action: function ( e, dt, node, config ) {
$('#accordion-modal').modal('show');
e.preventDefault();
}
}
Ive tried a number of ways of re-aranging my code in my js files, re-aranging by scripts and a number of other things that I found on here, but unfortunately it still isnt working. I have no clue what to do anymore.
<!DOCTYPE html>
<html lang="en"> <
head><title> Audi Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.css">
<!-- Slider
================================================== -->
<link href="css/owl.carousel.css" rel="stylesheet" media="screen">
<link href="css/owl.theme.css" rel="stylesheet" media="screen">
<!-- Stylesheet
================================================== -->
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'>
<script tyupe="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.min.js"></script>
</head>
<body>
<!-- Loader -->
<!-- Navigation
==============================-->
<nav id="menu" class="navbar navbar-default navbar-fixed-top">
<img src="img/audi-logo3.jpg" class="img-responsive pull-right" style="margin- right: 15px">
<div clas="collapse navbar-collapse">
<div class="nav-container">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left" style="margin-top: 10px;">
<li>Home</li>
<li> Models</li>
<li>Owners & Customers </li>
<li>Shopping Tools</li>
<li>Global Inovation</li>
</ul>
</div>
</div>
</nav>
</div>
</nav>
<section style="margin-top: 85px;">
<div class="owl-carousel">
<div>
<img src="img/audi-r8.jpg">
</div>
<div>
<img src="img/audi-s8.jpg">
</div>
</div>
</section>
<!-- Script -->
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
My JS
(function(){
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
});
})
Remove the script tags from the head section, as they are already at the bottom of your body tag.
The problem is caused by the order you used there. If you need to use a library in your own code, you must declare that library first. That was not the case in your head section. It should be ok with what you have at the bottom of your body section.
Also, I don't see any script tag for jQuery, but you are using it. You need to include that first:
Just before </body>:
<!-- This script is hosted on a CDN, but you could host it too -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
First, I noticed a typo
<!-- Stylesheet
================================================== -->
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'>
THIS ONE --> <script **tyupe**="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.min.js"></script>
</head>
Also, I see that you are script loading the same 2 scripts at the bottom of your HTML, but the non minified versions. You should delete what is not being used, and fix that typo.
If you would of HTML validate/check your files, you would of found that typo error. Might be worth doing as there may be other simple errors.
Do you need to load a jQuery file? Make sure it's loaded before your javascript files
Jquery is not working. when, have not add it js in other page. Here, I present small example. I have 2 pages(index.html and about.html). Slideshow banner add in index page. but, banner is not available in about page. So, if, I have not add banner js(owl.carousel.min.js) in about page. So, Other jquery(back to top function) is not work in about page.
Here, I know, I can add slideshow jquery function in index page & remove from custom.js file. So, It is working fine. but, I don't want. because, this is small example. Our site is big(lots of page & js).
what can i do?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="image/favicon.png" rel="icon" />
<title>HomePage</title>
<!-- CSS Part Start-->
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
<!-- CSS Part End-->
</head>
<body>
<div id="content" class="col-sm-12">
<!-- Slideshow Start-->
<div class="owl-carousel">
<div class="item"> <img src="image/image1.jpg" alt="" /></div>
<div class="item"> <img src="image/image2.jpg" alt="" /></div>
</div>
<!-- Slideshow End-->
</div>
<div id="back-top"><a data-toggle="tooltip" title="Back to Top" href="javascript:void(0)" class="backtotop"><i class="fa fa-chevron-up"></i></a></div>
<!-- JS Part Start-->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!-- JS Part End-->
</body>
</html>
about.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="image/favicon.png" rel="icon" />
<title>About Us</title>
<!-- CSS Part Start-->
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
<!-- CSS Part End-->
</head>
<body>
<div id="content" class="col-sm-12">
<!-- Slideshow Start-->
<h1>About US</h1>
Content Here
<!-- Slideshow End-->
</div>
<div id="back-top"><a data-toggle="tooltip" title="Back to Top" href="javascript:void(0)" class="backtotop"><i class="fa fa-chevron-up"></i></a></div>
<!-- JS Part Start-->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!-- JS Part End-->
</body>
</html>
custom.js
$(document).ready(function(){
//====== Slideshow ======//
$('.owl-carousel').owlCarousel({
items: 6,
autoPlay: 3000,
singleItem: true,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
pagination: true
});
//====== Scroll to top ======//
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 180) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
});
jQuery('.backtotop').click(function(){
jQuery('html, body').animate({scrollTop:0}, 'slow');
});
//
});
Include the owl.carousel.min.js file in the about page as well.
--About Page--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="image/favicon.png" rel="icon" />
<title>About Us</title>
<!-- CSS Part Start-->
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
<!-- CSS Part End-->
</head>
<body>
<div id="content" class="col-sm-12">
<!-- Slideshow Start-->
<h1>About US</h1>
Content Here
<!-- Slideshow End-->
</div>
<div id="back-top"><a data-toggle="tooltip" title="Back to Top" href="javascript:void(0)" class="backtotop"><i class="fa fa-chevron-up"></i></a></div>
<!-- JS Part Start-->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!-- JS Part End-->
</body>
</html>
Edit the custom js with the following
$(document).ready(function () {
//====== Slideshow ======//
if($('.owl-carousel').length > 0){
$('.owl-carousel').owlCarousel({
items: 6,
autoPlay: 3000,
singleItem: true,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
pagination: true
});
}
//====== Scroll to top ======//
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 180) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
});
jQuery('.backtotop').click(function () {
jQuery('html, body').animate({
scrollTop: 0
}, 'slow');
});
});
keeping the owl slider script inside the condition will solve your issue.
After I updated my sources codes, my carousel doesn't work anymore. The images that I click, supposedly open with images slider (Carousel), but now open a new link to new image.
<div id="owl-carousel-works" class="owl-carousel owl-theme">
<div class="item">
<div class="latest-item col-md-12" >
<a href="images/screenshots/MainPage.png" title="screen #1" data-lightbox-gallery="screenshots-gallery">
<img src="images/screenshots/MainPage.png" class="img-responsive" alt=""/>
</a>
</div>
</div>
<div class="item">
<div class="latest-item col-md-12 " >
<a href="images/screenshots/7.png" title="screen #2" data-lightbox-gallery="screenshots-gallery">
<img src="images/screenshots/7.png" class="img-responsive" alt=""/>
</a>
</div>
</div>
Included all stylesheets
<link href="css/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="css/owl-carousel/owl.theme.css" rel="stylesheet">
<link href="css/owl-carousel/owl.transitions.css" rel="stylesheet">
Included all javascripts
<script src="js/modernizr.custom.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/responsive-nav.js"></script>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/nivo-lightbox.min.js"></script>
<script src="js/jquery.appear.js"></script>
<script src="js/jquery.inview.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src='js/jquery.scrollTo.js'></script>
<script src="js/wow.min.js"></script>
<script src="js/script.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/scroll.js"></script>
<script src="js/fixed-responsive-nav.js"></script>
There is not errors in my javascript file. Below is my configuration toward owl-carousel...
/* screenshot slider */
var owl = $("#owl-carousel-works");
owl.owlCarousel({
itemsCustom: [
[0,1],
[900,2],
[1800,3],
[2700,4],
[3600,5],
[4500,6]
],
navigation: false
});
// Nivo Lightbox
$('#screenshots a').nivoLightbox({
effect: 'fadeScale'
});
// team carousel
var owl = $("#owl-carousel-team");
owl.owlCarousel({
itemsCustom: [
[0,1],
[900,2],
[1800,3],
[2700,4],
[3600,5],
[4500,6]
],
navigation: false
});