How to Use Swiper’s Custom CSS Variables
Swiper is a modern slider library that allows flexible customization of styles using CSS custom properties (variables). This article details how to use Swiper’s custom CSS properties and provides example settings.
1. Basic Custom Property Settings
The following code is an example of a basic configuration of Swiper’s custom CSS variables. This allows you to customize Swiper’s pagination (slide indicator) and its style.
:root {
--swiper-pagination-color: var(--swiper-theme-color); /* pagination color */
--swiper-pagination-bullet-size: 8px; /* bullet size */
--swiper- pagination-bullet-width: 8px; /* Bullet width */
--swiper-pagination-bullet-height: 8px; /* Bullet height */
--swiper-pagination-bullet-inactive-color: # 000; /* inactive-bullet-color */
--swiper-pagination-bullet-inactive-opacity: 0.2; /* inactive-bullet-opacity */
--swiper-pagination-bullet-opacity: 1; /* opacity of active bullet */
--swiper-pagination-bullet-horizontal-gap: 4px; /* horizontal gap between bullets */
--swiper-pagination-bullet-vertical-gap: 6px; /* vertical gap vertical-gap */
}2. Why use custom properties?
CSS custom properties allow you to manage styles such as theme colors and sizes in a uniform and efficient manner. This gives you the flexibility to change multiple styles at once during theme changes or design adjustments.
3. Specific Use Cases
Below is an example of a specific Swiper pagination setup that utilizes custom properties. The default pagination style can be easily adjusted with custom properties.
<style>
:root {
--swiper-pagination-color: #ff6347;
--swiper-pagination-bullet-size: 12px;
--swiper-pagination-bullet-inactive- color: #ccc;
}
</style>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</ div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class ="swiper-pagination"></div>
</div>
<script>
const swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>4. Other customization methods
Swiper’s CSS custom properties can be used not only for pagination, but also for slide transitions and navigation button styles. For more detailed customization options, you may want to refer to the official documentation.
Conclusion
Using CSS custom properties, you can easily change the look and feel of Swiper. This allows you to improve the user interface while maintaining a consistent design. We encourage you to implement it and customize it to match your website design.