[英]Slick.js appendarrows doesn't work for multiple carousels
我正在使用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选项以仅显示类名的BEGINNING,然后可以运行一个简单的PHP循环向其中的每个值添加数字值,但我的jQuery恐怕还不够。
除非您有更好的主意?
看来这是一个古老的问题,但是如果有人遇到相同的问题,这是我的解决方案。 我所做的是初始化每个元素,然后使用$(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
} );
} );
} );
我使用了以下解决方案,这些解决方案从滑块包装中找到每个导航自定义箭头。
$('.slider-wrap').each(function (index, sliderWrap) {
var $slider = $(sliderWrap).find('.slider');
var $next = $(sliderWrap).find('.next');
var $prev = $(sliderWrap).find('.prev');
$slider.slick({
dots: true,
slidesToShow: 2.5,
nextArrow: $next,
prevArrow: $prev
});
});
在此处查看Noah Rodenbeek的Pen: https ://codepen.io/nominalaeon/pen/gwAdjd
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.