问题
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>◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</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>◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</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