@AlexWD

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

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

Можно ли при открытии страницы с текстовым анкором, например: site.ru/#slide1 отображать первый слайд при загрузке страницы, а при ссылке site.ru/#slide2 отображать второй слайд при загрузке страницы. И так же нажимая на элементы навигации, будем считать по пагинациям добавлять этот анкор в url?
  • Вопрос задан
  • 56 просмотров
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 1
@cheeroque
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
})
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы