Different speed for each slide - Slick Carousel

Asked

Viewed 259 times

0

I’m using Slick Carousel in my project. It’s working though, my project requires that slides have different times.

I’m not getting it and I also don’t know if you have that option. Someone, please?

Follows 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>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="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>

  • Where set the slide time?

  • See if this can help

  • @Dvdsamm the time I am bringing a variable time of an ajax requisicao. the client makes the image registration including the time he wants. I just didn’t touch, that slider = $('.commercial'). Slick is called only once, so even if I raise the value of the variable time, it will not change the Carousel time :(

  • @Pedropinto I will investigate and try to implement! Grateful!

  • I think that this link is +- what is in the search,found from of this other question

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.