I Can't Get My Slick Slider to Work at All

I can't get my Slick slider to work at all

The problem is in the slide setting (element query to select the slider)

For example changing:

$('.fade').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  slide: '> div',
  cssEase: 'linear'
});

$('.fade').slick({
    dots: true,
    infinite: true,
    speed: 700,
    autoplay:true,
    autoplaySpeed: 2000,
    arrows:false,
    slidesToShow: 1,
    slidesToScroll: 1
 });

Works, just play around with the settings.
You were defining slide as > div (inmediate children of div), so if you remove it (defaults to div), it works.

<html>    <head>    <title>My Now Amazing Webpage</title><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.css"/>    </head>    <body>
    <div class="fade">   <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>  <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>  <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>    </div>
    <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="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.min.js"></script>

    <script type="text/javascript">        $(document).ready(function(){       $('.fade').slick({    dots: true,    infinite: true,    speed: 700,    autoplay:true,    autoplaySpeed: 2000,    arrows:false,    slidesToShow: 1,    slidesToScroll: 1 });            });</script>
    </body></html>

slick carousel 'init' function doesn't work

Your listener needs to be placed before you initialise your slick slider. Otherwise the listener is never called because you've asked it to listen after the event has ran. That is, when you init your slick slider, your listener is not currently bound.

// Bind init event listener function
$('.slider-container').on('init', function (event, slick) {

     code here...

});

// Init your slick slider
$('.slider-container').slick({

     other code here...

});

It should be as above.

Slider for Slick.js is not showing

Using double slash without specifying a particular protocol

When you load a resource by using a double slash src="\\foo", you're not defining a protocol (http, https).

The script will load using the same protocol used to load the page itself.

If you are not using a web server, it won't work.

In your example, you can see that it's trying to load file://foo", a file on your computer.

Adding the protocol, https in your case, will ensure that you'll load the resource successfully.

Slick Carousel with images not getting slide

The problem in your JSFiddle is not with the JavaScript. There is a lot of extra markup in your HTML that looks like it was cut from another Slick implementation, only after Slick had added its extra classes and slide wrappers. Once I removed those, the slider worked as expected. See: https://jsfiddle.net/fjm4672y/

Slick just needs a wrapper with an id or class to hook on (<ul id="sherpas_slider"> in this case), which contains a child for each slide (your <li> elements). The rest of your markup was just getting in the way.

     <section class="y_sherpas">
        <div class="wrp_ds">
            <h2 class="hdnh2">YOUR SHERPAS</h2>
            <p></p>
        </div>
        <div class="org_prn sherpas">
            <ul id="sherpas_slider">
                <li data-sherpas_desc="" style="width: 100%; display: inline-block;">
                        <img src="https://theblueprint.training/wp-content/uploads/2020/01/team-ryan-stewart.png" alt="">
                        <h5>Ryan Stewart</h5>
                        <h6>Co-Founder, The Blueprint Training</h6>
                </li>
                <li data-sherpas_desc="" style="width: 100%; display: inline-block;">
                        <img src="https://theblueprint.training/wp-content/uploads/2018/12/david-krevitt-blueprint.jpg" alt="">
                        <h5>David Krevitt</h5>
                        <h6>Co-Founder, The Blueprint Training</h6>
                </li>
                <li data-sherpas_desc="" style="width: 100%; display: inline-block;">
                        <img src="https://theblueprint.training/wp-content/uploads/2020/01/team-ryan-stewart.png" alt="">
                        <h5>Ryan Stewart</h5>
                        <h6>Co-Founder, The Blueprint Training</h6>
                </li>
                <li data-sherpas_desc="" style="width: 100%; display: inline-block;">
                        <img src="https://theblueprint.training/wp-content/uploads/2018/12/david-krevitt-blueprint.jpg" alt="">
                        <h5>David Krevitt</h5>
                        <h6>Co-Founder, The Blueprint Training</h6>
                </li>
                <li data-sherpas_desc="" style="width: 100%; display: inline-block;">
                        <img src="https://theblueprint.training/wp-content/uploads/2020/01/team-ryan-stewart.png" alt="">
                        <h5>Ryan Stewart</h5>
                        <h6>Co-Founder, The Blueprint Training</h6>
                </li>
                <li data-sherpas_desc="" style="width: 100%; display: inline-block;">
                        <img src="https://theblueprint.training/wp-content/uploads/2018/12/david-krevitt-blueprint.jpg" alt="">
                        <h5>David Krevitt</h5>
                        <h6>Co-Founder, The Blueprint Training</h6>
                </li>
           </ul>
        </div>
    </section>

After removing the extra markup, I did have to change how you were targeting the <ul>:

jQuery('#sherpas_slider').slick({
    ...
});

I Can't Get My Slick Slider to Work at All