Нужен слайдер нескольких изображений Multi Div в одном цикле - PullRequest
0 голосов
/ 25 апреля 2019

Помогите, пожалуйста, создать 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 ... таким образомползунок будет продолжен ..

...