slider fade effect

  • Resolved JTS_IL

    (@jts_il)


    7 years, 11 months ago

    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)
  • Rocco Aliberti

    (@d4z_c0nf)

    7 years, 11 months ago

    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

    Thread Starter JTS_IL

    (@jts_il)

    7 years, 11 months ago

    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 🙂

    Thread Starter JTS_IL

    (@jts_il)

    7 years, 11 months ago

    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)

The topic ‘slider fade effect’ is closed to new replies.