Несколько слайдер изображений не работает?скользят только два изображения, но мне нужно более двух слайдов?

Question

У меня есть слайдер с несколькими делителями, которые скользят шаг за шагом, в моем слайдере я объединил 4 ползунка, в каждом div у меня есть 2 изображения, которые скользят нормально, но .. 1. Мне нужно более 2 слайдов в каждом слайдере. 2. В скользящем цикле каждый слайд должен показывать разные анимации, такие как slideUp, SlideDown, slideLeft, SlideRight. 3. Другая проблема заключается в том, что когда страница обновляется или загружается ползунок, работает нормально, но когда у меня есть прокрутка или посещение другой вкладки, и снова я захожу на свой слайд без обновления или загрузки ползунка страницы не работают, но при обновлении страницы это работает хорошо.

HTML, CSS, Jquery

MySQL

<!-- Slider section -->
   <section class="slider-sec">
        <div class="slider-sec-wrapper">
            <div class="slider-sec-left">
                <div id="myslide">
                    <div class="rotating-home animated slideInLeft" data-display="0">
                        <img src="images/new-slider/s1.jpg"  border="0" />
                    </div>

                    <div class="rotating-home animated slideInLeft" data-display="1">
                        <img src="images/new-slider/s2.jpg" class="slide" border="0" />
                    </div>

                    <div class="rotating-home animated slideInRight" data-display="2">
                        <img src="images/new-slider/s3.jpg" class="slide"  border="0" />
                    </div>

                    <div class="rotating-home animated slideInRight" data-display="3">
                        <img src="images/new-slider/s3.jpg" class="slide"  border="0" />
                    </div>

                </div>
            </div>

            <div class="slider-sec-right">
                <div class="sli-right-top">
                    <div class="sl-top-sli">
                        <div id="myslide">
                            <div class="rotating-home animated slideInRight" data-display="4">
                                <img src="images/new-slider/sli-right.jpg" class="slide"  border="0" />
                            </div>
                            <div class="rotating-home animated slideInRight" data-display="5">
                                <img src="images/new-slider/institute.jpg" class="slide"  border="0" />
                            </div>
                            <div class="rotating-home animated slideInRight" data-display="6">
                                <img src="images/new-slider/institute.jpg" class="slide"  border="0" />
                            </div>

                            <div class="rotating-home animated slideInRight" data-display="7">
                                <img src="images/new-slider/institute.jpg" class="slide"  border="0" />
                            </div>

                        </div>
                    </div>
                </div>

                <div class="sli-right-bottom">
                    <div class="sli-right-bottom-left">
                        <div id="myslide">
                            <div class="rotating-home animated slideInRight" data-display="8">
                                <img src="images/new-slider/s6.jpg" class="slide"  border="0" />
                            </div>

                            <div class="rotating-home animated slideInLeft" data-display="9">
                                <img src="images/new-slider/s5.jpg" class="slide"  border="0" />
                            </div>
                            <div class="rotating-home animated slideInLeft" data-display="10">
                                <img src="images/new-slider/s6.jpg" class="slide"  border="0" />
                            </div>

                            <div class="rotating-home animated slideInLeft" data-display="11">
                                <img src="images/new-slider/s6.jpg" class="slide"  border="0" />
                            </div>
                        </div>
                    </div>
                    <div class="sli-right-bottom-right">
                        <div id="myslide">
                            <div class="rotating-home animated slideInLeft" data-display="12">
                                <img src="images/new-slider/s6.jpg" class="slide"  border="0" />
                            </div>

                            <div class="rotating-home animated slideInRight" data-display="13">
                                <img src="images/new-slider/s6.jpg" class="slide"  border="0" />
                            </div>

                            <div class="rotating-home animated slideInRight" data-display="14">
                                <img src="images/new-slider/s5.jpg" class="slide"  border="0" />
                            </div>

                            <div class="rotating-home animated slideInRight" data-display="15">
                                <img src="images/new-slider/s5.jpg" class="slide"  border="0" />
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>
   </section>
   <!-- Slider section -->

        <script>
        $(document).ready(function () {
        var InfiniteRotator = {
            init: function () {
                //initial fade-in time (in milliseconds)
                var initialFadeIn = 2000;
                //interval between items (in milliseconds)
                var itemInterval = 1000;
                //cross-fade time (in milliseconds)
                var fadeTime = 1000;
                //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>