wordpress - 按类别划分的 Slick 滑块设置

Question

我正在制作一个使用 ACF 灵活内容的 WordPress 主题。一个块是向页面添加一个滑块，我添加了一些 ACF 字段作为用户可以用来自定义滑块的选项。

其中两个选项是光滑的滑块设置：它们可以选择列数（1-3）和滚动方向（水平/垂直）。

有没有一种方法可以在不为每个组合编写滑块的情况下为各种类添加流畅的设置？我想要这些方面的东西，但这不起作用：

// base slide that applies to all sliders
$('#slider').slick({
  mobileFirst: true,
  infinite: true,
  speed: 2000,
  dots: true,
  pauseOnHover: true
});

// if vertical-scroll class add the #slider base settings, PLUS these settings
$('.vertical-scroll').slick({
  vertical: true,
  verticalSwiping: true
});

// if one-column class add the #slider base settings, PLUS these settings
$('.one-column').slick({
  slidesToShow: 1,
  slidesToScroll: 1
});

// if two-column class add the #slider base settings, PLUS these settings
$('.two-column').slick({
  slidesToShow: 2,
  slidesToScroll: 2
});

// if three-column class add the #slider base settings, PLUS these settings
$('.three-column').slick({
  slidesToShow: 3,
  slidesToScroll: 3
});

<?php
  // acf variables
  $slide_columns = get_sub_field('columns');
  $slide_direction = get_sub_field('direction');
 ?>

<ul id="slider" class"<?php echo $slide_direction; ?> <?php echo $slide_columns; ?>">
  <li class="slide"><?php echo $slide_content; ?></li>
  <li class="slide"><?php echo $slide_content; ?></li>
  <li class="slide"><?php echo $slide_content; ?></li>
  <li class="slide"><?php echo $slide_content; ?></li>
</ul>

谢谢

标签： wordpressslick.jsacfpro

Answer 1

这是使用 PHP 的更好方法：

<script>
  // base slide that applies to all sliders
  $('#slider').slick({
  mobileFirst: true,
  infinite: true,
  speed: 2000,
  dots: true,
  pauseOnHover: true,
  slidesToShow: <?php echo get_sub_field('columns'); ?>,
  slidesToScroll: <?php echo get_sub_field('direction'); ?>
  });
</script>

<ul id="slider">
  <li class="slide"><?php echo $slide_content; ?></li>
  <li class="slide"><?php echo $slide_content; ?></li>
  <li class="slide"><?php echo $slide_content; ?></li>
  <li class="slide"><?php echo $slide_content; ?></li>
</ul>