Question

您好，我的滑条滑块有问题，我希望获得如下图所示的效果：开始

END：

此滑块的“可变宽度”应为true，但我不知道当最后一个滑块位于容器的末端时如何停止此光滑滑块。光滑滑条是否有任何参数可以设置？

我的代码：

JS：

class relatedProgramsSlider {
    constructor(element) {
        this.slider = element;
    }

    init() {
        const prevArrow = document.querySelector('.block-related-programs .slick-slider-arrow-prev-program');
        const nextArrow = document.querySelector('.block-related-programs .slick-slider-arrow-next-program');
        $(this.slider).slick({
            dots: false,
            infinite: false,
            slidesToShow: 1,
            variableWidth: true,
            prevArrow: prevArrow,
            nextArrow: nextArrow,
        });
    }
}

export default () => {
    const slider = document.querySelectorAll('.block-related-programs__slider');
    slider.forEach(el => {
        const sliderElement = new relatedProgramsSlider(el);
        sliderElement.init();
    });
}

HTML

 <div class="container-fluid">
        <button type="button" class="slick-slider-arrow slick-slider-arrow-prev-program"></button>
        <button type="button" class="slick-slider-arrow slick-slider-arrow-next-program"></button>
        <div class="block-related-programs__slider">

        <?php foreach($related_programs as $program):
            $thumbnail = get_the_post_thumbnail($program, 'program-card');
            $title = get_the_title($program);
            $subtitle = get_field('program_subtitle', $program);
        ?>
            <a href="#" class="program-card">
                <div class="program-card__content">
                    <figure class="program-card__thumbnail"><?php echo $thumbnail; ?></figure>
                    <h3 class="program-card__title"><?php echo $title; ?></h3>
                    <p class="program-card__subtitle"><?php echo $subtitle; ?></p>
                </div>
            </a>
       <?php endforeach; ?>
       </div>
    </div>

谢谢您的回答！：）

当最后一张幻灯片位于容器末端时，如何暂停滑动滑块

0 个答案: