Quick reminder of how to install Ken Wheeler's Slick into Ole Fredrik's FoundationPress. #slick #slider

_slick.js

$( document ).ready(function() {
  $('.slick-slider').slick();
});

SLICK.md

Slick Slider Notes

This gist is just a quick reminder for myself of how to install Ken Wheeler's Slick into Ole Fredrik's FoundationPress.

Install via bower

bower install --save slick-carousel

Install via NPM

npm install slick-carousel --save

Edit gulpfile.js < Foundation 6.4

This is now deprecated.

// Installed via bower
'assets/components/slick-carousel/slick/slick.min.js',

Edit app.js

Since Foundation 6.4 we now inport directly in app.js.

(src/assets/js/app.js)

// Installed via bower
import '../../../bower_components/slick-carousel/slick/slick.min.js';

// Installed via NPM
import '../../../node_modules/slick-carousel/slick/slick.min';

Edit foundation.scss < Foundation 6.4

This is now deprecated.

// Libraries
@import '../components/slick-carousel/slick/slick.scss';
@import '../components/slick-carousel/slick/slick-theme.scss'; 

Edit foundation.scss

Foundation 6.4 has a new structure.

(src/assets/scss/app.scss)

// Installed via bower
@import "../../../bower_components/slick-carousel/slick/slick.scss";
@import "../../../bower_components/slick-carousel/slick/slick-theme.scss";

// Installed via NPM
@import "../../../node_modules/slick-carousel/slick/slick.scss";
@import "../../../node_modules/slick-carousel/slick/slick-theme.scss";

slick.php

<div class="row slick-slider" data-slick='{"slidesToShow": 1, "slidesToScroll": 1, "dots": true,  "autoplay": true, "autoplaySpeed": 2000, "arrows": false}'>
    <?php for ($i=0; $i < 5; $i++): $i % 2 == 0 ? $bgc = '#f2fd85' : $bgc = '#82aeff'; ?>
        
        <div class="slide" style="height: 300px; padding: 40px; background-color: <?php echo $bgc; ?>">
            <h2>Slide <?php echo ($i+1); ?></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ducimus minima repellendus veniam, voluptatum natus odit esse minus modi. Perferendis hic possimus alias delectus maxime, quaerat totam tenetur quas explicabo.</p>
        </div>

    <?php endfor; ?>
</div>

slick.scss

// Optional style
@mixin transition($property...) {
    -webkit-transition: $property;
    -moz-transition: $property;
    -ms-transition: $property; /* IE10 is actually unprefixed */
    -o-transition: $property;
    transition: $property;    
}
@mixin translate-y($value) {
	-webkit-transform: translateY($value);
	-moz-transform: translateY($value);
	-ms-transform: translateY($value);
	-o-transform: translateY($value);
	transform: translateY($value);
}
.row.slick-slider {
  .slide {
     display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;   
    text-align: center;
    h2, p {
      max-width: 800px;
    }
    h2 {
      -webkit-order: 0;
      -ms-flex-order: 0;
      order: 0;
      -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
      flex: 0 1 auto;
      -webkit-align-self: auto;
      -ms-flex-item-align: auto;
      align-self: auto;
      opacity: 0;
      transition-delay: 1s;
      @include translate-y(-5rem);
      @include transition(transform 0.5s, opacity 0.3s);    
    }

    p {
      -webkit-order: 0;
      -ms-flex-order: 0;
      order: 0;
      -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
      flex: 0 1 auto;
      -webkit-align-self: auto;
      -ms-flex-item-align: auto;
      align-self: auto;
      opacity: 0;
      transition-delay: 1s;
      @include translate-y(3rem);
      @include transition(transform 0.5s, opacity 0.3s);          
    }    
  }
  .slide.slick-current {
    h2, p {
      opacity: 1;
      transition-delay: 0.5s;
      @include translate-y(0); 
    
    }
    p {
      transition-delay: 1s;
    }      
  }
}