I’m trying to shorten my code and create one function that will dynamically change values depending on which slider is clicked. I have one two json objects from which I get my data so I have wrapped leftSlider and rightSlider functions in one function modalFunc which I called in my projects.js and about.js.
My logic is to write one function that will get two functions as arguments(leftPrevious, rightSlider) and depending on slider I can change minus and plus in my if statements, and also add last if statement from rightSlider if it has been clicked. I anything isn’t clear I will do my best to explain in more detail.
My sample is here:
modal.js

const modalFunc = function () {
    const imageGallery = document.querySelectorAll(`.gallery-img`);
    const modal = document.querySelector(`#myModal`);
    let modalContent = document.querySelector(`#img01`);
    const leftSlider = document.querySelector(`#left-slider`);
    const rightSlider = document.querySelector(`#right-slider`);
    const closeBtn = document.querySelector(`.close-btn`);

    let page = window.location.href.split(`.html`);
    let index = page[0];
    const url = index.includes(`about`)
        ? index.replace(`pages/about`, `certificates`)
        : index.replace(`pages/projects`, `images`);

    let imgFormat;
    imageGallery.forEach(img => {
        img.addEventListener(`click`, function () {
            modalContent.src = img.src;
            modal.style.display = `flex`;
            imgFormat = modalContent.src.includes(`jpg`) ? `jpg` : `png`;
        });
    });

    leftSlider.addEventListener('click', function () {
        const src = modalContent.src.split('-');
        let srcNum = Number(src[1].replace(`.${imgFormat}`, ``));
        for (let i = 1; i < imageGallery.length; i++) {
            if (srcNum === i) {
                modalContent.src = `${url}/image-${i - 1}.${imgFormat}`;
            }
            if (srcNum === imageGallery.length) {
                modalContent.src = `${url}/image-${i}.${imgFormat}`;
            }
            if (srcNum === 1) {
                modalContent.src = `${url}/image-${imageGallery.length}.${imgFormat}`;
            }
        }
    });

    rightSlider.addEventListener('click', function () {
        const src = modalContent.src.split('-');
        let srcNum = Number(src[1].replace(`.${imgFormat}`, ``));
        for (let i = 1; i < imageGallery.length; i++) {
            if (srcNum === i) {
                modalContent.src = `${url}/image-${i + 1}.${imgFormat}`;
            }
            if (srcNum === imageGallery.length) {
                modalContent.src = `${url}/image-${
                    imageGallery.length - imageGallery.length + 1
                }.${imgFormat}`;
            }
        }
    });

    closeBtn.addEventListener(`click`, function () {
        modal.style.display = `none`;
    });
};

projects.js

const projectsGallery = document.querySelector('.projects__wrapper');

fetch('../data.json')
    .then(response => response.json())
    .then(data => {
        const displayProjects = function (project) {
            projectsGallery.innerHTML = ``;
            data.projects.forEach(project => {
                const card = `
        <div class="card">
                            <img src=${project.src} id="myImg" class="img__project gallery-img" alt=${project.alt}></img>
                            <h1  class="hvr-grow">${project.projectName}</h1>
                            <div class="card__btn-wrapper">
                                <a class="card__btn hvr-sweep-to-left" href=${project.code}>
                                See Code
                        </a>
                        <a class="card__btn hvr-sweep-to-right" href=${project.live}>
                            Live
                    </a>
                        </div>
                        </div>
        `;
                projectsGallery.insertAdjacentHTML(`beforeend`, card);
            });
            modalFunc();
        };
        displayProjects(data.projects);
    });

about.js

const certificateGallery = document.querySelector(`.certificates__wrapper`);

fetch('../data.json')
    .then(response => response.json())
    .then(data => {
        const displayCertificates = function (certificate) {
            certificateGallery.innerHTML = ``;
            data.certificates.forEach(certificate => {
                const certificateImg = `<img id="myImg" class="gallery-img ${certificate.class}" src=${certificate.src} />`;
                certificateGallery.insertAdjacentHTML(`beforeend`, certificateImg);
            });
            modalFunc();
        };
        displayCertificates(data.certificates);
    });

Source: Ask Javascript Questions