JSFiddle - React, Tailwind, and code Playground

by Austin Anderson

HTML

<div class="image-gallery-carousel-container position-relative">

        <div class="row arrow-row">
            <div class="col-1">
                <div>
                    <a href="#" class="arrow-left">
                        <img src="~/assets/images/carousel_left_arrow.png" class="arrow arrow-left" />
                    </a>
                </div>
            </div>
            <div class="col-1">
                <div>
                    <a href="#" class="arrow-right">
                        <img src="~/assets/images/carousel_right_arrow.png" class="arrow arrow-right" />
                    </a>
                </div>
            </div>
        </div>

        @{
            int i = 0;
        }
        @foreach (var item in Model.Items)
        {
            var image = Model.Items.ElementAt(i);
            var imageUrl = image.Fields.MediaUrl ?? "";
            var captionText = image.Fields.AlternativeText;

            <div class="row img-row @((i == 0) ? "d-flex" : "d-none")" data-csIndex="@i">
                <div class="col-24">
                    <div class="row">
                        <div class="col-24">
                            <img class="img-fluid" src="@imageUrl" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-24">
                            @Html.Raw(captionText)
                        </div>
                    </div>
                </div>
            </div>
            i++;
        }
    </div>

JavaScript

//Keep values in a closure as the other carousel indexes were getting mixed with this one
(function () {
    var current = 0;
    var nextImage = 0;
    var container = $('.double-image-gallery-carousel-container');
    var size = container.find('.row[data-csIndex]').length - 1;

    $('.image-gallery-carousel-container .arrow-row a').on('click', function (e) {
        e.preventDefault();
        //no need to do anything if gallery size is less than 1
        if (size <= 1) {
            return;
        }

        //hide current image
        container.find('[data-csIndex="' + current + '"]').toggleClass('d-flex d-none');

        //next
        if ($(this).hasClass("arrow-right")) {
            if (current === size) {
                nextImage = 0;
                current = 0;
            } else {
                current++;
                nextImage++;
            }
        }

        //prev
        if ($(this).hasClass("arrow-left")) {
            if (current === 0) {
                nextImage = size;
                current = size;
            } else {
                current--;
                nextImage--;
            }            
        }

        //show next image
        container.find('[data-csIndex="' + nextImage + '"]').toggleClass('d-none d-flex');

        //Testing / Debug
        //console.log(current + ' of ' + size);
        //console.log(prev, current, next);

        //scroll into view
        var scrollTop = $(window).scrollTop();
        var oldHeight = $(this).closest('.image-gallery-carousel-container').height();
        if ($(this).hasClass('arrow-mobile')) {
            var newHeight = $(this).closest('.image-gallery-carousel-container').height();
            window.scrollTo(0, scrollTop + newHeight - oldHeight)
        }
    });
})();