英文:
Splide Svelte customize pagination or any splide element in svelte component
问题
我正在尝试在我的Svelte应用程序中使用Splide,并且我想要更改分页显示的位置,因为它位于我的图像顶部并且太透明。我正在使用Svelte Splide来实现这个库,并且我尝试按照文档来自定义Splide的元素。
我已经能够在一个css
文件中设置我的样式,并成功导入使用。问题是这似乎不是理想的做法,我希望能够从组件文件的styles
部分设置样式。
这是我的轮播组件:
<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>
CSS与carousel-style.css
中的内容相同。我认为它不起作用的原因是这些类从未在我的组件中声明,这就是为什么如果我尝试将CSS应用于splide__pagination
类,它会起作用,但对于它的子元素则不起作用。
英文:
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.
答案1
得分: 0
我能够通过使用global()
选择器来解决这个问题,代码如下:
<style>
.splide__pagination :global(.splide__pagination__page.is-active) {
background-color: blue
}
.splide__pagination :global(.splide__pagination__page) {
background-color: black;
}
</style>
英文:
I was able to do 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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论