I'm going nuts - I have tried to solve this problem for a month.
I have yeoman webapp setup. I have multiple Owl-Carousels on same page - with some added js code to make a rotating cursor. See my fiddle:
https://jsfiddle.net/ftpptf/ygkb2za6/
Everything works with Grunt Serve. After 'Grunt --debug --verbose' no errors and owl carousel incorrectly displays all images at once and on top of each other.
No errors in console either.
I suspect it has something to do with my bower.json file. as you can see I added overrides for the owl carousel. But doesn't seem to work either, I'm no expert - so not sure I have done it properly though.
{
"name": "ptf2000",
"private": true,
"dependencies": {
"bootstrap-sass": "~3.3.5",
"modernizr": "~2.8.3",
"jquery": "^2.2.0",
"icomoon-sassy": "^1.0.0",
"OwlCarouselBower": "^1.3.4"
},
"overrides": {
"bootstrap-sass": {
"main": [
"assets/stylesheets/_bootstrap.scss",
"assets/fonts/bootstrap/*",
"assets/javascripts/bootstrap.js"
]
},
"OwlCarouselBower": {
"main": ["dist/assets/owl.carousel.css", "dist/assets/owl.theme.css", "dist/owl.carousel.min.js"]
},
"OwlCarouselBower": {
"main": [
"owl-carousel/owl.carousel.css",
"owl-carousel/owl.theme.css",
"owl-carousel/owl.carousel.min.js"
]
}
},
"devDependencies": {
"chai": "^3.5.0",
"mocha": "^2.4.5"
}
}
Any help highly appreciated.