光滑的轮播，图像没有滑动

Question

我正在尝试在 JSFiddle 中创建和设计我的团队成员 Slick Carousel。我已经包含了所有库，并且没有收到关于 Slick 和 JQuery 的错误。问题是它根本没有滑倒。这是我的小提琴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

您的 JSFiddle 中的问题不在于 JavaScript。你的 HTML 中有很多额外的标记，看起来像是从另一个 Slick 实现中截取的，只是在 Slick 添加了额外的类和幻灯片包装之后。一旦我删除了这些，滑块就会按预期工作。见：https://jsfiddle.net/fjm4672y/

Slick 只需要一个带有 id 或 class 的包装器（在本例中为 <ul id="sherpas_slider">），其中包含每个幻灯片的子级（您的 <li> 元素）。其余的标记只是碍事。

     <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>

删除多余的标记后，我确实必须更改您定位 <ul> 的方式：

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