hashNavigation completely doesn't work

[jakeparis]

I hesitate to file an issue for this, because it so completely doesn't work, that I figure I must be doing something wrong.

I've enabled hashNavigation by setting the value to true, or { watchState: true } or { enabled: true, watchState: true} (tried all three).

I've confirmed that hashNavigation is enabled by looking in the swiper instance for swiper.params.hashNavigation (and it's set to true.

I've added data-hash="" values to each of my slides.

The slider works fine, except that no hashes are added to the url, and when visiting the url and manually adding the hash, it doesn't set the active slide.

Is there any other possible thing I could be missing? Here are my settings, in case it's useful:

Swiper params

// swiper.params
{
  "init": true,
  "direction": "horizontal",
  "touchEventsTarget": "wrapper",
  "initialSlide": 0,
  "speed": 300,
  "cssMode": false,
  "updateOnWindowResize": true,
  "resizeObserver": true,
  "nested": false,
  "createElements": false,
  "enabled": true,
  "focusableElements": "input, select, option, textarea, button, video, label",
  "width": null,
  "height": null,
  "preventInteractionOnTransition": false,
  "userAgent": null,
  "url": null,
  "edgeSwipeDetection": false,
  "edgeSwipeThreshold": 20,
  "autoHeight": true,
  "setWrapperSize": false,
  "virtualTranslate": false,
  "effect": "slide",
  "breakpointsBase": "window",
  "spaceBetween": 0,
  "slidesPerView": 1,
  "slidesPerGroup": 1,
  "slidesPerGroupSkip": 0,
  "slidesPerGroupAuto": false,
  "centeredSlides": true,
  "centeredSlidesBounds": false,
  "slidesOffsetBefore": 0,
  "slidesOffsetAfter": 0,
  "normalizeSlideIndex": true,
  "centerInsufficientSlides": false,
  "watchOverflow": true,
  "roundLengths": true,
  "touchRatio": 1,
  "touchAngle": 45,
  "simulateTouch": true,
  "shortSwipes": true,
  "longSwipes": true,
  "longSwipesRatio": 0.5,
  "longSwipesMs": 300,
  "followFinger": true,
  "allowTouchMove": true,
  "threshold": 0,
  "touchMoveStopPropagation": false,
  "touchStartPreventDefault": true,
  "touchStartForcePreventDefault": false,
  "touchReleaseOnEdges": false,
  "uniqueNavElements": true,
  "resistance": true,
  "resistanceRatio": 0.85,
  "watchSlidesProgress": false,
  "grabCursor": true,
  "preventClicks": true,
  "preventClicksPropagation": true,
  "slideToClickedSlide": false,
  "preloadImages": true,
  "updateOnImagesReady": true,
  "loop": false,
  "loopAdditionalSlides": 0,
  "loopedSlides": null,
  "loopFillGroupWithBlank": false,
  "loopPreventsSlide": true,
  "rewind": false,
  "allowSlidePrev": true,
  "allowSlideNext": true,
  "swipeHandler": null,
  "noSwiping": true,
  "noSwipingClass": "swiper-no-swiping",
  "noSwipingSelector": null,
  "passiveListeners": true,
  "containerModifierClass": "swiper-",
  "slideClass": "swiper-slide",
  "slideBlankClass": "swiper-slide-invisible-blank",
  "slideActiveClass": "swiper-slide-active",
  "slideDuplicateActiveClass": "swiper-slide-duplicate-active",
  "slideVisibleClass": "swiper-slide-visible",
  "slideDuplicateClass": "swiper-slide-duplicate",
  "slideNextClass": "swiper-slide-next",
  "slideDuplicateNextClass": "swiper-slide-duplicate-next",
  "slidePrevClass": "swiper-slide-prev",
  "slideDuplicatePrevClass": "swiper-slide-duplicate-prev",
  "wrapperClass": "swiper-wrapper",
  "runCallbacksOnInit": true,
  "_emitClasses": false,
  "observer": false,
  "observeParents": false,
  "observeSlideChildren": false,
  "navigation": {
    "nextEl": ".swiper-button-next",
    "prevEl": ".swiper-button-prev",
    "hideOnClick": false,
    "disabledClass": "swiper-button-disabled",
    "hiddenClass": "swiper-button-hidden",
    "lockClass": "swiper-button-lock"
  },
  "modules": [
    null
  ],
  "autoplay": false,
  "autoplay__delay": 4000,
  "hashNavigation": {
    "enabled": true,
    "watchState": true
  },
  "pagination": false,
  "keyboard": true,
  "el": "#slideshow7363"
}

HTML

<div id="slideshow7363" class="swiper">
	<div class="swiper-button-next"></div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-wrapper">
		<div class="swiper-slide" data-hash="image-9110">
			<img data-id="9110" src="https://mydomain.com/img1.webp" alt="Fall foliage brightens the field." data-fullsrc="https://mydomain.com/img1.webp" data-regsrc="https://mydomain.com/img1-900x600.webp">
			<div class="image_caption"><p>Lorem Ipsum. Caption.</p></div>
		</div>
		<div class="swiper-slide" data-hash="image-8581">
			<img data-id="8581" src="https://mydomain.com/IMG_0178-scaled.jpg" alt="" data-fullsrc="https://mydomain.com/IMG_0178-scaled.jpg" data-regsrc="https://mydomain.com/IMG_0178-900x672.jpg">
		</div>
		...
	</div>
</div>

[nolimits4web]

If you use not bundle version, make sure you have included hashNavigation module https://swiperjs.com/swiper-api#using-js-modules

[jakeparis]

Ah ha! That's it thank you. In the documentation, I didn't realize that each of the module sections assumed you would include that module. Still learning how to navigate the docs.

[webel]

I seem to be having a similar issue with swiper elements.
The hash updates when clicking through the pagination, but when trying to load a certain slide directly by its hash it still always displays the first slide.

...
	import { Navigation } from 'swiper/modules';
...

	<swiper-container
		slides-per-view={1}
		pagination={{
			clickable: true
		}}
		modules={[Navigation]}
		class="checklist-swiper w-full"
		hashNavigation={{
			enabled: true,
			watchState: true
		}}
	>
		{#each categories as category}
			<swiper-slide class="flex flex-col items-center" data-hash={category.hash}>
                                <p> blabla </p>
			</swiper-slide>
		{/each}
	</swiper-container>

I've tried with and without importing modules, I've tried different cases (hashNavigation doesn't work with kebab case, then I don't see the change in the URL), I've tried getting the reference and doing slideTo the hash...

[jakeparis]

@webel You'd probably be better off starting a new discussion or issue, as this one has already been solved, and your issue seems to be a bit different.