Multiple bxsliders on genesis child theme

Question

I'm trying to add multiple bxsliders using custom fields on a wp genesis child theme. The first has worked fine by itself, with the following function written in the genesis child theme functions:

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>
}

When I add the second slider, I add a section in the script for the new slider, as such:

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

I tried adding it in the same place, or moving the script to a separate function. And the result is the first slider shows only the controls, and the second shows images but not in slider format.

Answer 1

ok, I've found the answer elsewhere to my question (https://www.gadgetdaily.xyz/create-a-responsive-slider-with-the-bxslider-jquery-plugin/) and here is the solution in case anyone else is trying to figure out something similar:

1. I don't know for sure that this is necessary, but it worked best for me to put the two slideshows as separate functions and follow with another separate function holding the script, which could then move the script to the footer.

2. When changing from a single bxslider to multiples, the selector changes from a class to id.

3. Also, when changing from a regular slider to a carousel, the slideshow uses div instead of ul.

So my final scripts look like this:

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
}