Change Slider to Fader

Last Reviewed: 7-May-15 (3.3.20) 3.1.* 3.2.* 3.3.*

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: http://www.w3schools.com/css3/css3_transitions.asp

 

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).

29 thoughts on “Change Slider to Fader”

Comments are closed.