Issue with nivo slider and slick carousel not working together -- jquery

Question

I can't seem to get nivo slider and the slick carousel (http://kenwheeler.github.io/slick/) to work together on my site. I think it's an issue with when/how the jquery script is pulled but since my javascript knowledge is pretty slim, I have no idea how to fix it.

Originally I had the jquery script at the end of the document as you can see

<?php wp_footer(); ?>
<!-- <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> -->
<!-- <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> -->

<script type="text/javascript" src="/wp-content/slick-1.3.13/slick/slick.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.rotator').slick({
           infinite: true,
           slidesToShow: 3,
           slidesToScroll: 1
        });
    });
</script>
</body>
</html>

but as it turned out having the jquery down here was causing the nivo slider not to work.

I can't seem to figure out which PHP file in my theme does pull the jquery script, but i know it is being pulled somewhere, since the nivo slider is working and this shows up in the source code:

<script type="text/javascript" src="/wp-includes/js/jquery/jquery.js?ver=1.11.1"></script>
<script type="text/javascript" src="/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1"></script>

I know that the issue isn't how i implemented the slick carousel on the page itself, since it was working up until the time I commented out the lines in the first code block above.

Any help here would be appreciated.

Answer 1

You have an error in console. Wordpress using jQuery.noConflict(); so $ will be undefined.

Use like this:

    jQuery(document).ready(function($) {
        $('.rotator').slick({
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 1
        });
    });