Как заставить этот код перемещать один класс за раз

Question

Итак, у меня есть три DIV с одинаковым карусельным эффектом.Я уверен, что могу использовать три разных кода JavaScript для перемещения по одному, но хотел бы сделать его как можно более минимальным.С текущим кодом, когда я нажимаю на стрелку один раз, все три перемещаются.Как я могу заставить их двигаться отдельно?

Три таких же, как показано ниже:

(function ($) {
    $.fn.thumbGallery = function (settings) {
        var $this = $(this);
        return this.each(function () {
            settings = jQuery.extend({
                speed: 1000,
                leftArrow: $this.find('.arrow-left'),
                rightArrow: $this.find('.arrow-right'),
                galleryContainer: $this.find('.gallery-inner'),
                visibleImagesSize: 4
            }, settings);

            var imgElements = settings.galleryContainer.find('img').length;
            var size = settings.visibleImagesSize;

            //settings.leftArrow.hide();

            if (imgElements > settings.visibleImagesSize) {
                settings.rightArrow.show();
            } else {
                //settings.rightArrow.hide();
            }

            function animateLeft() {
                var el = settings.galleryContainer.children(":last");

                settings.galleryContainer.animate({
                    left: '+=' + el.outerWidth(true) + 'px'
                },
                    settings.speed);
            }

            function animateRight() {
                var el = settings.galleryContainer.children(":first");
                settings.galleryContainer.animate({
                    left: '-=' + el.outerWidth(true) + 'px'
                },
                    settings.speed);
            }

            function checkArrows() {
                if (size === settings.visibleImagesSize) {
                    //settings.leftArrow.hide();
                } else {
                    settings.leftArrow.show();
                }

                if (size === imgElements) {
                    //settings.rightArrow.hide();
                } else {
                    settings.rightArrow.show();
                }
            }

            settings.leftArrow.click(function () {
                animateLeft();
                size--;
                checkArrows();
            });

            settings.rightArrow.click(function () {
                animateRight();
                size++;
                checkArrows();
            });

        });
    };
})(jQuery);



$(document).ready(function () {
    $('.gallery').thumbGallery();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open-space">
    <h2>Open Space</h2>
    <p class="description">Desk space in an open shared office environment that can be used in various of ways.</p>
    <center>
        <div class="gallery">
            <div class="arrow-left">
                <div class="arrow-left-small">
                </div>
            </div>
            <div class="gallery-outer">
                <div class="gallery-inner">
                    <div class="gallery-tmb">
                        <img src="images/openspace1.png" alt="Open Space1" height="auto" width="250"/>
                    </div>
                    <div class="gallery-tmb">
                        <img src="images/openspace2.png" alt="Open Space2" height="auto" width="250"/>
                    </div>
                    <div class="gallery-tmb">
                        <img src="images/openspace3.png" alt="Open Space3" height="auto" width="250"/>
                    </div>
                    <div class="gallery-tmb">
                        <img src="images/openspace4.png" alt="Open Space4" height="auto" width="250"/>
                    </div>
                    <div class="gallery-tmb">
                        <img src="images/openspace5.png" alt="Open Space5" height="auto" width="250"/>
                    </div>
                    <div class="gallery-tmb">
                        <img src="images/openspace6.png" alt="Open Space6" height="auto" width="250"/>
                    </div>
                </div>
            </div>
            <div class="arrow-right">
                <div class="arrow-right-small">
                </div>
            </div>
        </div>
        <span class="btn_margin">
    <asp:Button ID="Button3" runat="server" Text="More lists" CssClass="btn btn-primary top" OnClick="Btn_More_Click" />
  </span>
    </center>
</div>

Answer 1

Причина, по которой они перемещаются вместе, заключается в том, что вы используете селектор .gallery при вызове thumbsGallery(), который применяется ко всем элементам, которые имеют class="gallery" в коде HTML.Что вы можете сделать, это просто добавить уникальный id к каждой галерее и вызвать thumbsGallery() с каждым из селекторов.

HTML:

<div class="gallery" id="executive_gallery">
...
</div>
<div class="gallery" id="conference_gallery">
...
</div>
<div class="gallery" id="open_gallery">
...
</div>

Javascript:

$(document).ready(function () {
    $('.gallery#executive_gallery').thumbGallery();
    $('.gallery#conference_gallery').thumbGallery();
    $('.gallery#open_gallery').thumbGallery();
});

JSFiddle: https://jsfiddle.net/3qeLumkp/1/