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.