Почему компонент hashNavigation в Swiper заменяет весь путь в URL? - PullRequest
Новая
       14

Почему компонент hashNavigation в Swiper заменяет весь путь в URL?

0 голосов
/ 13 апреля 2020

Я хочу включить глубокую ссылку на изображения в карусели Swiper. Компонент hashNavigation, кажется, специально создан для этого, но я не понимаю, как заставить его работать. Когда я включаю его и предоставляю атрибут data-hash в своих слайдах, он заменяет весь путь на га sh, который я предоставил. Очевидно, что это делает его бесполезным для любого swiper, не на главной странице. Как мне получить добавить га sh к пути вместо его замены? Вот мой код для его создания: 

var vis = document.getElementById('vis'),
swiperOpts = {
  loop: true,
  slidesPerView: 1,
  mousewheel: true,
  hashNavigation: {
    watchState: true,
    replaceState: true,
  },
  autoplay: {delay: 4444}
},
swiper = new Swiper(vis, swiperOpts);

И пример разметки: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<base href="/">

<link rel="preconnect" href="//cdnjs.cloudflare.com">
<link rel="preconnect" href="//unpkg.com">
<link rel="stylesheet" href="//unpkg.com/swiper/css/swiper.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
</head>

<body class="visio">
<main>
<div class="swiper-container" id="vis">
<ul class="swiper-wrapper">
  <li class="swiper-slide" data-hash="235" style="">
      <p>slide one</p></li>
  <li class="swiper-slide" data-hash="228" style="">
      <p>slide two</p></li>
  <li class="swiper-slide" data-hash="224" style="">
      <p>slide tre</p></li>
  <li class="swiper-slide" data-hash="227" style="">
      <p>slide for</p></li>
  <li class="swiper-slide" data-hash="236" style="">
      <p>slide fiv</p></li>
</ul>
        </div>
    </main>
<script src="//unpkg.com/swiper/js/swiper.min.js"></script>
</body></html>

Вот несколько примеров URL, которые я вижу:

  • базовый URL: domain.com/visio/sol
  • слайд-данные * га sh значение: 224
  • URL после изменения Swiper: domain.com/#224

1 Ответ

0 голосов
/ 13 апреля 2020

Мне так и не удалось заставить это работать должным образом, но я обошел его с помощью следующего кода: 

let initIDX = 0;
if(window.location.hash){
    let lmnt = document.querySelector('[data-hash="'+window.location.hash.substring(1)+'"]'),
    i = 0;

    while((lmnt = lmnt.previousSibling) != null) if(lmnt.nodeType == 1) ++i;

    initIDX = i;
}

var vis = document.getElementById('vis'),
    swiperOpts = {
        loop: true,
        slidesPerView: 1,
        initialSlide: initIDX,
        on:{
            slideChangeTransitionEnd: function(){
                history.replaceState(null, null,
                    window.location.pathname + '#' + this.slides[this.activeIndex].dataset.hash);
            }
        }
    },
    swiper = new Swiper(vis, swiperOpts);

Это работает для меня.

...