Module «slider-scroll». Based on jquery.scrollbar & swiper. Works as slider on mobile devices. Works as scrollable area for desktop devices.

Демо:

https://codepen.io/ildar-meyker/pen/gOEzrxp

Плагины:

https://jquery.com

https://swiperjs.com/

https://gromo.github.io/jquery.scrollbar/

Подключение:

//

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.scrollbar@0.2.11/jquery.scrollbar.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>    
<script src="https://cdn.jsdelivr.net/npm/jquery.scrollbar@0.2.11/jquery.scrollbar.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

Разметка:

//


<div class="l-catalog-item__row">
    <div class="l-catalog-item__left">
        <div class="scroll-jquery scrollbar-inner l-catalog-item__scroll">
            <div class="slider-photos">
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div
                                class="image-box slider-photos__image"
                                style="padding-top: 115.66%"
                            >
                                <img
                                    src="https://html.ildar-meyker.ru/html-gosha/img/temp/products/1/1.jpg"
                                    alt=""
                                />
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div
                                class="image-box slider-photos__image"
                                style="padding-top: 133.37%"
                            >
                                <img
                                    src="https://html.ildar-meyker.ru/html-gosha/img/temp/products/2/1.webp"
                                    alt=""
                                />
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div
                                class="image-box slider-photos__image"
                                style="padding-top: 133.37%"
                            >
                                <img
                                    src="https://html.ildar-meyker.ru/html-gosha/img/temp/products/2/2.webp"
                                    alt=""
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="l-catalog-item__right">
        Lorem.
    </div>
</div>

Стили:

//


// helpers/helpers.scss
.image-box {
    position: relative;

    img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}



// blocks/sliders/slider-photos.scss
.slider-photos {
}

@media (max-width: 999.98px) {
    .slider-photos {
        &__image {
            padding-top: 100% !important;
        }
    }
}
@media (min-height: 800px) {
    .slider-photos {
        &__image {
            padding-top: 113.92% !important;
        }
    }
}

@media (min-width: 1000px) {
    .slider-photos {
        .swiper:not(.swiper-initialized) .swiper-wrapper {
            flex-direction: column;
        }
    }
}


.l-catalog-item {
    &__row {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    &__left {
        padding: 2rem 2rem 0 2rem;
        max-width: 440px;
    }

    &__right {
        padding: 2rem 2rem 0 2rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        height: calc(100vh - 100vw + 2rem);
    }


}




@media (min-width: 1000px) {
    .l-catalog-item {
        &__row {
            flex-direction: row;
        }

        &__left,
        &__right {
            flex: 0 0 auto;
            width: 50%;
        }

        &__left {
            padding: 0;
            max-width: none;
        }

        &__right {
            height: 100vh;
        }


        &__scroll {
            height: 100%;
        }
    }
}

Инициализация:

//

$(function () {
    $(".slider-photos").each(function () {
        let swiper = null;

        const mediaQueryMobile = window.matchMedia("(max-width: 999.98px)");

        const handleMediaChange = (event) => {
            if (event.matches) {
                swiper = new Swiper($(this).find(".swiper")[0]);
            } else {
                if (swiper) {
                    swiper.destroy();
                }
            }
        };

        mediaQueryMobile.addEventListener("change", handleMediaChange);

        handleMediaChange(mediaQueryMobile);
    });
});

$(function () {
    $(".scroll-jquery").scrollbar();
});