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

Question

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 antoni.de carousel has.

Questions:

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

UPDATE: I have added a partial answer. As I say in the answer, I wish I could use the videos themselves for the transition.

--------------------------------------------------

>>> Share a link to this question, just copy and paste the code bellow on your web page <<<

<a href="https://www.wptricks.com/question/adding-a-blinds-transition-to-my-version-of-flickity-carousel/">

Adding a “blinds” transition to my version of Flickity carousel</a>
0
Marian 1 month 0 Answers 43 views 0

Leave an answer