Swiper якорная ссылка на слайд — шаблон страницы?

Question

[aex-svs]

Добрый день!
Огромная просьба помочь(уже 3 день не получается побороть), Сайт построен на elementor путем подключения к слайдам - шаблона страниц

<div class="home-swiper swiper-container">
  <div class="home-wrapper swiper-wrapper">
    <div class="swiper-slide">[elementor-template id="1"]</div>
    <div class="swiper-slide">[elementor-template id="2"]</div>
    <div class="swiper-slide">[elementor-template id="3"]</div>
    <div class="swiper-slide">[elementor-template id="4"]</div>
    <div class="swiper-slide">[elementor-template id="5"]</div>
    <div class="swiper-slide">[elementor-template id="6"]</div>
    <div class="swiper-slide">[elementor-template id="7"]</div>
    <div class="swiper-slide">[elementor-template id="8"]</div>
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>
</div>

Каким образом мне необходимо реализовать переход с якорной ссылки на определенный слайд (страницу) к примеру site.ru/#slide3? пробовал различные Варианты и все без успешно( Js включает Swiper 6.7. - SSR Window - Dom7 3.0.0
Сам js https://github.com/nolimits4web/swiper/files/71943...
Заранее спасибо

Comments

[FeST1VaL]

Берете клик по кнопке в которой есть номер слайда или же хэш страницы и переходите... https://swiperjs.com/swiper-api#method-swiper-slideTo

[aex-svs]

FeST1VaL, пробовал не работает, где я мог допустить ошибку?

<div class="swiper-slide" data-hash="slide3" >[elementor-template id="3"]</div>

var swiper = new Swiper('.swiper-container', {
  //enable hash navigation
  hashNavigation: true
})

[FeST1VaL]

aex-svs, ну я вообще про другой способ, но в теории в вашем варианте нету ошибок)

[aex-svs]

FeST1VaL, пробовал и таким образом (пункту меню задал класс .slide-to)

document.querySelector('.slide-to').addEventListener('click', => {
  mySwiper.slideTo(2);
});

Также не помогло, Можете подсказать в чем проблема? (файл с js прикреплен)
Заранее спасибо!

[FeST1VaL]

aex-svs, так то что вы скинули же вроде дефолтный Swiper файл, а не ваш код) Я хз) скачайте с офф сайта и закиньте, мб поможет) явных проблем нету

[aex-svs]

FeST1VaL, все таки решил идти путем хэша- если ссылку браузере ввожу (site.ru/#slide3) , то попадаю на нужную страницу.... но в меню ссылка site.ru/#slide3 не открывает нужную страницу,(слайд)) какие параметры я упустил?

[FeST1VaL]

aex-svs, я просто через hashnavigation не делал в итоге... Я делал все через slideto. т.е проверял при загрузке страницы hash и переходил к нужному слайду

[aex-svs]

FeST1VaL, Если не сложно можешь код написать, ) заранее спасибо)

[alexeys_as]

Может пригодиться:

let testSwiper = new Swiper('...', {
		slidesPerView: 1,
		watchSlidesProgress: true,
		autoHeight: true,
		hashNavigation: true,
		allowTouchMove: false,
		on: {
			init: function () {
				// Управления якорями
				let showSlideHash = (hash) => {
					hash = hash.replace('#', '');
					for (let index = 0; index < this.slides.length; index++) {
						if (hash == this.slides[index].getAttribute('data-hash')) {
							this.slideTo(index);
							this.slides[index].scrollIntoView();
						}
					}
				}
				let hash = window.location.hash;
				if (hash) {
					showSlideHash(hash);
				}
				let links = document.querySelectorAll('a[href^="#"]')
				for (let link of links) {
					link.addEventListener('click', (e) => {
						let hash = link.getAttribute('href');
						if (hash) {
							showSlideHash(hash);
						}
					});
				}
			},
		},
	})