Clash Royale CLAN TAG#URR8PPP

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

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:

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.

3 Answers
3

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

But we can edit any slider by

DIV

DIVs

<div class="animateNextImage">
<div></div>
<div></div>
<div></div>
</div>


background-image

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/

poster

src

autoplay

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

Until now I have done the following:

My HTML:

<div id="full_slider" class="carousel">
<div class="item">
<div class="bg">
<video muted loop autoplay>
<source type="video/mp4" src="video/eroi.mp4"></source>
</video>
<div class="photo"><img src="img/agentie_full_service.png" alt="Agentie full-service"></div>
<div class="cover">
<div class="third"></div>
<div class="third"></div>
<div class="third"></div>
</div>
</div>
<div class="content">
<h1>Lorem ipsum dolor</h1>
</div>
</div>
<div class="item">
<div class="bg">
<video muted loop autoplay>
<source type="video/mp4" src="video/meda.mp4"></source>
</video>
<div class="photo"><img src="img/strategeie_de_brand.png" alt="Strategie de brand"></div>
<div class="cover">
<div class="third"></div>
<div class="third"></div>
<div class="third"></div>
</div>
</div>
<div class="content">
<h1>Lorem ipsum dolor</h1>
</div>
</div>
</div>


My CSS:

#full_slider .item .bg .cover
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
transition: opacity 0.2s 1s ease;

#full_slider .item .bg .cover div
position: absolute;
top: 0;
width: 33.3333%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: -100% 0%;
transition: background-position 0.5s ease;

#full_slider .item.is-selected .cover
opacity: 0;

#full_slider .item.is-selected .cover > div:nth-child(1)
left: 0;
transition-delay: 0.5s;
background-position: 0% 0%;

#full_slider .item.is-selected .cover > div:nth-child(2)
left: 33.3333%;
transition-delay: 0.25s;
background-position: 50% 0%;

#full_slider .item.is-selected .cover > div:nth-child(3)
left: 66.6666%;
background-position: 100% 0%;



My jQuery:

$('#full_slider').find('.photo').each(function()
var imgContainer = $(this),
bkImg = imgContainer.find('img').attr('src');
imgContainer.next().find('div').css("background-image", 'url("'+ bkImg +'")');
);


The result of this code can be seen here.

I wish I did not have to use images as "covers" for the videos, I wish I could use the videos themselves for the transition. I am looking for an effect like this one.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.