Removing or creating HTML with PHP

I’m using a Swiper.js slide on this project and the images and texts of every single slide are going to be controlled through the WordPress panel, including how many ‘pages’ the Slide will have. This means that if the client decides that the slide will have, let’s say 5 pages, the var $swiperPages will store this number 5, so I guess there are two options:

creating through PHP, 5 HTML parent divs with child content (like h2, p and img) or
removing the HTML parent divs and it’s child contents that has a ID number greater than 5.

Here’s the HTML of the page:

<?php
$swiperPages = //get_theme_mod() code here to retrieve the value
$swiperNum = 1;
$title = 'title';
$subtitle = 'subtitle'
$imageurl = 'http://mypage.com/banner'
?>  

<div class="swiper">
    <div class="swiper-wrapper">

        <!-- slide page n° 1 -->
        <div id="<?php echo $swiperNum;?>" class="swiper-slide row">
            <h2><?php echo $title . $swiperNum; ?></h2>
            <p><?php echo $subtitle . $swiperNum; ?></p>
            <img src="<?php echo $imageurl . $swiperNum++ ?>"></img>
        </div>

        <!-- slide page n° 1 -->
        <div id="<?php echo $swiperNum;?>" class="swiper-slide row">
            <h2><?php echo $title . $swiperNum; ?></h2>
            <p><?php echo $subtitle . $swiperNum; ?></p>
            <img src="<?php echo $imageurl . $swiperNum++ ?>"></img>
        </div>
                    
        <!-- slide page n° 3 and so on.. -->
        <div id="<?php echo $swiperNum;?>" class="swiper-slide row">
            <h2><?php echo $title . $swiperNum; ?></h2>
            <p><?php echo $subtitle . $swiperNum; ?></p>
            <img src="<?php echo $imageurl . $swiperNum++ ?>"></img>
        </div>
                

    </div>

    <div class="swiper-paginacao"></div>
</div>

Obs: As you can see, at the end of each parent div that creates a singular slide page, I use the incrementor ++ on the last #swiperNum to increase the value of the next by one, changing not only the ID but also titles, subtitles and image url.

I only create 3 .swiper-slide divs on the example above, but I need 10 of those divs, because each one holds the content of one slide page and I’ll allow the client to have a maximum of 10 pages on this slide.
The problem is that I can’t let empty .swiper-slide parent divs to remain on the page because even without texts and images, the Swiper.js automatically creates a bullet span for each slide page.
I tried using the javascript var.remove() function to eliminate the empty divs but it didn’t work very well. The script confused the slide order. I need a PHP solution for thus will render before the Swiper.JS does its work.

How can I remove or create, with PHP, those parent divs and it’s child contents based on the $swiperPages value?

Answer

What you want to do is make a php for loop where the number of iterations is the number of pages. Something like this:

<?php
    for ($x = 0; $x <= $swiperNum; $x++) { ?>
    <div id="<?php echo $x;?>" class="swiper-slide row">
            <h2><?php echo $title . $x; ?></h2>
            <p><?php echo $subtitle . $x; ?></p>
            <img src="<?php echo $imageurl . $x?>"></img>
        </div>
<?php } ?>

Advertisement

Answer