<p>add this to your theme scripts functions file</p>
<h2>here is the full one from HTML5 Blank</h2>
<pre>// Load HTML5 Blank scripts (header.php)
function html5blankheaderscripts()
{
if ($GLOBALS['pagenow'] != 'wp-login.php' && !isadmin()) {

wpregisterscript('conditionizr', gettemplatedirectoryuri() . '/js/lib/conditionizr-4.3.0.min.js', array(), '4.3.0'); // Conditionizr
wpenqueuescript('conditionizr'); // Enqueue it!

wpregisterscript('modernizr', gettemplatedirectoryuri() . '/js/lib/modernizr-2.7.1.min.js', array(), '2.7.1'); // Modernizr
wpenqueuescript('modernizr'); // Enqueue it!

wpregisterscript('html5blankscripts', gettemplatedirectoryuri() . '/js/scripts.js', array('jquery'), '1.0.0'); // Custom scripts
wpenqueuescript('html5blankscripts'); // Enqueue it!

wpregisterscript('slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js', array('jquery'), '1.0.0'); // Custom scripts
wpenqueuescript('slick'); // Enqueue it!
wpregisterscript('slicknav', 'https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.10/jquery.slicknav.min.js', array('jquery'), '1.0.0'); // Custom scripts
wpenqueuescript('slicknav'); // Enqueue it!
}
}</pre>

<h2>Here is the bits to register and enqueue slicknav and slider</h2>
<pre>wpregisterscript('slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js', array('jquery'), '1.0.0'); // Custom scripts
wpenqueuescript('slick'); // Enqueue it!
wpregisterscript('slicknav', 'https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.10/jquery.slicknav.min.js', array('jquery'), '1.0.0'); // Custom scripts
wpenqueuescript('slicknav'); // Enqueue it!</pre>

<p>you will also need to add the css links to the header manually.</p>

<h2>CSS for the header.php file</h2>

<pre>&lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"/&gt;
&lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"/&gt;
&lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.10/slicknav.min.css"/&gt;
</pre>

<h2>initilizing the scripts</h2>

<p>once the scripts and css have been added, you will also need to load them, usually your theme will include a script file so you can add the following in there. if not you will have to enqueue your own script to initialize with the following. </p>

<p><code>js/scripts.js</code></p>

<pre>(function ($, root, undefined) {

$(function () {

'use strict';

// DOM ready, take it away

if($("#slider").length) {
$("#slider").slick();
}

$('.nav').slicknav();

});

})(jQuery, this);</pre>

<h2>then add the register for custom scripts.js</h2>

<pre>wpregisterscript('customscripts',gettemplatedirectoryuri() . '/js/scripts.js', array('jquery'), '1.0.0');
wpenqueuescript('customscripts');</pre>

<h3><code>css</code></h3>
<pre>.slicknavmenu {
display:none;
}
@media(max-width:1225px) {
.menu-bar-wrap {
display:none;
}
.slicknav_menu {
display:block;
}
}</pre>

<h2>Slick Slider</h2>

<p>Here is how you can get the slider working now that its all included in the page. <a href='/code/js/?p=/slick-slider-carousel/' class='btn btn-primary'>Slick Carousel</a> </p>