Splide Svelte customize pagination or any splide element in svelte component

Question

I am trying to use Splide in my Svelte aplication and I want to change where the pagination appears, since it is on top of my images and too transparent. I'm using Svelte Splide to implement this library and I was trying to follow the docs in order to customize elements from the splide.

I was able to set my styles on a css file that I just had to import and it worked. The problem is this does not seem like the ideal way to do it, I want to be able to set styles from the styles section in my component file.

This is my carousel component:

<script lang="ts">
    import { Splide, SplideSlide, SplideTrack } from '@splidejs/svelte-splide';
    import type { Options } from '@splidejs/svelte-splide';
    import '@splidejs/svelte-splide/css';
    import './carousel-style.css'

    export let images: string[];

    let splideOptions: Options = {
        type: 'loop',
        perPage: 3,
        focus: 0,
        gap: '1rem',
        padding: '1em',
        breakpoints: {
            640: { perPage: 1, perMove: 1, arrows: false },
            1024: { perPage: 2, perMove: 1 }
        }
    };
</script>

<Splide hasTrack={false} pagination options={splideOptions}>
    <SplideTrack>
        {#each images as image}
            <SplideSlide>
                <img class="m-auto" src={image} alt="Aglo" />
            </SplideSlide>
        {/each}
    </SplideTrack>
    <ul class="splide__pagination" />
</Splide>

<style>
    .splide__pagination__page.is-active {
        background: blue;
    }
    .splide__pagination.splide__pagination__page {
        background-color: black;
    }
</style>

The css is the same as in carousel-style.css. I think the reazon it's not working is because the classes are never declared on my component, which is why if I try appling css to the class splide__pagination it does work, but for it's children it doesn't.

Answer 1

I was able to resolve this by using the global() selector like so:

<style>
    .splide__pagination :global(.splide__pagination__page.is-active) {
        background-color: blue
    }
    .splide__pagination :global(.splide__pagination__page) {
        background-color: black;
    }
</style>