title: Adding a "blinds" transition to my version of Flickity carousel
body: <p>I have put together <strong><a href="https://codepen.io/Ajax28/full/yqaLmr/" rel="nofollow noreferrer">THIS</a></strong> codepen slider (carousel) that uses the <em>captions as controls</em>, with the help of the <strong><a href="https://flickity.metafizzy.co/" rel="nofollow noreferrer">Flickity plugin</a></strong>, with these 2 options:</p>
  
  <pre><code>var flkty = new Flickity(".carousel", {
    pageDots: false,
    wrapAround: true
  });
  </code></pre>
  
  <p><strong>Note:</strong> the slider has videos, <em>not</em> images.</p>
  
  <p>I need a transition similar to the <strong><a href="https://antoni.de/" rel="nofollow noreferrer">blinds transition</a></strong> that <strong>antoni.de</strong> carousel has.</p>
  
  <p>Questions:</p>
  
  <ol>
  <li>What is the easiest and fastest way to do that? Is it a CSS thing
  only?</li>
  <li>Do I have to write specific JavaScript for this transition?</li>
  <li>I would rather borrow that JavaScript, where can I find it in a readable, unminified version?</li>
  </ol>
  
  <p>The code version of the carousel is <strong><a href="https://codepen.io/Ajax28/full/yqaLmr" rel="nofollow noreferrer">HERE</a></strong>.</p>
  
  <p><strong>UPDATE:</strong> I have added a <strong><a href="https://stackoverflow.com/a/51816827/4512005">partial answer</a></strong>. As I say in the answer, I wish I could use the <em>videos themselves</em> for the transition.</p>