Menu icon Foundation
How to install/use Slick-Carousel (or other scripts installed with bower) with Foundation 6.2

I'm using Foundation for Sites, version 6.2. I installed it with the Foundation-CLI and use foundation watch in my terminal as I'm building the site, etc.

I installed slick-carousel with bower and it is in my bower-components folder.

How do I make it so that the slick-carousel js and scss will be loaded/compiled during foundation watch / foundation build?

I don't need to move the slick carousel js and scss files to my src/assets js and scss folders, do I? Is there a way to leave all the slick-carousel files in place in my bower-components file?

When I try to add the slick's scss files to my app.scss folder, I get errors like:

Error: File to import not found or unreadable: slick-carousel

       Parent style sheet: stdin

I can't figure out how to write the import path. 

For the js, I added the following to the config.yml file:

  - "bower_components/slick-carousel/slick/slick.js"

Foundation watch doesn't throw any errors, but slick-carousel js isn't being compiled into my dist/js/app.js file.

I can't find anywhere that really explains how to deal with 3rd party scripts in Foundation for Sites. 

Thanks in advance to anyone who can help explain or poing me in the right direction!

 

 

 

bower scripts slick-carousel configuration

I'm using Foundation for Sites, version 6.2. I installed it with the Foundation-CLI and use foundation watch in my terminal as I'm building the site, etc.

I installed slick-carousel with bower and it is in my bower-components folder.

How do I make it so that the slick-carousel js and scss will be loaded/compiled during foundation watch / foundation build?

I don't need to move the slick carousel js and scss files to my src/assets js and scss folders, do I? Is there a way to leave all the slick-carousel files in place in my bower-components file?

When I try to add the slick's scss files to my app.scss folder, I get errors like:

Error: File to import not found or unreadable: slick-carousel

       Parent style sheet: stdin

I can't figure out how to write the import path. 

For the js, I added the following to the config.yml file:

  - "bower_components/slick-carousel/slick/slick.js"

Foundation watch doesn't throw any errors, but slick-carousel js isn't being compiled into my dist/js/app.js file.

I can't find anywhere that really explains how to deal with 3rd party scripts in Foundation for Sites. 

Thanks in advance to anyone who can help explain or poing me in the right direction!

 

 

 

Virtanen over 3 years ago

I had the exact same question! Here's how I got it working with Pushy plugin installed via Bower, should work with any plugin for that matter:

1. SCSS

I included the SCSS path in my app.scss file as follows:

@import 'bower_components/pushy/scss/pushy'

2. JS

I added the pushy plugin to my config.yml file:

# Paths to your own project code are here
- "bower_components/pushy/js/pushy.min.js"

Then I quit my npm watch and run npm run build to compile assets. After that I ran npm start again and voila, the plugin worked like charm.

Hope this helps! :)

Stacey Irvin over 3 years ago

Thank you! Your answer was helpful! I've got slick working now. The only issue I have is that there is a 'fonts' folder in the slick-carousel plugin folder. The slick scss file references the fonts.

in the config.yml file, I added it under assets:

  assets:
    - "bower_components/slick-carousel/slick/fonts"

This kind of works - it copies the fonts folder into the dist/assets folder. However, I am now trying to figure out if there is a way to get it to be copied into the assets/css folder instead. My goal is to not have to edit any of the files in my plugin folder. Would love to find a solution. Though, it may be easiest to just edit the scss in the plugin folder instead.

Thanks again for your help!

jinch about 3 years ago

I'm in need of the same thing but I am not having any luck with this?

___________

1. I installed slick via bower:

bower install --save slick-carousel
____________

2. I included the SCSS path in my app.scss file as follows:
@import 'bower_components/slick-carousel/slick'
____________

3. I added this line to my config.yml file
- "bower_components/slick-carousel/slick/slick.js"
____________

4. I have: foundation watch included in the terminal
____________

5. I have this example in my HTML
<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>
____________
6. This included in my app.js file:
/*START SLICK CAROUSEL*/
$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});
/*END SLICK CAROUSEL*/

_____________

Yet I do not see the carousel implemented. What am I doing wrong?

I really would like to start using bower to manage my library installs but I am having allot of trouble finding information on this. It would be great if someone can provide a clear walk through, especially how it relates to Foundation 6. I have other libraries I would also like to implement this way / just not having any luck.

 

Kyle De Sousa over 2 years ago

Hi there did you get the slick carousel working with bower

 

jinch over 2 years ago

Hi Kyle,

Eventually, i did. I think my issue was due to the path of the component. I had it working for awhile then it broke again after updating to 6.3. I found some help here thanks to @natewiebe13 (https://github.com/zurb/foundation-sites/issues/9679). Hope that helps your situation as well.