web-dev-qa-db-fra.com

Ajouter une transition "blinds" à ma version du carrousel Flickity

J'ai mis ensemble THIS le curseur codepen (carrousel) qui utilise le légendes comme contrôles, à l'aide du plugin Flickity, avec ces 2 options:

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

Remarque: le curseur contient des vidéos, des images non.

J'ai besoin d'une transition similaire au transition entre stores qu'avait antoni.de carrousel.

Des questions:

  1. Quel est le moyen le plus simple et le plus rapide de le faire? Est-ce une chose CSS Seulement?
  2. Dois-je écrire du code JavaScript spécifique pour cette transition?
  3. Je préférerais emprunter ce code JavaScript. Où puis-je le trouver dans une version lisible non modifiée?

La version de code du carrousel est ICI.

UPDATE: J'ai ajouté un réponse partielle. Comme je le dis dans la réponse, j'aimerais pouvoir utiliser le les vidéos elles-mêmes pour la transition.

javascriptcsscarousel
9
Razvan Zamfir

Je ne suis pas sûr que vous souhaitiez que quelque chose soit prêt ou que vous souhaitiez modifier votre curseur.

Mais nous pouvons éditer n’importe quel curseur 

  • obtenir la prochaine image qui sera affichée
  • mettez DIV qui contient trois autres DIVs sur le curseur.
<div class="animateNextImage">
    <div></div>
    <div></div>
    <div></div>
</div>
  • définissez l'image suivante en tant que background-image sur chacune de ces trois DIVs.

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

Commencez ensuite à animer chaque arrière-plan pour réaliser l'animation souhaitée.

.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%;
}

Voir la démo ici: https://jsfiddle.net/IA7medd/odv4cshm/28/

4
Ahmed Salama

Jusqu'à présent j'ai fait ce qui suit:

Mon 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>

Mon 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%;
}

Mon 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 +'")');
});

Le résultat de ce code peut être vuici.

Je souhaite ne pas avoir à utiliser les images comme "jaquettes" pour les vidéos, j'aimerais pouvoir utiliser les vidéos elles-mêmes pour la transition. Je cherche un effet commecelui-ci.

0
Razvan Zamfir

Je ne suis pas sûr que ce curseur, mais, j'ai une autre solution pour le curseur aveugle. Reportez-vous au plugin ci-dessous pour cela. 

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

0
hardik solanki