javascript - Slick.js 附加箭头不适用于多个轮播

Question

我正在使用 Slick jQuery 轮播，每当使用“appendArrows”选项时都会遇到问题:

$(document).ready(function(){
  $('.post-slider').slick({
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 2,
    slidesToScroll: 1,
    appendArrows: '.button-container',
    centerMode: true
});
});

你看，我需要输出多个轮播，但我显示的轮播数量也是appendArrows函数似乎在每个轮播内部运行的次数。

<div id="slidersort">
<div class="slider">
    <span class="drag-handle">☰</span>
    <div class="wrap_lined_header"><h2>News</h2><div class="button-container"></div></div>

    <div class="clr"></div>
    <div class="post-slider">
        <?php 
        $args = array('post_type' => 'news');
        $loop = new WP_Query( $args );

        while ( $loop->have_posts() ) : $loop->the_post();
        ?>
        <div>
            <a class="post-link" href="<?php the_permalink() ?>"> </a>
            <h2><?php the_title(); ?></h2>
            <div class="post-date"><?php the_date('d/m/Y') ?></div>
            <div class="entry-content">
                <p><?php the_field('summary'); ?></p>
            </div>
        </div>
        <?php endwhile;?>

    </div>
</div>

<div class="slider">
    <span class="drag-handle">☰</span>
    <div class="wrap_lined_header"><h2>Weather</h2><div class="button-container"></div></div>

    <div class="clr"></div>
    <div class="post-slider">
        <?php 
        $args = array('post_type' => 'news');
        $loop = new WP_Query( $args );

        while ( $loop->have_posts() ) : $loop->the_post();
        ?>
        <div>
            <a class="post-link" href="<?php the_permalink() ?>"> </a>
            <h2><?php the_title(); ?></h2>
            <div class="post-date"><?php the_date('d/m/Y') ?></div>
            <div class="entry-content">
                <p><?php the_field('summary'); ?></p>
            </div>
        </div>
        <?php endwhile;?>

    </div>
</div>

<div class="slider">
    <span class="drag-handle">☰</span>
    <div class="wrap_lined_header"><h2>Sports</h2><div class="button-container"></div></div>

    <div class="clr"></div>
    <div class="post-slider">
        <?php 
        $args = array('post_type' => 'news');
        $loop = new WP_Query( $args );

        while ( $loop->have_posts() ) : $loop->the_post();
        ?>
        <div>
            <a class="post-link" href="<?php the_permalink() ?>"> </a>
            <h2><?php the_title(); ?></h2>
            <div class="post-date"><?php the_date('d/m/Y') ?></div>
            <div class="entry-content">
                <p><?php the_field('summary'); ?></p>
            </div>
        </div>
        <?php endwhile;?>

    </div>
</div>

假设我显示了 3 个轮播(如上所述)，每当我显示页面时，它都会返回 3 个这样的按钮:

<div class="button-container">
<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button">Previous</button>
<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button">Previous</button>
<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button">Previous</button>
<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button">Next</button>
<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button">Next</button>
<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button">Next</button>
</div>

关于如何改变原始 jQuery 调用以与 3 个轮播配合得很好，有什么想法吗？我在想如何让appendArrows选项只显示类名的开头，然后我可以运行一个简单的PHP循环来为每个循环添加数值，但我担心我的jQuery还不够好。

除非你有更好的主意？

Answer 1

看起来这是一个老问题，但这是我的解决方案，以防有人遇到同样的问题。我所做的就是初始化每个元素，然后使用 $(this) 向上遍历并选择该元素。

$( document ).ready( function() {
    $( '.post-slider' ).each( function() {
        $( this ).slick( {
            dots: true,
            infinite: true,
            speed: 500,
            slidesToShow: 2,
            slidesToScroll: 1,
            appendArrows: $(this).parents('.slider').find('.button-container'),
            centerMode: true
        } );
    } );
} );