Change Slider to Fader

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

You can search the user’s forum or ask the user community by opening a new thread in the Customizr theme forum. Before opening a new topic, you might want to follow the troubleshooting steps..

One of the striking things with Customizr is the Front Page – the Header/Slider/Featured Pages items appearing by default.

@ElectricFeet came up with a different idea, which is to change the Slider to a Fader giving an alternative look-and-feel to the Front Page. Personally, I now use it as my preferred design. (Code contains suggested changes by @acub)

If you need to change the Slider to a Fader:

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

/* START OF Change Slider to Fader */
/* Make Carousel fade - adapt 2s to required delay */
.carousel-inner > .item {
-webkit-transition: opacity 2s ease-in-out ;
transition:         opacity 2s ease-in-out ;
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
opacity:        1;
z-index:        1;
left:           0;
.carousel-inner > .active.left {
opacity:        0;
z-index:        2;
left:           0;
.carousel-inner > .active.right {
opacity:        0;
z-index:        2;
left:           0;

/* remove previous/next arrows from home page only */
.home .carousel-control {
display:        none ;
/* END OF Change Slider to Fader */

For more information on CSS Transitions, read:


Extra note from @ElectricFeet: The CSS above governs the time it takes to fade one slide to another. If you want to change the time between slides, you need to set it in Customiz’it (in Front Page, Slider options).

Leave a comment

Your email address will not be published. Required fields are marked *

29 thoughts on “Change Slider to Fader”