SABBIRZ
Query?

How to create a slider with splidejs

Shoe

sveltekit create slider with splidejs

Slider is one of the most important components of a website, creating slider is rather easy in sveltekit

1. Install npm package

terminal

npm i @splidejs/svelte-splide

2. Let’s create a component named slider inside lib folder

Slider.svelte

import { Splide, SplideSlide } from '@splidejs/svelte-splide';
import '@splidejs/splide/dist/css/themes/splide-default.min.css';

4. Now create several variables for both desktop and mobile & also export those variables too, so that we can set those slider images from any page too,

Slider.svelte

export let Slide1 = '/sliderhome/desk_slider_A.jpg';
export let Slide1a = '/sliderhome/mob_slider_A.jpg';
export let Slide2 = '/sliderhome/desk_slider_B.jpg';
export let Slide2a = '/sliderhome/mob_slider_B.jpg';

The script part of the slider is complete, now we must focus on the markup section

5. Let’s check the basic structure of the splide slider

Slider.svelte

<Splide options={{"slider configuration"}} aria-label="sliderName">
	<SplideSlide>
		<div>
			<!-- Placeholder of slider-->
		</div>
	</SplideSlide>
</Splide>

Based on the basic structure this is my actual code

Slider.svelte

<div>
	<Splide options={{ rewind: true, autoplay: true, type: 'loop' }} aria-label="My Favorite Images">
		<SplideSlide>
			<div>
				<SliderCta btnURL="product-category/eid-collection-2023" ctaText="Eid" />
				<img class="hidden md:block" src={Slide1} alt="Image1" />
				<img class="block h-full w-full md:hidden" src={Slide1a} alt="Image1" />
			</div>
		</SplideSlide>
		<SplideSlide>
			<div>
				<SliderCta btnURL="product-category/eid-collection-2023" ctaText="Eid" />
				<img class="hidden md:block" src={Slide2} alt="Image1" />
				<img class="block h-full w-full md:hidden" src={Slide2a} alt="Image1" />
			</div>
		</SplideSlide>
	</Splide>
</div>

The <SliderCta/> is a component which consists of text and a button.

Slider.svelte

<SliderCta btnURL="product-category/eid-collection-2023" ctaText="Eid" />

Our slider component is ready To configure and customise the splide slider read all the options that slidejs provides https://splidejs.com/guides/options/

Splidejs Options

Splidejs Options