滑动滑块设置(按类)

Question

我正在制作一个WordPress主题，其中我使用了ACF灵活的内容。一个块是添加一个滑块到页面，我已经添加了一些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>

​

谢谢

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>