Slick Carousel with images not getting slide

Question

I'm trying to create and design my Team Members Slick Carousel in JSFiddle. I've included all the libraries and getting no error regarding Slick and JQuery. The issue is that it is not at all getting slide. Here is my Fiddle JSFiddle link

    <script>
            jQuery('#sherpas_slider').not('.slick-initialized').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            focusOnSelect: true,
            variableWidth: true,
            dots: true,
            centerMode: true,

        });

        jQuery('.y_sherpas .wrp_ds p').html(jQuery('#sherpas_slider .slick-current li').data('sherpas_desc'));

        jQuery('#sherpas_slider').on('afterChange', function(e, sl, currSlide) {
            var slide = sl.$slides[currSlide];
            var desc = jQuery(slide).find('li').data('sherpas_desc');
            jQuery('.y_sherpas .wrp_ds p').html(desc);
        });
</script>

Answer 1

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({
    ...
});