jQuery Dynamic Slider - использование 8 на странице

Question

Я делаю слайдер отключения звука с HTML и jQuery. Слайдер имеет маленькие и большие изображения.

У вас также должен быть определенный номер на каждой странице. jQuery не смог преодолеть. Я не полный судья.

Как мне динамически иметь 8 на каждой странице?

Я стреляю из mysqld

Мой код:

<section class="top-ads">
    <div class="home-slider-container">
        <div class="home-slider gallery js-flickity slider-container" data-flickity-options='{ "wrapAround": true, "pageDots": false }'>

        <div class="gallery-cell">
            <div class="col-tm-1">
                <div class="slider">
                    <div class="big-slider">
                        <a href="#bigslider" title="#bigslider">
                            <span class="slider-text">
                            <span class="slider-text-title">#slider text 1</span>
                            </span>
                            <figure>
                                <img class="lazy" data-src="#bigslider" width="583" height="328" title="#bigslider" alt="#bigslider" />
                            </figure>
                        </a>
                    </div>
                    <div class="small-slider">
                        <a href="#smallslider" title="#smalltitle">
                            <span class="slider-text">
                            <span class="slider-text-title">#slider text 2</span>
                            </span>
                            <figure>
                                <img class="lazy" data-src="#smallslider" width="292" height="164" title="#smalltitle" alt="#smalltitle" />
                            </figure>
                        </a>
                    </div>
                </div>
            </div>
        </div>
               </div>
    </div>
    <script type="text/javascript">
        $('.home-slider').bind( 'settle', function(e) {
            $(".home-slider .gallery-cell.is-selected").find("img").lazyLoadXT();
        });

        var activate = Flickity.prototype.activate;
        Flickity.prototype.activate = function() {
            if ( this.isActive ) {
                return;
            }
            activate.apply( this, arguments );
            this.dispatchEvent('ready');
            $(".home-slider").css({
                "opacity": "1",
                "visibility": "visible"
            });
            windowWidth = $(window).width()-1170;
            $(".slider-container .previous").css("left",windowWidth/2-68);
            $(".slider-container .next").css("right",windowWidth/2-68);
            $(".home-slider .flickity-prev-next-button").css("visibility","visible");
        };

        $(window).resize(function(){
            windowWidth = $(window).width()-1170;
            $(".slider-container .previous").css("left",windowWidth/2-68);
            $(".slider-container .next").css("right",windowWidth/2-68);
        });
    </script>
</section>