Different speed for each slide - Slick Carousel

0

I'm using Slick Carousel in my project. It's working, though, so my project requires the slides to have different tempos.

I'm not getting it and I do not know if you have that option either. Someone, please?

Follow the code below:

<header>
  <div class="mx-topo">
    <p>
      MX-DIVULGAÇÃO-TOPO
    </p>
  </div>
</header>

                       

    </div>
  </div>
</div>
<footer>
  <div class="mx-rodape"><p>
    MX-DIVULGAÇÃO-RODAPÉ
  </p></div>
</footer>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script><scripttype="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script><scripttype="text/javascript" src="slick/slick.min.js"></script>
<script>
var tempo = 0;
var slider;
$.ajax(
           {
               url: 'http://localhost:8080/marketdigital/wss',
               type: 'POST',
               headers: {
                   dataType: 'json',
                   'Content-Type': 'application/json; charset=utf-8'
               },
               data: JSON.stringify({action: 'midia', token: 'ERWQJNJKRK8432978423'}),
               timeout: 3000,
               dataType: "json",
               async: false,
               success: function (o) {

                  console.log(o.data);
                 for(var i in o.data){
                  console.log("chegou");
                  var item = o.data[i];
                  var part;
                  console.log(item.tipo);
                  if(item.tipo == "VIDEO"){
                    part = "<video width='100%' video autoplay><source src='"+item.url+"' type='video/mp4'/></video>";
                    tempo = 0;
                  } else {
                    part = "<img src='"+item.url+"' style='width:100%;'/>";
                    tempo = item.tempo*1000;

                  }
                  $('.comercial').append('<div class="citem" >'+part+'</div>');

                 }
                 console.log('sucess');
                 console.log(o);
               },
               error: function (e) {
                 console.log('error');
                 console.log(data);
               }
           }
   );
$(document).ready(function(){
  slider = $('.comercial').slick({
    autoplay: true,
    arrows: false,
    fade: true,
    speed: tempo,
    adaptiveHeight: true,
    infinite: true,
    cssEase: 'linear'
  });
  $('.comercial').on('afterChange', function(event, slick, slide ) {
    var video = $($('.citem')[slide]).find('video');


    if(video.length > 0){
      $('.comercial').slick('slickPause');
      console.log(video[0]);
      video[0].play();
    }
  });
  $('video').on('ended', function() {
    $('.comercial').slick('slickPlay');
  });
});
</script>

    
asked by anonymous 01.09.2017 / 22:57

0 answers