0

Estou utilizando Slick Carousel no meu projeto. Ele está funcionando, porém, meu projeto exige que os slides tenham tempos diferentes.

Não estou conseguindo e também não sei se tem essa opção. Alguém, por favor?

Segue código abaixo :

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

5
  • Onde setado o tempo dos slides?
    – Sam
    2/09/2017 às 3:08
  • Veja se isto pode ajudar 2/09/2017 às 21:25
  • @Dvdsamm o tempo eu estou trazendo uma variavel tempo de uma requisicao ajax. o cliente faz o cadastro da imagem incluindo o tempo que ele deseja. Eu so nao me toquei, que o slider = $('.comercial').slick so e chamado uma vez, entao mesmo eu altrando o valor da variavel tempo, ele nao vai alterar o tempo do carousel :( 4/09/2017 às 11:00
  • @PedroPinto Vou averiguar e tentar implementar! Grato! 4/09/2017 às 11:02
  • Acho que este link é +- oque está no procurando,encontrei a partir desta outra pergunta 5/09/2017 às 3:44

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .