> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/nc/advanced/slider/styling.md).

# Styling

## Variables 

{% hint style="success" %}
Create these in the Base collection in your project's variables. 
{% endhint %}

<table><thead><tr><th width="216.66668701171875"></th><th width="111"></th><th></th></tr></thead><tbody><tr><td>swiper-navigation-color</td><td>Color</td><td>Set's the navigation color for next/prev arrows</td></tr><tr><td><del>swiper-theme-color</del></td><td>Color</td><td>Not working</td></tr><tr><td><del>swiper-navigation-size</del></td><td>Size </td><td>Not working</td></tr></tbody></table>

```css
.swiper-slide {
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-pagination-bullet {
  background: #333;
}

.swiper-button-next,
.swiper-button-prev {
  color: red;
}
```

## Future&#x20;

dark mode light mode

instance-level styling&#x20;