Sunday, August 12, 2018

Adding a “blinds” transition to my version of Flickity carousel

By Hường Hana 12:00 PM , , Leave a Comment

I have put together THIS codepen slider (carousel) that uses the captions as controls, with the help of the Flickity plugin, with these 2 options:

var flkty = new Flickity(".carousel", {   pageDots: false,   wrapAround: true });

Note: the slider has videos, not images.

I need a transition similar to the blinds transition that WOW slider has.

Questions:

  1. What is the easiest and fastest way to do that? Is it a CSS thing only?
  2. Do I have to write specific JavaScript for this transition?
  3. I would rather borrow that JavaScript, where can I find it in a readable, unminified version?

The code version of the carousel is HERE.

2 Answers

Answers 1

I'm not sure you want something ready or you want to edit your slider.

But we can edit any slider by

  • get the next image that will be display
  • put DIV that contain other three DIVs over the slider.
<div class="animateNextImage">     <div></div>     <div></div>     <div></div> </div>
  • set the next image as a background-image to each of these three DIVs.

$(".animateNextImage div").css('background-image', "url('"+ nextActiveImg +"')");

Then start to animate each background to achieve the animation you want.

.animateNextImage div{    width: 33.3333%;    float:left;    height: 100%;    background-repeat: no-repeat;    background-size: cover;    background-position: -100% 0%;    transition: background-position 0.5s ease;  }  .animateNextImage.active div:nth-child(1){    transition-delay: 0.4s;    background-position: 0% 0%;  }  .animateNextImage.active div:nth-child(2){    transition-delay: 0.2s;    background-position: 50% 0%;  }  .animateNextImage.active div:nth-child(3){    background-position: 100% 0%;  }

See demo here: https://jsfiddle.net/IA7medd/odv4cshm/28/

Answers 2

I am not sure this slider, But, i have some other solution for blind slider. Refer below plugin for this.

solution-1: https://github.com/stathisg/blindify

solution-2: http://www.hislider.com/faq/how-to-add-blind-fade-and-both-transitions-in-my-jquery-image-gallery-slider.html

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment