Помогите, пожалуйста, создать 4 слайдера div в одном цикле.Каждый div имеет несколько изображений, которые будут скользить, в каждом div первое изображение будет скользить в 1-м цикле, затем второе изображение второго цикла будет скользить из каждого div, таким образом, цикл будет продолжать скользить ...
https://jsfiddle.net/0L9ry37c/7/
<section class="slider-sec">
<div class="slider-sec-wrapper">
<div class="slider-sec-left">
<div class="myslide">
<div class="rotating-home animated slideInLeft">
<img src="images/new-slider/s1.jpg" border="0"/>
</div>
<div class="rotating-home animated slideInLeft">
<img src="images/new-slider/s2.jpg" border="0" />
</div>
<div class="rotating-home animated slideInRight">
<img src="images/new-slider/s4.jpg" border="0" />
</div>
<div class="rotating-home animated slideInRight">
<img src="images/new-slider/s3.jpg" border="0" />
</div>
</div>
</div>
<div class="slider-sec-right">
<div class="sli-right-top">
<div class="sl-top-sli">
<div class="myslide">
<div class="rotating-home animated slideInRight">
<img src="images/new-slider/sli-right.jpg" border="0" />
</div>
<div class="rotating-home animated slideInRight">
<img src="images/new-slider/institute.jpg" border="0" />
</div>
<div class="rotating-home animated slideInRight">
<img src="images/new-slider/institute.jpg" border="0" />
</div>
<div class="rotating-home animated slideInRight">
<img src="images/new-slider/institute.jpg" border="0" />
</div>
</div>
</div>
</div>
<div class="sli-right-bottom">
<div class="sli-right-bottom-left">
<div class="myslide">
<div class="rotating-home animated slideInRight">
<img src="images/new-slider/s6.jpg" border="0" />
</div>
<div class="rotating-home animated slideInLeft">
<img src="images/new-slider/s5.jpg" border="0" />
</div>
<div class="rotating-home animated slideInLeft">
<img src="images/new-slider/s6.jpg" border="0" />
</div>
<div class="rotating-home animated slideInLeft">
<img src="images/new-slider/s6.jpg" border="0" />
</div>
</div>
</div>
<div class="sli-right-bottom-right">
<div class="myslide">
<div class="rotating-home animated slideInLeft">
<img src="images/new-slider/s6.jpg" border="0" />
</div>
<div class="rotating-home animated slideInRight">
<img src="images/new-slider/s6.jpg" border="0" />
</div>
<div class="rotating-home animated slideInRight">
<img src="images/new-slider/s5.jpg" border="0" />
</div>
<div class="rotating-home animated slideInRight">
<img src="images/new-slider/s5.jpg" border="0" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
$(document).ready(function () {
var InfiniteRotator = {
init: function () {
//initial fade-in time (in milliseconds)
var initialFadeIn = 1000;
//interval between items (in milliseconds)
var itemInterval = 1000;
//cross-fade time (in milliseconds)
var fadeTime = 800;
//count number of items
var rotationLimit = $('div.myslide').length + 1;
//set current item
var currentItem = 0;
//loop through the items
var infiniteLoop = setInterval(function () {
$('div.myslide').eq(currentItem).find('.rotating-home').fadeToggle(fadeTime);
currentItem++;
if(currentItem == rotationLimit) currentItem = 0;
}, itemInterval);
}
};
InfiniteRotator.init();
});
</script>
/*===========slider ===========*/
#page {
height: 100%;
display: none;
}
.rotating-home img {
width: 100%;
position: absolute;
}
#myslide{
position: relative;
display: block;
width: 100%;
}
.rotating-home {
position: relative;
}
.rotating-home:first-of-type {
display: none;
}
Мне нужно 4 элемента изображения с несколькими делениями, скользящие в одном цикле.В каждом div первый элемент будет скользить в различной анимации, такой как (влево, вправо, вверх, вниз), затем второй элемент второго цикла будет скользить в форме 4 div, третий элемент третьего цикла будет скользить в форме 4 div ... таким образомползунок будет продолжен ..