the following is the static code to show the banner on web page:
<!-- SLIDE  -->
						<li data-index="rs-4" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="300" data-rotate="0" data-saveperformance="off" data-title="Slide"
										data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
							<!-- MAIN IMAGE -->
							<img src="https://hkchangshaa.org/uploads/media/2025/banner_1.jpeg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
							<!-- LAYERS -->
							
							<!-- LAYER NR. 1 -->
							
							<div class="tp-caption TRX-subtitle-extra   tp-resizeme  extra" id="slide-4-layer-1" data-x="right" data-hoffset="404" data-y="137" data-width="['auto']" data-height="['auto']" data-transform_idle="o:1;" data-transform_in="y:50px;opacity:0;s:1500;e:Power2.easeInOut;"
											data-transform_out="opacity:0;s:300;" data-start="600" data-splitin="none" data-splitout="none" data-responsive_offset="on" data-captionhidden="on">Community Foundation </div>
						
											
							<!-- LAYER NR. 2 -->
							 
							<div class="tp-caption TRX-title-extra   tp-resizeme" id="slide-4-layer-2" data-x="right" data-hoffset="20" data-y="171" data-width="['auto']" data-height="['auto']" data-transform_idle="o:1;" data-transform_in="y:50px;opacity:0;s:1400;e:Power2.easeInOut;"
											data-transform_out="opacity:0;s:300;" data-start="1200" data-splitin="none" data-splitout="none" data-responsive_offset="on">HELP SENIOR CITIZENS </div>
											
								
							<!-- LAYER NR. 3 -->
							 
							<div class="tp-caption TRX-button   tp-resizeme" id="slide-4-layer-3" data-x="right" data-hoffset="336" data-y="279" data-width="['auto']" data-height="['auto']" data-transform_idle="o:1;" data-transform_in="y:50px;opacity:0;s:1400;e:Power2.easeInOut;"
											data-transform_out="opacity:0;s:300;" data-start="1700" data-splitin="none" data-splitout="none" data-responsive_offset="on"><a href="our-causes.html" class="sc_button sc_button_square sc_button_style_filled2 sc_button_size_large extra   sc_button_iconed icon-arrow">How You Can Help?</a> </div>
											
						</li>
						<!-- SLIDE  -->
						<li data-index="rs-7" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="300" data-rotate="0" data-saveperformance="off" data-title="Slide"
										data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
							<!-- MAIN IMAGE -->
							<img src="https://hkchangshaa.org/uploads/media/2025/banner_3.jpeg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
							<!-- LAYERS -->

							<!-- LAYER NR. 1 -->
							 
							<div class="tp-caption TRX-subtitle-extra   tp-resizeme  extra" id="slide-4-layer-1" data-x="right" data-hoffset="404" data-y="137" data-width="['auto']" data-height="['auto']" data-transform_idle="o:1;" data-transform_in="y:50px;opacity:0;s:1500;e:Power2.easeInOut;"
											data-transform_out="opacity:0;s:300;" data-start="600" data-splitin="none" data-splitout="none" data-responsive_offset="on" data-captionhidden="on">Community Foundation </div>
							
											
							<!-- LAYER NR. 2 -->
							 
							<div class="tp-caption TRX-title-extra   tp-resizeme" id="slide-4-layer-2" data-x="right" data-hoffset="20" data-y="171" data-width="['auto']" data-height="['auto']" data-transform_idle="o:1;" data-transform_in="y:50px;opacity:0;s:1400;e:Power2.easeInOut;"
											data-transform_out="opacity:0;s:300;" data-start="1200" data-splitin="none" data-splitout="none" data-responsive_offset="on">HELP SENIOR CITIZENS </div>
											
											
							<!-- LAYER NR. 3 -->
							 
							<div class="tp-caption TRX-button   tp-resizeme" id="slide-4-layer-3" data-x="right" data-hoffset="336" data-y="279" data-width="['auto']" data-height="['auto']" data-transform_idle="o:1;" data-transform_in="y:50px;opacity:0;s:1400;e:Power2.easeInOut;"
											data-transform_out="opacity:0;s:300;" data-start="1700" data-splitin="none" data-splitout="none" data-responsive_offset="on"><a href="our-causes.html" class="sc_button sc_button_square sc_button_style_filled2 sc_button_size_large extra   sc_button_iconed icon-arrow">How You Can Help?</a> </div>
										
						</li>

And the following code is the old code for display the banner with the data from server:
<?php foreach ($sliders as $row) { ?>
            <div class="swiper-slide" style="opacity: unset; width: 100% !important;">
                <div style="position: relative;overflow: hidden;display: block;">
                    <a href="<?= $row['link'] ?>">
                        <img src="base_url()/<?= $row['image'] ?>">
                    </a>
                </div>
            </div>
        <?php }?>

Please update with the new design with the data from server,  keep the static text element for the banner for demo.