Change Slider to Fader | Press Customizr

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 */

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”

TsupamaN
17 November 2016, 11 h 44 min

Thank you code.
- presscustomizr
  17 November 2016, 17 h 13 min
  
  You’re welcome 🙂
Alonso Bobisconi
8 August 2016, 13 h 31 min

We want to buy the Pro version, but the slider is not working – I have put the code to style.css (child theme), but still no fading. and second problem is the carousel-control is also not working – there is still “http://website.com/#customizr-slider-1 link, but not switching to the next slide… 🙁
- Menaka S
  9 August 2016, 4 h 45 min
  
  Hi,
  The developer team handles support for Customizr at https://wordpress.org/support/theme/customizr and for Customizr-Pro at http://presscustomizr.com/support/. Please post your query there with a link to your site.
  - Alonso Bobisconi
    9 August 2016, 11 h 16 min
    
    http://versium.gicz.cz
    - Menaka S
      10 August 2016, 5 h 14 min
      
      Please post your query in the support forum links given earlier.
Rune Abro
19 November 2015, 17 h 37 min

Thanks for the snippet, been using it for a while and at the default 5000ms delay between slides it works nicely.
At values below 5000ms however, it kinda breaks and every second transition become a hard cut. (hap
pens with no other custom CSS as well) Any thoughts?
Frank
12 November 2014, 4 h 58 min

Thanks for fader option. Any code to add “bullets” to the fader?
Mark
8 September 2014, 19 h 42 min

Thank you for the fantastic help you provide.

Antonio M.
3 October 2014, 11 h 42 min
Hi.
First, sorry for my english.

I have not gotten pictures make an crossfadding, but if you change the values of the lines 21 and 31 of the code pasted by 0 and 1 respectively, you will have a fade-out in the current image and a fade-in in the next image.
Here is the modified code:
```
/* 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: 0;
     z-index 1;
     left: 0;
}
.carousel-inner > .active.left {
     opacity: 0;
     z-index: 2;
     left: 0;
}
.carousel-inner > .active.right {
    opacity: 1;
    z-index: 2;
    left: 0;
}
/* remove previous/next arrows from home page only */
.home .carousel-control {
     display: none ;
}
```
Greetings.

Wayne
14 May 2014, 22 h 07 min

Hi Dave
Brilliant, thanks. I’m a complete beginner at this and now my slider is a fader. Much better!
Wayne
Chad
2 May 2014, 1 h 15 min

I’ve added this code to my child theme, but, it’s no longer fading the slides any more. It’s now zooming from large to small. This is the website: hegelercarus.org. Please help!
- Rocco Aliberti
  2 May 2014, 11 h 13 min
  
  Does it happen also if you uncheck “Enable/disable slider’s slides centering on any devices” in “Appearance -> Customize -> Responsive Settings” ?
- Rocco Aliberti
  2 May 2014, 11 h 39 min
  Anyway looks like this rule in your child-theme style.css is causing that issue:
  
  .left { float: left; margin-right: 2%; margin-bottom: 2%; }
  
  Maybe along with that checked option?
  - Chad
    2 May 2014, 17 h 01 min
    
    Thank you, Rocco! It was that pesky .left rule in my CSS. Changed that and the slider now fades the images. Thanks again!
    - Rocco Aliberti
      2 May 2014, 17 h 24 min
      
      Wonderful 😀
      Glad you solved.
Michael Sneed
16 January 2014, 22 h 14 min

Hi Dave,

I just wanted to write and let you know how much I appreciate all the work you do and everyone else.. I mean OMG! what a great resource the SNIPPETS sections is..let alone the theme: Bravo!

Thanks so much!
Michael
- Dave Bardell Post author
  17 January 2014, 17 h 55 min
  
  Thanks Michael, your feedback is also much appreciated! Lots more in the pipeline so keep coming back.
Cari
16 January 2014, 21 h 22 min

Hi I’ve used this and the fading works perfect! Now I’m working to slow the fades down and am not having luck. When I change the transition speed it really only affects the first image, then the rest change too quickly.
Here’s what I’m adjusting:
`.carousel-inner > .item {
-webkit-transition: opacity 2s ease-in-out ;
transition: opacity 15s ease-in-out ;
}
`
- ElectricFeet
  21 January 2014, 1 h 55 min
  
  Hi Cari. 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).
Gavin Bell
8 January 2014, 14 h 09 min

Hi,

I’ve done this but see no dfference?
- Dave Bardell Post author
  10 January 2014, 11 h 55 min
  
  I think we fixed this in the Forum? If not then I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.
  
  Thanks
Yuriy
21 October 2013, 12 h 00 min

Thank you very much – it’s done!
Johnny Sandaire
1 October 2013, 18 h 35 min

Hi,

I would like to add a Contact form to Customizr. Has anyone found a way to add one to the list of Templates in the Pages section?
Richard
29 September 2013, 18 h 04 min

Sorry for first email. Slider is working great. As with most of the issues you guys have to address …. it was user error!

Thanks again.
- Dave Bardell Post author
  29 September 2013, 18 h 36 min
  
  Glad to have helped 😉
Richard
29 September 2013, 17 h 29 min

Dave:

First, you’ve been a lifesaver concerning customizr. I input this code to make the slider fade into my child theme and updated it and nothing changed. Is there anything else I needed to change to make it work?

Thanks again for all of your technical advice on this forum
- Andrei
  29 September 2013, 18 h 44 min
  
  Change the transition duration from 2s to .7s and it will work.

Comments are closed.

AUTHOR

Dave Bardell

29 thoughts on “Change Slider to Fader”