How to create a slider with splidejs

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