I have my html section as

            <section class="w3l-main-slider" id="home">

                <div class="banner-content">
                    <?php 
                    // Array to store banner URLs
                    $banners = [
                        './assets/images/banner1.jpeg',
                        './assets/images/banner2.jpeg',
                        './assets/images/banner3.jpeg',
                    ];
                    $banner_text = [
                        'Text1',
                        'Text2',
                        'Text3',                     
                        ];
                    
                    ?>
                    <div id="demo-1" 
                        data-zs-src='[<?php echo '"' . implode('","', $banners) . '"' ?>]' 
                        data-zs-overlay="dots">
                        <div class="demo-inner-content">
                        <h1 class="mt-1 home-title" style="color:white;">Some text</h1>
                        <center><a class="text-center btn btn-style mt-4" href="text.php">Book with     Us</a></center>
                        </div>
                    </div>
                </div>
            </section>

and some imports as

        <!-- Template JavaScript -->
        <script src="assets/js/jquery-3.3.1.min.js"></script>
        <script src="assets/js/theme-change.js"></script>

        <!-- banner slick slider -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/modernizr-2.6.2.min.js"></script>
        <script src="assets/js/jquery.zoomslider.min.js"></script>
        <script src="assets/js/js/jquery.flexslider.js"></script>
        <script src="assets/js/js/jquery.flexslider.js"></script>
        <script src="assets/js/js/jquery.easing.js"></script>
        <!-- //banner slick slider -->

The banner images are sliding as expected but I want the text from the text array to slide too.

I am trying to map through the text array but it is not working as expected.