Using Wordpress with scripts and stylesheets - using functions.php properly

functions.php

<?php 
/* I'll use an example in comments and then how to insert in functions.php below it */


/*
 * <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
*/

// give it a name that is unique, then second line arg is the file location, the third agrument is the priority.
wp_enqueue_style( 
    'font-awesome-5',
    'https://use.fontawesome.com/releases/v5.0.10/css/all.css',
    10
);

/*
 * <link href="/wp-content/themes/divi-child/css/infinite-slider.css" rel="stylesheet">
 */
wp_enqueue_style( 
    'infinite-slider',
    get_stylesheet_directory_uri() . '/css/infinite-slider.css',
    10
);


// here is an example of loading a script -- lets pretend this needs jquery so we'll make sure it is loaded after jquery

/*
 * <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
 */
/* 
 * first arg: unique name
 * second arg: file location
 * third arg: any scripts it is dependant on (in this case jquery -- and jquery is the unique name of the jquery that is loaded
 * fourth arg: version
 * fifth arg: place in footer (we select true to keep the page loading quicker)
 */

wp_enqueue_script(
    'slick-carousel',
    'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js',
    [ 'jquery' ],
    1.1,
    true
);




// loading jquery in wordpress anywhere doens't make sense. It already loads it in. 
// We are loading it in the footer. That means you should add your scripts to the main javascript file inside the
// the document ready section.  To make sure the code only executes on the page -- we can do a little shortcut to
// test if the element is on the page:

// If our slider starts out like this:
// $('.customer-logos').slick({
// we need to check to see if it is on the page. Then we can insert it in our main js file and prevent
// multiple scripts from loading.

?>
<script>
/* here we create a function so we can call it in the document ready */
function activeSlickSlider() {
    // this checks to see how many elements have the customer-logos class on teh page 
    // if there is 1 or more, it will run the script.
    if($('.customer-logos').length > 0) {
        $('.customer-logos').slick({
            slidesToShow: 5,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 1000,
            arrows: false,
            dots: false,
            pauseOnHover: false,
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                    slidesToShow: 4
                }
            }, {
                breakpoint: 520,
                settings: {
                    slidesToShow: 3
                }
            }]
        });
    }
}
    
// then lets find the document ready in teh js file and add our 
jQuery(document).ready(function() {
    // other code in here, then insert our new function
    activeSlickSlider();
});