How to split array results into two slides?

Question

I'm trying to split array result into two slides. I have round about 50+ entries in my array. I want to show just 14 on each slide/page. I want to show the remaining in other slides/pages.

What i tried is below:

<div class="mySlides fade">
    <div class='content'>
        <div class="symptoms-container">
            <?php
                                          $slideCount = 1;
                                          $symptomCount = 1;
                                      ?>
                <div class="row">
                    <?php foreach($symptoms as $id => $symptom): ?>
                        <div class="col-md-6">
                            <ul class="check-list">
                                <li>
                                    <label class="label_check" for="symptom_<?php echo $symptom['id'] ?>">
                                        <input type="checkbox" data-gender="<?php echo $symptom['gender'] ?>" id="symptom_<?php echo $symptom['id'] ?>" name="symptom[<?php echo $symptom['id'] ?>]" value="<?php echo $symptom['id'] ?>" />
                                        <?php echo $symptom['title'] ?>
                                    </label>
                                </li>
                                <ul>
                        </div>
                        <?php $symptomCount++; ?>
                            <?php endforeach; ?>
                </div>
                <!--Row END-->
        </div>
    </div>
</div>

The above code is showing all symptoms/data/entries in one page i want the first 14 in one slide and the 2nd 14 in 2nd slide and so on. I hope it make sense. Slides Code:

<div class="mySlides fade">
    <div class='content'>
        First Slide
    </div>
</div>
</div>


<div class="mySlides fade">
    <div class='content'>
        This is a form and symptoms data 2
    </div>
</div>

            <div style="text-align:center">
              <span class="dot" onclick="currentSlide(1)"></span>
              <span class="dot" onclick="currentSlide(2)"></span>
              <span class="dot" onclick="currentSlide(3)"></span>
            </div><!-- Slider Next Prev Buttons End -->

JS:

var slideIndex = 1;
        showSlides(slideIndex);

        function plusSlides(n) {
            showSlides(slideIndex += n);
        }

        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            if (n > slides.length) {slideIndex = 1}
            if (n < 1) {slideIndex = slides.length}
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex-1].style.display = "inline";
            dots[slideIndex-1].className += " active";
        }

Thanks for your time. Any help will be highly appreciated. let me know if further requirements is needed.

Thank you so much.

Answer 1

You can split the array with array_chunk and loop each chunk.

General idea:

$symptoms = range(1,50); // your array

$chunks = array_chunk($symptoms, 14); // split it to chunks of 14

foreach($chunks as $chunk){
    echo "<div class='mySlides fade'>\n<div class='content'>\n"; // the html that creates the slide
    foreach($chunk as $symptom){
        echo $symptom . "\n"; // echoes 14 symptoms
    } 
    echo "</div>\n</div>\n"; 
}

https://3v4l.org/K5smh