Menu icon Foundation
Cannot get slick or owl carousels to work with foundation 6. foundation new --framework sites --template zurb --directory myproject

I'm trying to install Owl carousel 2.1.1 in a foundation 6 project that was installed using the Foundation SASS CLI (?) using the command:

foundation new --framework sites --template zurb --directory myproject

Then modified the 'dist' directory in config.yml to point to my actual dist & the 'clean' function in gulpfile.babel.js to not interfere with my CMS directories.:

function clean(done) {

  rimraf(PATHS.dist + '/assets/css', done);

  rimraf(PATHS.dist + '/assets/img', done);

  rimraf(PATHS.dist + '/assets/js', done);

}

Everything works to this point just fine. The problem is trying to find out how to install owl carousel so that it is included and compiled into the app.js & app.css

Articles on zurb are outdated but sort of indicate to run

bower install owl-carousel2 --save

that does download & save the package in my bower_components but also gives the error:

bower no-json No bower.json file to save to, use bower init to create one

running bower init (using gitbash) gives me the error:

bower ENOINT Register requires an interactive shell

fine - try it using windows powershell, and it seems to want to reinstall the whole foundation project!

In my project directory where Foundation (6) was installed there is no bower.json but there is one in my bower_components.

Now what? owl is still not being imported/compiled. I do know I have to manually include some of those bower_components/owl.carousel files in my config.yml & gulpfile.babel.js, but which ones? & how do I ensure the dependencies are included as well (any js or ccs file that starts with an underscore)

 

Has any one got a process for installing Owl Carousel in Foundation 6 projects?

I followed pretty much the same process trying to install Slick carousel - but didn't get it working either.   I did finally get bower init to create a bower.json file.  but that didn't help. 

 

Finally, I placed the entire contents of slick.min.js in my app.js and got it working.  But that is pretty ridiculous. 

 

What is the correct way to set this up and include plugins???? 

slcikowlplugins. bower

I'm trying to install Owl carousel 2.1.1 in a foundation 6 project that was installed using the Foundation SASS CLI (?) using the command:

foundation new --framework sites --template zurb --directory myproject

Then modified the 'dist' directory in config.yml to point to my actual dist & the 'clean' function in gulpfile.babel.js to not interfere with my CMS directories.:

function clean(done) {

  rimraf(PATHS.dist + '/assets/css', done);

  rimraf(PATHS.dist + '/assets/img', done);

  rimraf(PATHS.dist + '/assets/js', done);

}

Everything works to this point just fine. The problem is trying to find out how to install owl carousel so that it is included and compiled into the app.js & app.css

Articles on zurb are outdated but sort of indicate to run

bower install owl-carousel2 --save

that does download & save the package in my bower_components but also gives the error:

bower no-json No bower.json file to save to, use bower init to create one

running bower init (using gitbash) gives me the error:

bower ENOINT Register requires an interactive shell

fine - try it using windows powershell, and it seems to want to reinstall the whole foundation project!

In my project directory where Foundation (6) was installed there is no bower.json but there is one in my bower_components.

Now what? owl is still not being imported/compiled. I do know I have to manually include some of those bower_components/owl.carousel files in my config.yml & gulpfile.babel.js, but which ones? & how do I ensure the dependencies are included as well (any js or ccs file that starts with an underscore)

 

Has any one got a process for installing Owl Carousel in Foundation 6 projects?

I followed pretty much the same process trying to install Slick carousel - but didn't get it working either.   I did finally get bower init to create a bower.json file.  but that didn't help. 

 

Finally, I placed the entire contents of slick.min.js in my app.js and got it working.  But that is pretty ridiculous. 

 

What is the correct way to set this up and include plugins???? 

Michal Pandyra 16 days ago

Which version of Foundation are you using? Instructions vary as there were recently significant changes to how package distribution and compilation is handled.

As of Foundation 6.4 the "Zurb Foundation Sites" template has done away with Bower and now exclusively uses nodejs packages installed using npm.

You can either use an npm package, though I'm not sure whether Owl Carousel maintains an official release in the npm repository. Alternatively you can download the project straight from Git and include the files manually.

Then, depending on the version you have to either:

  • Foundation <= 6.3: Include appropriate references to the files and assets in your config.yml file
  • Foundation >= 6.4: Deploy Owl Carousel as a Webpack module in in the app.js file.

Sean M. Kimball 16 days ago

Foundation 6.4.1

Sean M. Kimball 7 days ago

I did get this to work finally.... 

npm install slick-carousel --save // we switched to slick carousel

then in my app.js:

import slick from 'slick-carousel';

Now I am trying to get flowplayer installed the same way - it's there and compiled into the app.js.  but I just get errors: 

Uncaught TypeError: Cannot read property 'bean' of undefined

Not sure what this is all about - a dependency error? how do I resolve it? 

 

moka123 7 days ago

 Has any one got a process for installing Owl Carousel in Foundation 6 projects?

Sean M. Kimball 7 days ago

you can install it using the same process as above 

npm install owl.carousel --save / --save-dev

and add the to app.js

import src from 'owl.carousel'; // seems like 'import dist' also works

but I still get the same type of errors as when trying to install flowplayer.  Not sure if I am pointing at the right import directory or if there is a conflict or if there are unresolved dependencies...  though npm is supposed to install all dependencies when you install the package. 

If you can solve that little proble, you probably solved mine too! 

Michal Pandyra 7 days ago

I'm not sure whether the Flowplayer package is built in a modular nature supported natively by Webpack. You may have to do some shimming to get things to work.

https://webpack.js.org/guides/shimming/

kevin neal 6 days ago

I'm trying to get scroll magic to work as well, no joy so far, has anyone else tried?

Sean M. Kimball 3 days ago

I finally gave up and just loaded all my scripts individually - too much effort to get it all working in app.js - no actual work getting done.