Как сделать активный слайд Swiper по текстовому анкору?

Question

[AlexWD]

Есть слайдер в Swiper состоящий из нескольких слайдов. У слайдера есть навигация по типу пагинации, только переключение по уменьшенным картинкам.

Можно ли при открытии страницы с текстовым анкором, например: site.ru/#slide1 отображать первый слайд при загрузке страницы, а при ссылке site.ru/#slide2 отображать второй слайд при загрузке страницы. И так же нажимая на элементы навигации, будем считать по пагинациям добавлять этот анкор в url?

Answer 1

[AlexWD]

Решение есть в API самого Swiper.

https://swiperjs.com/api/#hash-navigation

Answer 2

[Юрий]

Swiper API -> Events

Логика примерно такая:

swiper.on('init', function () {
  if (window.location.hash) {
    const hash = window.location.hash
    const slideIndex = parseInt(hash.replace('#slide', ''), 10)
    swiper.slideTo(slideIndex) // либо slideToLoop, если у вас включен loop
  }
})

swiper.on('slideChange', function () {
  window.location.hash = `#slide${swiper.activeIndex}` // либо realIndex, если включен loop
})

Comments

[AlexWD]

#slide1, #slide2 - это примеры. Вместо них нужно прописать реальные названия по типу "#home", "#garage" и т.п.

И при смене слайдов он мне назначает #slide1 и т.д., но если переходить по ссылке site.ru/slide#2, он всё равно грузит страницу начиная с нулевого

[Юрий]

AlexWD, не site.ru/slide#2, а site.ru/#slide2

УМВР. Если нужны ссылки не с номерами слайдов, а с какими-то текстовыми идентификаторами, сделайте с ними массив и по нему находите нужный индекс слайда в свайпере, делов-то.

[AlexWD]

Юрий, Опечатка.
Даже при переходе правильном #slide2 не открывается третий слайдер(если учитывать что массив с 0).
Просто грузит страницу основную.

var galleryThumbs = new Swiper('.gallery-thumbs', {
    spaceBetween: 10,
    slidesPerView: 4,
    freeMode: true,
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
  });
  var galleryTop = new Swiper('.gallery-top', {
    pagination: {
      el: '.top-pagination',
      type: 'fraction',
    },
    spaceBetween: 10,
    navigation: {
      nextEl: '.swiper-button-next-top',
      prevEl: '.swiper-button-prev-top',
    },
    thumbs: {
      swiper: galleryThumbs
    }
  });
            galleryTop.on('init', function () {
              if (window.location.hash) {
                const hash = window.location.hash
                const slideIndex = parseInt(hash.replace('#slide', ''), 10)
                galleryTop.slideTo(slideIndex) // либо slideToLoop, если у вас включен loop
              }
            });
            
            galleryTop.on('slideChange', function () {
              window.location.hash = `#slide${galleryTop.activeIndex}` // либо realIndex, если включен loop
            });

Если нужны ссылки не с номерами слайдов, а с какими-то текстовыми идентификаторами, сделайте с ними массив и по нему находите нужный индекс слайда в свайпере, делов-то.

Не подскажете как это реализовать? В JS ноль полный...