Question

我正在使用带有centerMode的Slick Carousel。有没有办法显示所有项目？我不希望他们在屏幕上被隐藏。

我正在使用这些简单的选项：

$('.your-class').slick({
  centerMode: true,
  slidesToShow: 2,
  slidesToScroll: 2
});

jsFiddle

Answer 1

您可以设置“幻灯片”#T＆＃39;为0，以便它一次显示所有幻灯片。

但是，正如上面Developer107所评论的那样，＆＃34; 它没有滑动功能＆＃34;。

$('.your-class').slick({
  centerMode: true,
  slidesToShow: 0,
  slidesToScroll: 2
});

Answer 2

您可以创建一个隐藏的输入字段，并使用滑块数组计数填充其值，然后可以在js中提取该字段值并将其传递给slidesToShow选项（注意：不要忘记从字符串中转换该值到整数！）

  // get the input value which is the count of all slides	
  const slidesCount = document.getElementById( 'slides_count' ).value;

	$( '.photo_gallery_slider' ).slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		arrows: true,
		fade: true,
		asNavFor: '.slider-nav'
	});
	$( '.slider-nav' ).slick({
    // Set the value to slidesToShow option with your own logic or just pass
 the variable with + infront of it which is a shorthand to parse the string into
 integer.
		slidesToShow: ( 5 >= +slidesCount ? +slidesCount : 5 ),
		slidesToScroll: 1,
		asNavFor: '.photo_gallery_slider',
		dots: false,
		arrows: false,
		centerMode: false,
		focusOnSelect: true
	});

<div class="slider-nav">
  <?php 
  $images = get_field('gallery');
  $counter = 0;
    if ($images) : ?>

        <?php foreach ($images as $image) : $counter++; ?>
          <div>
            <?php if($counter == 1) { ?>
              <input id="slides_count" type="hidden" value="<?= count($images); ?>">
            <?php } ?>
            <img src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />		
            <p><?php echo esc_html($image['caption']); ?></p>
          </div>
        <?php endforeach; ?>
      </ul>
    <?php endif; ?>
  </div>

光滑的轮播：显示centerMode上的所有项目

2 个答案: