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

本秂侑毒 提交于 2020-01-25 06:38:34

问题


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


回答1:


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.



来源:https://stackoverflow.com/questions/59828095/require-a-solution-for-full-screen-image-slide-show-using-cakephp-and-foundation

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!