Change Slider to Fader


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


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.

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

Related Snippets you may also like


29 thoughts on “Change Slider to Fader

  • Alonso Bobisconi

    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… 🙁

  • Rune Abro

    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?

  • joel

    I am LOVING Customizr, and EXTRA-loving the snippets. This was exactly what i was looking for.

    One question: I am seeing the fade transition now, but the images dont crossfade. The 2nd image pops in at 100% alpha, then the 1st image smoothly fades out. Wondering if i’ve made an error in the CSS somewhere? Here is the relevant code:

    • Antonio M.

      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:

      Greetings.

  • Wayne

    Hi Dave
    Brilliant, thanks. I’m a complete beginner at this and now my slider is a fader. Much better!
    Wayne

  • Chad

    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

      Does it happen also if you uncheck “Enable/disable slider’s slides centering on any devices” in “Appearance -> Customize -> Responsive Settings” ?

    • Rocco Aliberti

      Anyway looks like this rule in your child-theme style.css is causing that issue:

      Maybe along with that checked option?

  • Michael Sneed

    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

  • Cari

    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

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

    • Dave Bardell Post author

      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

  • Johnny Sandaire

    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

    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.

  • Richard

    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

Comments are closed.