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。只有在Slick添加了其额外的类和幻灯片包装之后，您的HTML中才有很多额外的标记，看起来好像是从另一个Slick实现中截取的。一旦删除了这些，滑块就会按预期工作。参见：https://jsfiddle.net/fjm4672y/

Slick仅需要一个具有ID或类的包装即可挂接（在这种情况下为<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({
    ...
});

光滑的轮播，图片无法滑动

1 个答案: