Put Slick Slider inside sliding div

I'm working on a personal site and I have a sliding div setup going on. I'm trying to put a slick slider inside the div but it's not working.

HTML:

<div class='toggler'>
    <h2>Side Work</h2>
    <div class="dropdown" style='height: 300px;'>
        <p>Some writing.</p>
        <div class='slick-slider' style='text-align: center;'>
            <div>
                <p>1</p>
            </div>
            <div>
                <p>2</p>
            </div>
            <div>
                <p>3</p>
            </div>
            <div>
                <p>4</p>
            </div>
        </div>
    </div>
</div>

slider.js

$(document).ready(function () {
    $('.slick-slider').slick({
        dots: true,
        draggable: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1
    });
});

dropdown.js

$(function () {
$('.toggler').click(function () {
    $(this).find('.dropdown').slideToggle();
    $('html,body').animate({
        scrollTop: $(this).offset().top - 30
    }, 500);

    $(this).find('.dropdown').not('.left-right, .slick-slider').parent().not('.left-right, .slick-slider').siblings().not('.left-right, .slick-slider').children().not('.left-right, .slick-slider').next().not('.left-right, .slick-slider').slideUp();
}); 

});