For too long I have relied on third party plugins and tools for simple sliders. Until one fine day a light bulb switched on in my tiny head that I can make my own in about 10 minutes that will be lightweight and sufficient for my basic slider needs. We start by installing sveltekit using the following command ```bash npm create svelte@latest svelte-slider ``` Then we cd into the directory (Note: You can add a dot instead of folder name to install in the same directory). Choose a skeleton project and simple javascript or typescript is sufficient for our project. ```bash npm create svelte@latest . npm i npm run dev -- --open ``` This is pretty much it. Now open routes and +page.svelte remove everything. Lets create a component called slider.svelte and export two props “duration” and “slides”. ```javascript ``` The variable currentSlide is used to track the state of the slider. Next we import the slider component into page.svelte ```javascript ``` For the purpose of our demonstration we are using a simple array as slides but you can use pretty much anything, string, images or a collection of both. Duration is set to 2000ms so our slider will change slides every 2 seconds. Next up we set the markup for html in the slider component. The way we are doing this is using the if condition to check if the currentSlide is equal to the slide index from the each iterator and only show that slide. ```html

{#each slides as slider, i} {#if currentSlide === i}

{slider}

{/if} {/each}

``` Next up we need a function to increment the currentSlide. Lets call this function something very creative and out of the box like “nextSlide”. xD So basically we take the currentSlide and increment it by one currentSlide++. But it will keep on incrementing forever and we can use an if statement to prevent that and when the currentSlide is greater or equal to the number of the last slide we reset it to 0. ``` ``` Also we need a setInterval function lets call it timer. Basically we need to clearInterval otherwise very bad (mildly annoying) things will happen. Also we need to call the timer function in nextSlide function as well to reset the interval and not have stuttering while navigating the slider. ```

{#each slides as slider, i} {#if currentSlide === i}

{slider}

{/if} {/each}

``` Lets add the buttons so we can also manually control the slider as well. We can use the on:click={} to call our function. Also lets add a fancy navigation to spice things up. ```

{#each slides as slider, i} {#if currentSlide === i}

{slider}

{/if} {/each}

{#each slides as slider, i}

``` This looks complex but its very simple. We have a simple nav that has a button corresponding to each slide and and on click to go to the clicked slide’s index. A bunch of conditional classes so we can style the buttons. Now lets add a bunch of CSS styles to make everything look nice. ``` ``` Also lets complete our script portion ``` ``` Here is complete code and our slider is ready to be utilized in your upcoming projects. ``` ``` ```

{#each slides as slider, i} {#if currentSlide === i}

{slider}

{/if} {/each}

{#each slides as slider, i}

``` ``` ``` We also added a transition from svelte transitions to spice things up. Here is the github repository. [https://github.com/khalildevo/Svelte-Slider](https://github.com/khalildevo/Svelte-Slider "https://github.com/khalildevo/Svelte-Slider")

Create a svelte slider from scratch without any external tools

Svelte + GSAP megamenu tutorial + code