Swiper галерея с навигацией универсальная, на одной странице много галерей

Question

Подскажите как можно реализовать Swiper галерею универсальную, точней как можно написать код на JS чтобы он подходил для всех галерей. Галерея состоит из слайдера и навигации сладов. Пример, есть галерея и нужно эту галерею сделать на одной странице 30 шт таких одинаковых и чтобы они не конфликтовали, а параллельно все работали сами.

    const galleryThumbs1 = new Swiper('.gallery-thumbs1', {
  spaceBetween: 10,
  slidesPerView: 4,
  freeMode: true,
  watchSlidesVisibility: true,
  watchSlidesProgress: true,

  breakpoints: {
        1200: {
            spaceBetween: 10,
             slidesPerView: 4,
        },
        992: {
            spaceBetween: 10,
             slidesPerView: 4,
        },
        768: {
            spaceBetween: 10,
             slidesPerView: 4,
        },
        576: {
            spaceBetween: 10,
             slidesPerView: 4,
        },
        320: {
            spaceBetween: 2,
             slidesPerView: 4,
        },

    }
});
const galleryTop1 = new Swiper('.gallery-top1', {
  spaceBetween: 42,

  navigation: {
    nextEl: '.h-gallery-next',
    prevEl: '.h-gallery-prev',
  },
  thumbs: {
    swiper: galleryThumbs1,
  },
});

 // gallery inner page horisontal thumbs menu
const galleryThumbs2 = new Swiper('.gallery-thumbs2', {
  spaceBetween: 10,
  slidesPerView: 4,
  freeMode: true,
  watchSlidesVisibility: true,
  watchSlidesProgress: true,

  breakpoints: {
        1200: {
            spaceBetween: 10,
             slidesPerView: 4,
        },
        992: {
            spaceBetween: 10,
             slidesPerView: 4,
        },
        768: {
            spaceBetween: 10,
             slidesPerView: 4,
        },
        576: {
            spaceBetween: 10,
             slidesPerView: 4,
        },
        320: {
            spaceBetween: 2,
             slidesPerView: 4,
        },

    }
});
const galleryTop2 = new Swiper('.gallery-top2', {
  spaceBetween: 42,

  navigation: {
    nextEl: '.h-gallery-next2',
    prevEl: '.h-gallery-prev2',
  },
  thumbs: {
    swiper:galleryThumbs2,
  },
});

Answer 1

Универсального решения не нашел, пришлось просто в массив насоздавать кучу.

        let galleryClassNames = [];
    for (let i = 1; i <= 30; i++) {
        if ( !$('.gallery-thumbs' + i.toString()).length) {
        break;
        }

        galleryClassNames.push(new Swiper('.gallery-thumbs' + i.toString(), {
            spaceBetween: 10,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
            breakpoints: {
            1200: {
                spaceBetween: 10,
                slidesPerView: 4,
            },
            992: {
                spaceBetween: 10,
                slidesPerView: 4,
            },
            768: {
                spaceBetween: 10,
                slidesPerView: 4,
            },
            576: {
                spaceBetween: 10,
                slidesPerView: 4,
            },
            320: {
                spaceBetween: 2,
                slidesPerView: 4,
            },

            }
        })
        );


        new Swiper('.gallery-top' + i.toString(), {
        spaceBetween: 42,

        navigation: {
            nextEl: '.h-gallery-next' + i,
            prevEl: '.h-gallery-prev' + i,
        },
        thumbs: {
            swiper:galleryClassNames[i-1],
        },
        });

    }

БЛОГ НА HUSL

Swiper галерея с навигацией универсальная, на одной странице много галерей

Ответы (1 шт):