光滑的旋转木马，图像不会滑动

Question

我正在尝试在 JS 中创建和设计我的 Team Members Slick CarouselFiddle。我已经包括了所有的库并且没有关于 Slick 和 JQuery 的错误。问题是它根本没有滑动。这是我的 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

您的 JSFiddle 中的问题不在于 JavaScript。您的 HTML 中有很多额外的标记，看起来像是从另一个 Slick 实现中删除的，只是在 Slick 添加了额外的 classes 和幻灯片包装器之后。一旦我删除了它们，滑块就会按预期工作。参见：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({
    ...
});

光滑的旋转木马，图像不会滑动

Slick Carousel with images not getting slide

javascript

slick.js