Menu icon Foundation
Foundation 6.2 and Slick Carousel

Guys, I'm trying to add Slick Carousel to a Foundation 6.2 build but don't know how to correctly reference Slick's fonts or image dependencies so that they are correctly built.

I have made the following config changes:
- Added "bower_components/slick-carousel/slick" and "bower_components/slick-carousel/slick/slick.min.js" to the sass/javascript PATHS section within config.yml
- Added @import "slick.scss"; and @import "slick-theme.scss"; to my app.scss file

This correctly adds the javascript and scss dependencies, but the slick fonts and image dependencies are not loaded.  I am assuming that I need to modify the gulpfile but not sure how.

Can you please help?

Thanks,

Will.



Foundation 6.2Slick carousel

Guys, I'm trying to add Slick Carousel to a Foundation 6.2 build but don't know how to correctly reference Slick's fonts or image dependencies so that they are correctly built.

I have made the following config changes:
- Added "bower_components/slick-carousel/slick" and "bower_components/slick-carousel/slick/slick.min.js" to the sass/javascript PATHS section within config.yml
- Added @import "slick.scss"; and @import "slick-theme.scss"; to my app.scss file

This correctly adds the javascript and scss dependencies, but the slick fonts and image dependencies are not loaded.  I am assuming that I need to modify the gulpfile but not sure how.

Can you please help?

Thanks,

Will.



Rafi Benkual over 3 years ago

I recently added owlcarousel. 

The app.scss has the `@import 'vendor/owlcarousel';`

set up like 

I added the dependancy CSS like this:

 

In the bower.json file, I added the dependancy

Slick should be very similar so I hope this helps lead you there!

Will Ong over 3 years ago

Thanks, I saw your other forum post and got some inspiration from that.  However, I'd like to use bower as intended and not maintain a separate copy of vendor packages manually.

A snippet of my config.yml looks like this:

Which allows me to import the slick (scss) into my app.scss as follows:

But the fonts and images are not being referenced correctly:

I am about to dig into the gulpfile, but I'm bound to break something or introduce unintended side-effects

jinch about 3 years ago

Hello Will,

Were you able to get this to work? I am in need of the same thing but having trouble implementing.

My "config.yml" file does not look like yours... Can you share the exact path to the "config.yml" that I need to edit?

~ These are the steps I took but its not working:

____________

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 libraries but I am having trouble finding information on how to do this properly. It would be great if someone can provide a clear walk through / especially as it relates to Foundation. I have other libraries I would also like to implement.