Pagination buttons don't show on Sveltekit project

[analubarreto]

• Swiper Version: 6.6.2
• Platform/Target and Browser Versions: macOS - Chrome

What You Did

https://codesandbox.io/s/black-wind-on3qc
I'm using it with sveltekit, to reproduce:
npm init svelte@next (sveltekit demo app -> no -> no -> no)
npm install
npm install swiper
npm run dev
create a new component inside lib
copy the code to the new component and use inside a page

Expected Behavior

Pagination should work fine with either Svelte or Sveltekit

Actual Behavior

Animation shows, but buttons don't on Sveltekit

[nolimits4web]

Duplicate of #4574

[analubarreto]

It's really not it's pagination not navigation, just because I have used his instructions doesn't mean it's the same issue u_u

[tonprince]

I have the same issue, the pagination icons do not show with Sveltekit.

[0line]

I found a way to solve it, I’m passing you the code that I implemented in svelte kit.

<script  lang="ts">
   	import Swiper from 'swiper';
        import 'swiper/swiper.scss';
        import 'swiper/components/navigation/navigation.scss';
        import 'swiper/components/pagination/pagination.scss';
	import { onMount } from 'svelte';
	import { browser } from '$app/env';

 	let SwiperCore,Navigation,Autoplay,Lazy,Pagination ; 
	if (browser) {
		onMount(async () => {
			SwiperCore  = (await import('swiper')).default;
			Navigation = (await import('swiper')).Navigation;
			Pagination = (await import('swiper')).Pagination;
			Autoplay = (await import('swiper')).Autoplay;
			Lazy = (await import('swiper')).Lazy;
			SwiperCore.use([Navigation,Pagination,Autoplay,Lazy]);
			const swiper = new Swiper('.swiper-container', {
				speed: 400,
				spaceBetween: 0,
				autoplay: {
					delay: 4000,
				},
				slidesPerView: 1,
				preloadImages: false,
				// Enable lazy loading
				lazy: {
					loadPrevNext: true,
				},
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
				pagination: {
					el: '.swiper-pagination',
					type: 'bullets',
					clickable:true,
					dynamicBullets:true
				},
				effect: 'fade',
				fadeEffect: {
					crossFade: true
				},
			});
		});
	}
</script>
<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

[JimNayzium]

I was searching all over for this, also but solved it with the simplest thing in svelte kit.
I am in swiper version 11.
the first was to import the Nav/Pag form the modules folder instead of the 'swiper' location.
import { Navigation, Pagination } from 'swiper/modules';