`

document.addEventListener('DOMContentLoaded', function () {
    const contentProductsSwiper = new Swiper('.products-list__header', {
        slidesPerView: 1,
        loop: true,
        speed: 300,
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
            clickable: true,
            /**
            * Custom function for rendering pagination points.
            * Returns the HTML code for each point.
            * */
            renderBullet: function (index, className) {
                /**
                * Generates HTML code for the pagination point.
                * Uses the class provided by Swiper and adds the point number.
                * */
                return '<span class="' + className + '">' + (index + 1) + '</span>';
            },
        },
        // Swiper event
        on: {
            // Event triggered when the slide changes
            slideChange: function () {
                // Get all pagination points
                const bullets = document.querySelectorAll('.swiper-pagination-bullet');
                // Total number of pagination points
                const totalBullets = bullets.length;
                // Index of the current active slide
                const activeIndex = this.realIndex;

                if (totalBullets > 0) {
                    // Remove the active class from all pagination points
                    bullets.forEach(bullet => bullet.classList.remove('swiper-pagination-bullet-active'));

                    // Add the active class to the current and next two pagination points
                    for (let i = 0; i < 3; i++) {
                        /**
                        * Calculates the pagination point index by adding the current active index and offset,
                        * then takes the remainder of the division by the total number of points.
                        * */
                        const bulletIndex = (activeIndex + i) % totalBullets;
                        // Checking the existence of an element in NodeList bullets

                        if (bullets[bulletIndex]) {
                            bullets[bulletIndex].classList.add('swiper-pagination-bullet-active');
                        }
                    };
                }
            },
        },
    });

    // Initially set the active class for the first three pagination points
    // const initialBullets = document.querySelectorAll('.swiper-pagination-bullet');
    for (let i = 0; i < 3; i++) {
        // Check if the pagination point exists
        if (initialBullets[i]) {
            // Add an active class
            initialBullets[i].classList.add('swiper-pagination-bullet-active');
        }
    };
});

You need to do it like in the picture
I tried to do this:

const swiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
    renderBullet: function(index, className) {
      return `<span class="${className}">${index + 1}</span>`;
    }
  },
  slidePreview: 1,
  slidesPerView: 1,
  slidesPerColumn: 3,
});

I have three slides, that is, 3 pictures of a product card. But you need one picture to display the product
If the buyer wants to see other photos of the product, then he needs to click on the flags below. And there should be 3 of them, although in the Swiper settings there is slidesPerView: 1

It should look like the photo I provided above

How to solve this problem?
I will be glad to help

`