How to create a slider with splidejs

Slider is one of the most important components of a website, creating a 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 the lib folder

3. We must import the content of the package splidejs

   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, This allows us to set those slider images from any page.

   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";
   

   /sliderhome/desk_slider_A.jpg means, I have placed the images inside static/sliderhome folder

   With the script part of the slider complete, we must now focus on the markup section.

5. Let’s examine the basic structure of a Splide slider

   slider.svelte

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

   Based on this basic structure, here is my actual code

   slider.svelte

   <Splide
     options={{
       type: "fade",
       heightRatio: 0.5,
       pagination: false,
       isNavigation: true,
       arrows: true,
       cover: true,
     }}
     aria-label="sliderName"
   >
     <SplideSlide>
       <img src={Slide1} alt="image_alt" />
     </SplideSlide>
     <SplideSlide>
       <img src={Slide2} alt="image_alt" />
     </SplideSlide>
     <SplideSlide>
       <img src={Slide3} alt="image_alt" />
     </SplideSlide>
     <SplideSlide>
       <img src={Slide4} alt="image_alt" />
     </SplideSlide>
   </Splide>
   

   Our slider component is ready.

To configure and customize the Splide slider, read all the options that Splide.js provides https://splidejs.com/guides/options/