需要一个使用cakephp和foundation framework实现全屏图片幻灯片的解决方案

Question

下面的代码很长但真的很简单只需要代码提出从第一张幻灯片到最后一张幻灯片到 return 到第一张幻灯片的能力来遍历。

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
                <div class="orbit-wrapper">
                    <div class="orbit-controls">
                      <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
                      <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
                </div>
                    <ul class="orbit-container">

                        <?php
                            foreach($employers as $employer){

                                echo '<li class="orbit-slide">
                                        <figure class="orbit-figure">
                                            '.$this->Html->image($employer['image'], ['alt'=>'employer image',
                                                                                "class"=>"orbit-image"]).'
                                            <figcaption class="orbit-caption">'.
                                                $employer['brief'].
                                                $employer['name'].
                                                $employer['desg'].
                                                $employer['created'].'
                                            </figcaption>
                                        </figure>
                                    </li>
                                ';
                            }
                        ?>
                    </ul>
            </div>

            <nav class="orbit-bullets">
                <?php
                $i=0;
                foreach($employers as $employer){

                    echo '<button data-slide="'.$i.'">
                        <span class="show-for-sr">First slide details.</span>
                        <span class="show-for-sr" data-slide-active-label>Current Slide</span>
                    </button>';
                    $i++;
                }
            ?>
            </nav>
        </div>

下面的代码是幻灯片缩略图图像从第一张到最后一张和 return 到第一张，但缩略图一次显示产品幻灯片 4-5。下面的代码必须显示 4-5 个带有小文本的缩略图，并在计时器和按钮单击起作用时遍历。

<div class="ecommerce-product-slider orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
                <ul class="orbit-container">
                    <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
                    <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>

            <?php

            foreach($sectorsandcourses as $sectorandcourse){

                echo '<li class="orbit-slide">
                        <div class="row small-up-2 medium-up-4 large-up-5 align-center">
                            <div class="column">
                                <div class="product-card">
                                    <div class="product-card-thumbnail">
                                      <a href="#" class="th">'.              
                                          $this->Html->image($sectorandcourse['image'], ['alt'=>'Image for sector and courses',
                                                                                          'style'=>'width:100%;']).'</a>
                                    </div>
                                    <h2 class="product-card-title"><a href="#">'.$sectorandcourse['sectors_and_courses'].'</a></h2>
                                    <span class="product-card-desc">Product Description</span>
                                    <span class="product-card-price">'.$sectorandcourse['count'].'</span>
                                </div>
                            </div>
                        </div>
                    </li>';
            }
            ?>
                </ul>
                <nav class="orbit-bullets">
                    <?php
                    foreach($sectorsandcourses as $sectorandcourse){

                        echo '
                            <button class=data-slide="0">
                                <span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span>
                            </button>';
                    }
                ?>
                </nav>
            </div>

所以两者不同，请不要混淆请提出两者之间的关系，但不要将它们混淆，因为一个是全屏幻灯片放映，下一个是缩略图幻灯片放映。

愿景： fullscreen slideshow thumbnail slide show

Answer 1

你的问题是下面的吗？

i only require to work with that code that works to enable slide show beyond seond slide and return to first slide

如果是这样，请将您的完整问题缩短为这个（循环，从最后一张幻灯片开始）。

默认情况下这已经有效，因为 data-infinite-wrap 默认为 true。

https://get.foundation/sites/docs/orbit.html

https://get.foundation/sites/docs/orbit.html#js-options

您没有指定确切的 Foundation 版本（6.x.y，需要 x 和 y），我们需要 https://codepen.io 才能看到您的实际问题。

同时尝试从输出中删除 is-active。这可能是原因。并且只提供生成的 html 代码，以便我们可以重现您的问题。

Answer 2

Orbit 已停产我建议使用带 bootstrap 的旋转木马。

需要一个使用cakephp和foundation framework实现全屏图片幻灯片的解决方案

Require a solution for full screen image slide show using cakephp and foundation framework

html

css

php

zurb-foundation-6

cakephp-4.x