按类别划分的光滑滑块设置

如何解决按类别划分的光滑滑块设置

我正在制作一个使用 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>

谢谢

解决方法

这是使用 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>