Support » Theme: Customizr » slider fade effect

  • Resolved JTS_IL


    With the classic style I could use this snippet (with minor relevant changes) for fading the slides on the main page.
    As written, this doesn’t work on modern style.
    I want to use the fade effect for changing text with the same image so it will look like text fading on different places.

    How can I make the modern style slider with a fade effect?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi @jts_il,
    the fade effect is not contemplated by the Flickity Slider (the jQuery plugin used in the modern style to motorize the slider).
    There’s a feature request on the flickity github (with some workarounds throughout the comments), but, as the project author says, its implementation as of now is very unlikely.


    10X Rocco,
    I tried to figure out if I can disable the flickity and use the old slider js, but I don’t have enough jQuery practice for this level of coding 🙂


    the css on the filckity git was helpful (although it’s really not best practice).

    here’s the css I used :

     /* slider fade effect */
    	transform: none !important;
    .flickity-slider .carousel-cell {
       left: 0 !important;
    	 right : 0 !important;
       opacity: 0;
    	 z-index : -1;
       transition: opacity 1s ease-in-out;
    .flickity-slider .is-selected {
    	   left: 0 !important;
    	 right : 0 !important;
        opacity: 1;
    	  z-index: 0;

    I think that a css master will do it better 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.