Я написал код для обработки слайд-шоу изображений - карусель bootstrap слайд-шоу. где я сталкиваюсь с проблемой, когда я в соответствии с моим алгоритмом нахожу, что изображения появляются и загружаются как HTML, но когда JQuery l oop работает, я вижу первое и второе изображения, но все остальные изображения не скользить через. наш алгоритм должен работать так, чтобы все изображения проходили через слайд-шоу и переходили от последнего к первому. В этом процессе мне нужен код, работающий так, как если бы он был сделан, чтобы заставить слайд-шоу изображений работать для всех изображений, и убедиться, что код написан для каждого изображения, независимо от того, сколько там изображений, поскольку я пересекаю стопку изображений, которые у меня есть. собрать вместе, чтобы скользить через наш слайд-шоу изображений. Когда я перехожу со страницы go на HTML, я должен обнаружить, что код написан так, чтобы он работал для каждого изображения в моем слайд-шоу, и проследить каждое изображение JQuery l oop просто и понятно, но код не работает принять каждое изображение во внимание. Поэтому я прошу всех нас выяснить текущий алгоритм на основе алгоритма, согласно которому алгоритм кода JQuery работает для каждого изображения от первого изображения до последнего изображения, вернуться к первому изображению и продолжать это делать.
$(document).ready(function() {
$('div .carousel-item').each(function(){
$('.carousel-item').delay(4000).removeClass('active');
$('.carousel-item').next().addClass('active').nextAll().removeClass('active');
});
});
Приведенный выше код прекрасно работает для первых двух слайдов, но затем переходит ко второму слайду, но третий слайд не отображается. Мне требуется go для каждого div с кодом содержания ниже:
<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>
Будьте добры, предложите сдвинуть каждый div с JQuery.
HTML код ниже:
<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>
Проблема, с которой я нахожу код, не превышающий go после определенной итерации, возможно ли запустить аналогичный сценарий JQuery хотя бы с таймер для запуска скрипта, чтобы он работал, пока страница не будет там, как она есть.