如何将数组结果分成两张幻灯片?

时间:2018-10-09 13:46:56

标签: javascript php jquery slider phalcon

我正在尝试将数组结果分成两张幻灯片。我的数组中有大约50多个条目。我只想在每个幻灯片/页面上显示14个。我想在其他幻灯片/页面中显示其余的内容。

我尝试过的是:

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

上面的代码在一页中显示所有症状/数据/条目,我希望一张幻灯片中的前14个和第二张幻灯片中的第二个14,依此类推。我希望这是有道理的。 幻灯片代码:

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

感谢您的宝贵时间。任何帮助将不胜感激。让我知道是否需要进一步的要求。

非常感谢您。

1 个答案:

答案 0 :(得分:1)

您可以使用array_chunk拆分数组并循环每个块。

总体思路:

'D'

https://3v4l.org/K5smh

相关问题