Splide Svelte настраивает нумерацию страниц или любой элемент слайда в компоненте svelte. ⇐ CSS

[Anonymous]

Я пытаюсь использовать Splide в своем приложении Svelte и хочу изменить расположение нумерации страниц, поскольку она находится поверх моих изображений и слишком прозрачна. Я использую Svelte Splide для реализации этой библиотеки и пытался следовать документации, чтобы настроить элементы слайда.
Мне удалось установить свои стили в CSS
Мне удалось установить свои стили в CSS
Мне удалось установить свои стили в CSS
code> файл, который мне просто нужно было импортировать, и он сработал. Проблема в том, что это не идеальный способ сделать это, я хочу иметь возможность устанавливать стили из раздела стилей в моем файле компонента.
Это мой компонент карусели:

Код: Выделить всё

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




{#each images as image}

[img]{image} alt=[/img]

{/each}





.splide__pagination__page.is-active {
background: blue;
}
.splide__pagination.splide__pagination__page {
background-color: black;
}

Css такой же, как в carousel-style.css. Я думаю, что причина, по которой он не работает, заключается в том, что классы никогда не объявляются в моем компоненте, поэтому, если я попытаюсь применить CSS к классу splide__pagination, это сработает, но для его дочерних элементов - нет.


Подробнее здесь: https://stackoverflow.com/questions/768 ... -component