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

Question

code below is long but really straight forward only require code to put forward ability to slide from first slide to last slide to that return to first slide to traverse.

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

code below is to slide thumbnail images traverse from first to last and return to first as above but with thumbnails that show product slide 4-5 at one go. Below code must show 4-5 thumbnails with small text and traverse as timer and button click play a role.

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

so both are different do not get confused be kind to put forward a relation between both but not to confuse them as same since one is a full screen slide show next one is thumbnail slideshow.

vision to make : fullscreen slideshow thumbnail slide show

Answer 1

Orbit has been discontinued i suggest use carousel with bootstrap.

Answer 2

Is your question the following?

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

If so please shorten your complete question to this (loop, start with first slide after last).

This already works by default as data-infinite-wrap is true by default.

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

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

You did not specify the exact Foundation version (6.x.y, x and y are needed) and we would need a https://codepen.io to see your actual problem.

Also try to remove is-active from your output. This may be the cause. And only provide generated html code so that we can reproduce your issue.