Support » Theme: Customizr » slider fade effect

  • Resolved JTS_IL

    (@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.

    Best

    JTS_IL

    (@jts_il)

    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 🙂

    JTS_IL

    (@jts_il)

    Well…

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

    here’s the css I used :

    
      /**********************/
     /* slider fade effect */
    /**********************/
    .flickity-slider{ 
    	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.