# Slider

**URL:** https://community.elfsight.com/c/css-codes/slider/178.md

[Latest](https://community.elfsight.com/latest.md) · [Categories](https://community.elfsight.com/categories.md) · [Tags](https://community.elfsight.com/tags.md)

---

## [Show part of next slide](https://community.elfsight.com/t/show-part-of-next-slide/81858)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 12, 2024, 1:32pm UTC](https://community.elfsight.com/t/show-part-of-next-slide/81858 "2024-11-12T13:32:30Z")

</div>

Add this code to the Custom CSS field on the Settings tab of your Slider widget’s settings: .eapp-slider-slider-active { width: 85% !important; }

---

## [Slow down the appearance of text on slide](https://community.elfsight.com/t/slow-down-the-appearance-of-text-on-slide/81861)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 12, 2024, 1:35pm UTC](https://community.elfsight.com/t/slow-down-the-appearance-of-text-on-slide/81861 "2024-11-12T13:35:53Z")

</div>

Add this code to the Custom CSS field on the Settings tab of your Slider widget’s settings: .eapp-slider-slide-elements { transition: 2s ease bottom, 2s ease opacity; }

---

## [Slow down the appearance of the images on slides](https://community.elfsight.com/t/slow-down-the-appearance-of-the-images-on-slides/81860)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 12, 2024, 1:33pm UTC](https://community.elfsight.com/t/slow-down-the-appearance-of-the-images-on-slides/81860 "2024-11-12T13:33:44Z")

</div>

Add this code to the Custom CSS field on the Settings tab of your Slider widget’s settings: .eapp-slider-media-container { transition: 2s ease top, 2s ease opacity; }

---

## [Change arrow color on hover](https://community.elfsight.com/t/change-arrow-color-on-hover/81856)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 12, 2024, 1:30pm UTC](https://community.elfsight.com/t/change-arrow-color-on-hover/81856 "2024-11-12T13:30:44Z")

</div>

Add this code to the Custom CSS field on the Settings tab of your Slider widget’s settings: .eapp-slider-navigation-arrow:hover svg path { fill: #cccccc !important; }

---

## [Change badge text color](https://community.elfsight.com/t/change-badge-text-color/25164)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 11:58am UTC](https://community.elfsight.com/t/change-badge-text-color/25164 "2023-11-10T11:58:49Z")

</div>

Add this code to the Custom CSS field on the Settings tab of your Slider widget’s settings: .eapp-slider-badge-component{ font-size: 24px; color: red; }

---

## [Change button text color (Slider)](https://community.elfsight.com/t/change-button-text-color-slider/25165)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 11:59am UTC](https://community.elfsight.com/t/change-button-text-color-slider/25165 "2023-11-10T11:59:44Z")

</div>

Add this code to the Custom CSS field on the Settings tab of your Slider widget’s settings: .eapp-slider-button-link{ font-size: 19px; color: yellow; }

---

## [Change border radius](https://community.elfsight.com/t/change-border-radius/25175)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 12:24pm UTC](https://community.elfsight.com/t/change-border-radius/25175 "2023-11-10T12:24:45Z")

</div>

Add this code to the Custom CSS field on the Settings tab of your Slider widget’s settings: .eapp-slider-slide-slide { border-radius: 5%; }