I have written code to process an image slide show - carousel bootstrap slideshow. where i face an issue is when i according to my algorithm i find that images show up and load as HTML but when JQuery loop works i see first and second images show up but all rest of the images do not slide through. our algorithm should work in a way that i make all images traverse through image slide show and traverse back from last to first. In that process i need code to work as if that is made to make image slide show work for all images and make sure that code is written for each image no matter what number of images are there as i traverse through stack of images that i have put together to slide through our image slide show. When i go to HTML page i must find that code is written in a way that works for each image in my slide show and traverse each image JQuery loop is simple and straight forward but code doesn't take every image into consideration. So i request all of us to figure out an algorithm basis current code that JQuery code algorithm works for each image from first image to last image and return back to first image and continue to do so.
$(document).ready(function() {
$('div .carousel-item').each(function(){
$('.carousel-item').delay(4000).removeClass('active');
$('.carousel-item').next().addClass('active').nextAll().removeClass('active');
});
});
Above code works great for first two slides but then gets to second slide but third slide doesn't show up. i require it to go for each div with content code below:
<div class="carousel-inner">
<?php
$j = 0;
foreach($employers as $employer){
if($j==0){
$active = ' active';
}else{
$active = '';
}
echo '<div class="carousel-item'.$active.'">
'.$this->Html->image($employer['image'], ['alt'=>'employer image',
"class"=>"d-block w-100"]).'
<div class="carousel-caption d-none d-md-block">
<h5>'.$employer['name'].'</h5>
<p>'.
$employer['brief'].
$employer['desg'].
$employer['created'].
'</p>
</div>
</div>';
$j++;
}
?>
</div>
Be kind to suggest slide each div with JQuery.
HTML code below:
<div id="carouselEmployerDiv" class="carousel slide" data-ride="carousel" style="margin: 20px;">
<ol class="carousel-indicators">
<li data-target="#carouselEmployer" data-slide-to="0" class=""></li><li data-target="#carouselEmployer" data-slide-to="1" class="active"></li><li data-target="#carouselEmployer" data-slide-to="2" class=""></li><li data-target="#carouselEmployer" data-slide-to="3" class=""></li><li data-target="#carouselEmployer" data-slide-to="4" class=""></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item">
<img src="/sd/sd/img/DDU_GKY_Electrician_Skills.JPG" alt="employer image" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h5>dsa</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti quam voluptatum vel repellat ab similique molestias molestiae ea omnis eos, id asperiores est praesentium, voluptate officia nulla aspernatur sequi aliquam.ex1/11/20, 12:00 AM</p>
</div>
</div><div class="carousel-item active">
<img src="/sd/sd/img/World_%20Youth_Skill_Day_2019.JPG" alt="employer image" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h5>name </h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti quam voluptatum vel repellat ab similique molestias molestiae ea omnis eos, id asperiores est praesentium, voluptate officia nulla aspernatur sequi aliquam.
desg1/13/20, 12:00 AM</p>
</div>
</div><div class="carousel-item">
<img src="/sd/sd/img/Scheme_and_Logo_%20Launch.jpeg" alt="employer image" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h5>name me </h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti quam voluptatum vel repellat ab similique molestias molestiae ea omnis eos, id asperiores est praesentium, voluptate officia nulla aspernatur sequi aliquam.
desg q1/13/20, 12:00 AM</p>
</div>
</div><div class="carousel-item">
<img src="/sd/sd/img/Office_RSLDC-Kaushal_Bhawan.jpg" alt="employer image" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h5>name my </h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti quam voluptatum vel repellat ab similique molestias molestiae ea omnis eos, id asperiores est praesentium, voluptate officia nulla aspernatur sequi aliquam.
desg pos1/13/20, 12:00 AM</p>
</div>
</div><div class="carousel-item">
<img src="/sd/sd/img/SKOCH_Award.JPG" alt="employer image" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h5>name e</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti quam voluptatum vel repellat ab similique molestias molestiae ea omnis eos, id asperiores est praesentium, voluptate officia nulla aspernatur sequi aliquam.
desg posi1/13/20, 12:00 AM</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Issue i find with code it doesn't go beyond a certain iteration is it possible to run similar JQuery script at least with a timer to run script so it does run till page is there as it is.
