创世儿童主题上的多个 bxsliders

Question

我正在尝试使用自定义字段在 wp genesis 子主题上添加多个 bxsliders。第一个本身运行良好，在 genesis 子主题函数中编写了以下函数：

add_action('genesis_before_content', 'page_slider');
function page_slider () {

//My ACF Fields for reference
//page_slideshow - field group
//page_slide - sub-field, image
//caption - sub-field, text
//link - sub-field, url

if( have_rows('page_slideshow') ): ?>
<div class="page-slideshow">
<ul class="bxslider">
<?php while( have_rows('page_slideshow') ): the_row(); 
    // vars
    $image = get_sub_field('page_slide');
    $content = get_sub_field('caption');
    $link = get_sub_field('link');
    ?>
    <li>
        <img src="<?php echo $image; ?> ">
        <div class="bx-caption"><span> <?php echo $content; ?> </span></div>
    </li>
<?php endwhile; ?>
</ul>
</div>  
<?php endif;

<script>
jQuery(document).ready(function($) {
$('.bxslider').bxSlider({
    auto: true,
    pager: false,
    adaptiveHeight: false,
});
});
</script>
}

当我添加第二个滑块时，我在脚本中为新滑块添加了一个部分，如下所示：

<script>
jQuery(document).ready(function($) {
$('.bxslider').bxSlider({
auto: true,
pager: false,
adaptiveHeight: false,
});
$('.bxslider2').bxSlider({
auto: true,
pager: false,
adaptiveHeight: false,
});
});
</script>

我尝试将它添加到同一个地方，或者将脚本移动到一个单独的函数中。结果是第一个滑块仅显示控件，第二个滑块显示图像但不是滑块格式。

Answer 1

好的，我在其他地方找到了我的问题的答案 (https://www.gadgetdaily.xyz/create-a-responsive-slider-with-the-bxslider-jquery-plugin/)，这里是解决方案，以防其他人试图找出类似的东西：

我不确定这是否有必要，但对我来说最好的方法是将两个幻灯片放映作为单独的函数，然后用另一个单独的函数保存脚本，然后可以移动页脚的脚本。
从单个bxslider变为多个时，选择器从class变为id。
此外，当从常规滑块更改为轮播时，幻灯片使用 div 而不是 ul。

所以我的最终脚本如下所示：

add_action ('genesis_footer','bxslider_scripts');
function bxslider_scripts() {
?>
<script>            
jQuery(document).ready(function($) {
$('#slider1').bxSlider({
    auto: true,
    pager: false,
    adaptiveHeight: false,
});

$('#slider2').bxSlider({
    slideWidth: 320,
    minSlides: 5,
    maxSlides: 3,
    slideMargin: 10,
    auto:true,
});
});
    </script>
<?php
}

创世儿童主题上的多个 bxsliders

Multiple bxsliders on genesis child theme

javascript

jquery

wordpress

bxslider