# Slider

<figure><img src="https://117397612-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSlG6RrSDmGrQX2xjM6AT%2Fuploads%2FkB3s0jbGLFugAu29eAd0%2FScreenshot%20from%202024-01-18%2017-26-13.png?alt=media&#x26;token=63bb3f27-fd31-4aaa-b3c3-80f8a378a7f2" alt=""><figcaption></figcaption></figure>

we are using Swiper to build this slider so all Swiper functions can be applied to the slider using native js buy use `<x-splade-script>` tag and you can use the slider like this&#x20;

```markup
<x-tomato-admin-slider
    class="w-full h-80"
    :images="$imagesTM ?? []"
    :horizontal="false"
    :items="1"
    :navigation="false"
>
    @foreach($images as $image)
        <x-tomato-admin-slider-item zoom>
            <div class="flex justify-center">
                <div class=" w-80 h-80">
                    <img src="{{$image}}"  class="object-contain" />
                </div>
            </div>
        </x-tomato-admin-slider-item>
    @endforeach
</x-tomato-admin-slider>
```

this component uses [Swiper](https://swiperjs.com/vue)