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更改为倍数时，选择器会从类更改为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

1 个答案: